如何在 jQuery Mobile 中使用 Snap.js 面板？答案

【问题标题】：How to use Snap.js panels with jQuery Mobile?如何在 jQuery Mobile 中使用 Snap.js 面板？
【发布时间】：2014-05-26 18:22:20
【问题描述】：

有人知道如何在 jQuery Mobile 中设置 Snap.js 吗？我正在尝试从存在重大滚动问题的 jQuery Mobile 面板小部件迁移。

http://jsfiddle.net/frank_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>

JS：

$(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');
        });
    }
});

【问题讨论】：

除了下面我在 codepen 中实现的答案之外，我还分叉了您的小提琴并对其进行了更新，以使其适用于所需的更改 - jsfiddle.net/nitishdhar/vZBzD/7。注意jsfiddle可能无法触发pagecontainershow事件，所以我把它去掉了。
stackoverflow.com/questions/22672236/… 是 jQM 面板滚动的 CSS 修复

标签： javascript jquery jquery-mobile snap.js

【解决方案1】：

我不明白有什么问题？您在单击事件绑定时遇到了 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');
    });
});

【讨论】：

【解决方案2】：

根据 snap js，您不需要将 snap js html 内容放在 jQuery 移动页面内容 html 中。

您可以将页面清晰地分为两部分，即 snap nav 部分和实际的 jQuery 移动 html 结构。

工作演示

http://codepen.io/nitishdhar/pen/pIJkr

我在 codepen 中使用了 jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS 作为资源，您可以在特定的 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>&copy; Test App</h4>
        </div>
        <div role="main" class="ui-content">
            Some Page Content
        </div>
        <div data-role="footer" data-position="fixed">
            <h4>&copy; Test App</h4>
        </div>
    </div>
</body>

现在根据您的设计要求应用一些 CSS，但您可能需要 z-index -

#content {
    background: #BFC7D8;
    z-index: 1;
}

现在启动 snap nav -

var snapper = new Snap({
    element: document.getElementById('content')
});

现在应该可以正常工作了。

两侧菜单相同的替代示例

此外，如果您想在两侧显示相同的菜单，只需从 snap-drawer-right 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

【讨论】：

非常感谢！！希望我可以将你们所有的答案都标记为正确，但@Gajotres 是第一个这样:(
谢谢。很高兴我能帮上忙。我看到了那个 javascript 错误，但后来我看到你的实现是错误的。所以思想会继续前进并以正确的方式创造一个。正如您在@Gajotres fiddle 中看到的那样，与您看到整个页面按预期左右滑动的输出相比，您的导航在显示时不可见，并且您的标题按钮停留在打开的面板顶部。
太棒了 :) 顺便说一句，你的正确。再次感谢。
@MarkBoulder - 我在答案的示例中添加了相同的菜单。
@MarkBoulder - 当然可以。谢谢:)另外，为一个非常相似的问题创建一个新帖子是不正确的，所以你首先在你的评论中提出同样的问题是正确的。保重