更改由 mmenu jQuery 插件切片的元素
Change which elelemt that gets slided by mmenu jQuery plugin
我正在使用 jQuery 的 mmenu 插件在关闭 canvas 菜单中创建幻灯片。我的问题是我有一个不理想的标记并且没有页面包装器。结果是滑出页面放在了错误的元素上,一切都变白了,我现在正在尝试更改它。
<body>
<nav id="menu" class="mm-menu mm-horizontal mm-offcanvas mm-right mm-front">
<ul class="mm-list mm-panel mm-opened mm-current" id="mm-0">
<li><a href="/">Home</a></li>
<li><a class="mm-subopen" href="#mm-1"></a><a href="/about">About us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<!-- some more markup generated by the plugin -->
</nav>
<div class="mm-page mm-slideout" style="min-height: 949px;">
<div id="DeltaPlaceHolderCustomizeSiteActionsAndQuickLaunch"></div>
<div id="imgPrefetch" style="display:none">
<img src="/_layouts/15/images/favicon.ico?rev=23">
<img src="/_layouts/15/images/spcommon.png">
<img src="/_themes/691/spcommon-B35BB0A9.themedpng?ctag=693">
</div>
</div>
// more markup
</body>
这是生成的标记,它根本不起作用,因为页面内容不在 mm-slideout
class 的 div 中。
我已经尝试将 pageNodeType(如那里所述)设置为在较低级别(从 body
标签向下几层)包装页面的表单元素,如下所示:
$(document).ready(function () {
var page = $('#aspnetForm');
$("#menu").mmenu(
{
offCanvas: {
position: "right",
zposition: "front"
}
}, {
offCanvas: {
pageNodeType: "form"
}
})
});
并且还尝试了 setting a specific element as the page,(如那里所述),像这样:
$("#menu").mmenu().trigger("setPage.mm", [page]);
但是没有任何反应。我知道它正在被阅读,因为我可以将菜单的位置更改为右侧。
当我只做pageNoteType的时候。所发生的只是带有 class mm-slideout 的元素在其中获得另一个具有相同 classes 的元素。但没有什么能改变滑动的内容。
我知道我的配置表明页面不应滑动,但菜单应滑过它,但据我所知,我仍然需要更改获取 mm-page 和 mm- 的内容幻灯片 classes。目前,当我打开菜单时,页面上的所有内容都会变白。
pageNodeType
应该是 pageNodetype
(注意小写 t)。其余的看起来不错,应该可以了。
我正在使用 jQuery 的 mmenu 插件在关闭 canvas 菜单中创建幻灯片。我的问题是我有一个不理想的标记并且没有页面包装器。结果是滑出页面放在了错误的元素上,一切都变白了,我现在正在尝试更改它。
<body>
<nav id="menu" class="mm-menu mm-horizontal mm-offcanvas mm-right mm-front">
<ul class="mm-list mm-panel mm-opened mm-current" id="mm-0">
<li><a href="/">Home</a></li>
<li><a class="mm-subopen" href="#mm-1"></a><a href="/about">About us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<!-- some more markup generated by the plugin -->
</nav>
<div class="mm-page mm-slideout" style="min-height: 949px;">
<div id="DeltaPlaceHolderCustomizeSiteActionsAndQuickLaunch"></div>
<div id="imgPrefetch" style="display:none">
<img src="/_layouts/15/images/favicon.ico?rev=23">
<img src="/_layouts/15/images/spcommon.png">
<img src="/_themes/691/spcommon-B35BB0A9.themedpng?ctag=693">
</div>
</div>
// more markup
</body>
这是生成的标记,它根本不起作用,因为页面内容不在 mm-slideout
class 的 div 中。
我已经尝试将 pageNodeType(如那里所述)设置为在较低级别(从 body
标签向下几层)包装页面的表单元素,如下所示:
$(document).ready(function () {
var page = $('#aspnetForm');
$("#menu").mmenu(
{
offCanvas: {
position: "right",
zposition: "front"
}
}, {
offCanvas: {
pageNodeType: "form"
}
})
});
并且还尝试了 setting a specific element as the page,(如那里所述),像这样:
$("#menu").mmenu().trigger("setPage.mm", [page]);
但是没有任何反应。我知道它正在被阅读,因为我可以将菜单的位置更改为右侧。
当我只做pageNoteType的时候。所发生的只是带有 class mm-slideout 的元素在其中获得另一个具有相同 classes 的元素。但没有什么能改变滑动的内容。
我知道我的配置表明页面不应滑动,但菜单应滑过它,但据我所知,我仍然需要更改获取 mm-page 和 mm- 的内容幻灯片 classes。目前,当我打开菜单时,页面上的所有内容都会变白。
pageNodeType
应该是 pageNodetype
(注意小写 t)。其余的看起来不错,应该可以了。