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

Posted 2023-05-09

【中文标题】jQuery Mobile 面板不应该在向左滑动时关闭

【英文标题】：jQuery Mobile Panel Should Not Close On Swipe Left

【发布时间】：2013-05-11 08:09:25

【问题描述】：

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

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

有什么想法吗？

【问题讨论】：

您还应该在面板中添加范围滑块。不要指望其他人会这样做。

范围滑块在页面加载时动态添加到面板中。我确实说过这一切都很完美。

@MarcStevenPlotz - 也许他们实际上想看一些代码，却没有意识到 jQuery mobile 如何从标记中工作。

你在修改面板宽度吗？您确定动态附加的项目会相应地刷新和设置样式吗？

这应该回答你的问题。 . . ***.com/questions/15723362/…

【参考方案1】：

您的问题没有说明您使用的是哪个版本的 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>

【参考方案2】：

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

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

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

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