新手帮助向jQuery添加功能
Newbie help Adding function to jQuery
我有一个jQuery菜单,它用以下参数表示:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#promo').pieMenu({icon : [
{
path : "/wp-content/themes/Tersus/images/piemenu/winamp.png",
alt : "Winamp",
fn : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}
}, {
path : "/wp-content/themes/Tersus/images/piemenu/vlc.png",
alt : "VLC Media Player",
fn : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}
},{
path : "/wp-content/themes/Tersus/images/piemenu/QuickTime.png",
alt : "Quick Time Player",
fn : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.qtl';return false}
},{
path : "/wp-content/themes/Tersus/images/piemenu/WMP.png",
alt : "Windows Media Player",
fn : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.asx';return false}
},{
path : "/wp-content/themes/Tersus/images/piemenu/popup.png",
alt : "נגן Popup",
fn : function(){$("#popupplay").click();return false}
},{
path : "/wp-content/themes/Tersus/images/piemenu/iTunes.png",
alt : "iTunes",
fn : function(){alert('...בקרוב');return false}
}],
beforeMenuOpen: function(){
jQuery('<div id="shadow"></div>').css(
{
'position':'fixed',
'background-color':'#000000',
'opacity': 0.6,
'width':'100%',
'height':'100%',
'z-index' :999,
'top':0,
'left':0
}).appendTo('body');
},
beforeMenuClose: function(){
jQuery('#shadow').remove();
}
});
});
</script>
右键单击即可操作该菜单。我需要将其更改为悬停。
插件的作者给出了插入内容的片段:
$(document).ready(function(){
//init my jPie
var jPieMenu = $(#myelement').pieMenu({icon : [ {
path : "path/to/images.png",
alt : "icon",
fn : function(){alert('Click:: icon');return false;}
}] });
$('#myelement').hover(function(){
if($('#'+jPieMenu.id).css('display') != 'block') //if jpie is not visible
jPieMenu.initMenu(200,200);
})
})
唯一的问题是我不知道在哪里插入什么。。我总是得到意想不到的东西。有人能看看我上面的代码并建议插入它的位置吗?
提前Thanx。
首先,您需要将饼图菜单设置为一个变量,这样您就可以引用它的id:
更改:
jQuery('#promo').pieMenu({icon : [
至
var pieMenu = jQuery('#promo').pieMenu({icon : [
现在我们有了一种引用菜单本身和包含元素#promo的方法,我认为它只是一个div,当悬停在上面时需要设置菜单。
无论如何,添加这个:
$('#promo').hover(function(){
if($('#'+pieMenu.id).css('display') != 'block') //if jpie is not visible
pieMenu.initMenu(200,200);
})
在最后两组})
之间,你应该可以走了。
编辑:是的,给你代码的作者漏掉了一句话。不过应该没关系,因为你已经对那个部分进行了编码。
您只需要用现有代码替换$('#myelement').pieMenu
声明。
$(document).ready(function(){
//init my jPie
var jPieMenu = $('#promo').pieMenu({icon : [ { // replace these lines with your existing code
path : "path/to/images.png",
alt : "icon",
fn : function(){alert('Click:: icon');return false;}
}] });
$('#promo').hover(function(){ // This ID needs to be the same as your element
if($('#'+jPieMenu.id).css('display') != 'block') //if jpie is not visible
jPieMenu.initMenu(200,200);
})
})
此外,在第三行的第二个代码块中,#myelement开头缺少一个引号,这导致该行中的所有其他内容都充当字符串
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#promo').pieMenu({icon : [
{
path : "/wp-content/themes/Tersus/images/piemenu/winamp.png",
alt : "Winamp",
fn : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}
}, {
path : "/wp-content/themes/Tersus/images/piemenu/vlc.png",
alt : "VLC Media Player",
fn : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.pls';return false}
},{
path : "/wp-content/themes/Tersus/images/piemenu/QuickTime.png",
alt : "Quick Time Player",
fn : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.qtl';return false}
},{
path : "/wp-content/themes/Tersus/images/piemenu/WMP.png",
alt : "Windows Media Player",
fn : function(){('Click:: Plus');window.location.href = 'http://94.23.250.14:2199/tunein/tranceilfm.asx';return false}
},{
path : "/wp-content/themes/Tersus/images/piemenu/popup.png",
alt : "נגן Popup",
fn : function(){$("#popupplay").click();return false}
},{
path : "/wp-content/themes/Tersus/images/piemenu/iTunes.png",
alt : "iTunes",
fn : function(){alert('...בקרוב');return false}
}],
beforeMenuOpen: function(){
jQuery('<div id="shadow"></div>').css(
{
'position':'fixed',
'background-color':'#000000',
'opacity': 0.6,
'width':'100%',
'height':'100%',
'z-index' :999,
'top':0,
'left':0
}).appendTo('body');
},
beforeMenuClose: function(){
jQuery('#shadow').remove();
}
});
jQuery('#promo').hover(function(){ // This ID needs to be the same as your element
if(!jQuery('#'+jPieMenu.id).is(":visible")) //if jpie is not visible
jPieMenu.initMenu(200,200);
})
});
</script>
相关文章:
- 将控制器的功能添加到角度中的特定视图
- 如何将工具提示功能添加到高级图表中的 X 轴标签
- 如何将左/右箭头(下一个/上一个)功能添加到我的 jQuery 图像和文本滑块
- 将缩放功能添加到 jquery 宝丽来图库
- 将本地搜索功能添加到传单 JS 库
- 尝试将促销代码功能添加到折扣号码
- 无法将热键功能添加到firefox插件中
- 为与CSS3动画完成相关的功能添加回退
- 如何将标准API功能添加到jQuery插件中
- Rest.next()?我的点击功能添加'.活动'两次
- 向OpenLayers 3中的功能添加事件处理程序
- 将自定义功能添加到chrome's控制台
- 当我将鼠标悬停在通过按钮功能添加的表行上时,如何更改列中的图像
- 为分页导航功能添加延迟
- 另外,使用Javascript功能添加多个文本框
- JS位置加载后的功能-添加延迟时间
- 希望将展开和折叠功能添加到作为父节点的动态生成的文件中
- 未捕获的类型错误:无法读取属性'作者'在尝试将编辑功能添加到注释框时,为undefined
- 如何将 jquery 自动完成 UI 功能添加到表中的每个单元格
- 将滑动功能添加到响应页面的现有侧边菜单中