Question

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

我尝试过：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

我遇到了同样的问题并找到了一个（弱）解决方法：

如果您单击并按住滑块（或长按触摸屏），然后只移动滑块，则面板不会关闭。

但我当然希望有一个合适的解决方案。滑块移动似乎触发了滑动＆＃34;滑动＆＃34;事件，这反过来导致面板关闭。

但是，data-swipe-close="false"应该解决这个问题。

Answer 2

您的问题并未说明您正在使用的jquery和jquerymobile版本。以下是jquery 1.8.2和jquerymobile 1.4.2

的正常工作示例

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

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

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>

向左滑动时不应关闭jQuery Mobile Panel

2 个答案: