jQuery Mobile 面板不应在向左滑动时关闭

Question

我有一个简单的 jQuery 移动页面，它有一个侧边栏面板，一旦单击 head 元素中的按钮，它就会在左侧打开。这工作正常。问题是我在边栏面板中有一个包含范围 slider 的表单，当您将范围 slider 向左移动时，面板会关闭。关于如何防止这种情况的任何想法。

我试过:data-swipe-close="false"(找到 here)

为了安全起见:data-dismissible="false" 来自上面的相同链接。

我的 HTML 在下面。侧边栏面板的内容在页面加载时生成并正确显示，并且表单正确提交:

        <div data-role="page" data-type="page" id="select">         
        <div data-role="panel" data-theme="g" id="sidebar" data-display="overlay" data-position-fixed="true" data-swipe-close="false" data-dismissible="false">
            <div id='sidebarview' data-theme='g' data-role="collapsible-set" data-inset="false" data-mini="false"></div>
        </div>
        <div id="header" data-theme="h" data-role="header" data-position="fixed">
            <h3>MOBILE</h3>
            <a id='sidebarbutton' data-role="button" data-theme="h" href="#sidebar" class="ui-btn-left"  data-icon="bars" data-iconpos="notext"></a>
            <a id='gpsButton' data-role="button" data-theme="h" href="javascript:void(0);" class="ui-btn-right">GPS</a>
        </div>
        <div id="content-dataview" data-role="content">
        </div>
        <div data-role="footer" data-id="footer" data-position="fixed" data-theme="h">
            <div data-role="navbar" data-theme="h">
                <ul>
                    <li><a onclick='user.logout();' href='javascript:void(0)'>Logout</a></li>
                </ul>
            </div>
        </div>
    </div>

有什么想法吗？

Answer 1

您的问题没有说明您使用的是哪个版本的 jquery 和 jquerymobile。这是一个在 jquery 1.8.2 和 jquerymobile 1.4.2 上正常工作的例子

我删除了具有透明背景的 g 主题，这使得叠加层看起来很奇怪。

我还在 jsfiddle 示例的面板中添加了一个范围输入 slider 和一个关闭按钮:

http://jsfiddle.net/hQguV/

<div data-role="page" data-type="page" id="select">         
        <div data-role="panel" id="sidebar" data-display="overlay" data-position-fixed="true" data-swipe-close="false" data-dismissible="false">
            <div id='sidebarview' data-theme='g' data-role="collapsible-set" data-inset="false" data-mini="false">This is content in #sidebarview</div>
            <input type="range" min="0" max="42" value="42" id="testslider"/>
            <a href="#" data-rel="close" class="ui-btn">Close panel</a>
        </div>
        <div id="header" data-theme="h" data-role="header" data-position="fixed">
            <h3>MOBILE</h3>
            <a id='sidebarbutton' data-role="button" data-theme="h" href="#sidebar" class="ui-btn-left"  data-icon="bars" data-iconpos="notext"></a>
            <a id='gpsButton' data-role="button" data-theme="h" href="javascript:void(0);" class="ui-btn-right">GPS</a>
        </div>
        <div id="content-dataview" data-role="content">
        </div>
        <div data-role="footer" data-id="footer" data-position="fixed" data-theme="h">
            <div data-role="navbar" data-theme="h">
                <ul>
                    <li><a onclick='user.logout();' href='javascript:void(0)'>Logout</a></li>
                </ul>
            </div>
        </div>
    </div>