我正在开发一个移动网站,我想在 div 下显示隐藏的子菜单,例如 Twitter 的移动网站(滑动推文以显示其他选项)。我真的很喜欢 jQuery.mmenu.js 插件中的界面,但它仅限于目标 ID,我需要定位类。
我确定这是 Fred 设置的,这意味着理论上它可以更改。
代码都可以在这里下载:http: //mmenu.frebsite.nl/
PS。根据 Fred 的联系要求,这篇文章主要是针对 Fred 的,但如果有人能想到解决方案,我很乐意尝试。
我正在开发一个移动网站,我想在 div 下显示隐藏的子菜单,例如 Twitter 的移动网站(滑动推文以显示其他选项)。我真的很喜欢 jQuery.mmenu.js 插件中的界面,但它仅限于目标 ID,我需要定位类。
我确定这是 Fred 设置的,这意味着理论上它可以更改。
代码都可以在这里下载:http: //mmenu.frebsite.nl/
PS。根据 Fred 的联系要求,这篇文章主要是针对 Fred 的,但如果有人能想到解决方案,我很乐意尝试。
你可以把它包装起来:
$('.classSelector').each(function(){
$('#'+this.id).mmenu();
});
...ofc,具有该类的每个对象都需要有一个 id ...
如果您不想在 html 中为他们提供 id,请执行以下操作:
var menuCtr = 0;
$('.classSelector').each(function(){
if(this.id == ''){
this.id = 'my_mmenu_'+ menuCtr++;
}
$('#'+this.id).mmenu();
});
这也应该起作用:
$('.classSelector').mmenu();
唯一真正的问题是插件将拖动事件绑定到“页面”。因此,通过在页面上拖动来打开菜单仅限于每个方向(“左”、“右”、“上”、“下”)一个菜单。
我想更改插件会相对容易,因此它可以将拖动事件绑定到指定元素(通过配置)并回退到“页面”。在官方插件中实现之前,请像这样尝试:
for ( var a = 0; a < 10; a++ )
{
$(".menu" + a).mmenu({
dragOpen :{
open: true,
pageNode: $(".tweet" + a)
}
});
}
打开未缩小的 jquery.mmenu.js 文件,转到 $.fn.mmenu.dragOpen 方法(第 454 行)并添加:
var $dragNode = ( opts.pageNode && opts.pageNode instanceof $ ) ? opts.pageNode : $page;
转到第 530 行并更改:
$page.hammer()
进入
$dragNode.hammer()
我认为这应该可以解决问题。