如何使用Snap.js面板与jQuery移动？
有人知道如何在Snap.js手机上设置jQuery吗？我正在尝试从jQuery移动面板小部件中迁移，它存在主要的滚动问题。
o/vZBzD/3/
HTML：
<div data-role="page">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<a id="open-panel">Open panel</a>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
</header>
<div data-role="content" id="content" class="snap-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>联署材料：
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
if (document.getElementById('open-panel')) {
addEvent(document.getElementById('open-panel'), 'click', function () {
snapper.open('left');
});
}
});回答 2
Stack Overflow用户
发布于 2014-05-26 18:57:08
按照snap，您不需要将snap内容放在jQuery移动页面内容html中。
您可以清晰地将页面分成两部分，即snap部分&实际的jQuery移动html结构。
工作演示
http://codepen.io/nitishdhar/pen/pIJkr
我使用jQuery + jQuery Mobile1.4.2( JS )+ jQuery Mobile1.4.2( CSS )+ Snap + Snap作为代码页中的资源，您可以在特定的JS & CSS节设置按钮中检查它们。
代码结构-两边的不同菜单
<body>
<!-- Snap Js Code Comes Here -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li><a href="default.html">Default</a></li>
<li><a href="noDrag.html">No Drag</a></li>
<li><a href="dragElement.html">Drag Element</a></li>
<li><a href="rightDisabled.html">Right Disabled</a></li>
<li><a href="hyperextend.html">Hyperextension Disabled</a></li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right">
<ul>
<li><a href="default.html">Default</a></li>
<li><a href="noDrag.html">No Drag</a></li>
<li><a href="dragElement.html">Drag Element</a></li>
<li><a href="rightDisabled.html">Right Disabled</a></li>
</ul>
</div>
</div>
<!-- Snap Js Code Ends Here -->
<!-- Jquery Mobile Code Comes Here -->
<div data-role="page" id="content">
<div data-role="header" data-position="fixed">
<h4>© Test App</h4>
</div>
<div role="main" class="ui-content">
Some Page Content
</div>
<div data-role="footer" data-position="fixed">
<h4>© Test App</h4>
</div>
</div>
</body>现在根据您的设计要求应用一些CSS，但是您可能需要z索引-
#content {
background: #BFC7D8;
z-index: 1;
}现在启动导航器-
var snapper = new Snap({
element: document.getElementById('content')
});现在应该可以了。
备用示例，两面菜单相同，
另外，如果您想在两边显示相同的菜单，只需将菜单项从右半折叠的div中移除，只需将菜单项保存在左边的菜单项中-
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li><a href="default.html">Default</a></li>
<li><a href="noDrag.html">No Drag</a></li>
<li><a href="dragElement.html">Drag Element</a></li>
<li><a href="rightDisabled.html">Right Disabled</a></li>
<li><a href="hyperextend.html">Hyperextension Disabled</a></li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>现在把这个添加到CSS中-
/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
}
/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
display: none;
}工作演示- http://codepen.io/nitishdhar/pen/LliBa
Stack Overflow用户
发布于 2014-05-26 18:38:09
我不明白有什么问题吗？单击事件绑定时出现了JavaScript错误，我只是像绑定一样将其更改为jQuery。
工作示例：http://jsfiddle.net/Gajotres/as8P4/
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
$(document).on('click', '#open-panel',function () {
snapper.open('left');
});
});https://stackoverflow.com/questions/23875815
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号