Question

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

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

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

Answer 2

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

你可以干净地将页面分成两部分，快照导航部分＆amp;实际的jQuery移动html结构。

工作演示

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

我已经使用jQuery + jQuery Mobile 1.4.2（JS）+ jQuery Mobile 1.4.2（CSS）+ Snap JS + Snap CSS作为codepen中的资源，你可以在特定的JS＆amp; 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;
}

现在启动快照导航 -

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

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

两侧带有相同菜单的备用示例

此外，如果您想在两侧显示相同的菜单，只需从snap-drawer-right div＆amp; amp;中删除菜单项。只保留左边的菜单项 -

<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

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

2 个答案: