4

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

我试过了：（data-swipe-close="false"在 这里找到）

并且为了安全起见：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>

有任何想法吗？

4

2 回答 2

0

您的问题没有说明您使用的是哪个版本的 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>
于 2014-06-18T18:08:09.287 回答
0

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

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

但我当然宁愿有一个适当的解决方案。滑块移动似乎触发了“滑动”事件，这反过来又导致面板关闭。

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

于 2014-04-11T08:38:32.867 回答