【发布时间】:2013-06-04 06:34:48
【问题描述】:
我正在制作一个移动网络应用程序并且正在使用 jQuery Mobile。我在底部有一个导航栏,当您单击左按钮时,弹出窗口正确显示,但当我使用 data-iconpos="notext" 时,关闭按钮的样式不正确。这是我的代码:
<div data-theme="j" data-role="footer" data-position="fixed">
<div id="navbar" data-role="navbar" data-iconpos="bottom">
<ul>
<li id="navbar-menu-button">
<a href="#navbar-popup-menu" data-transition="slideup" data-position-to="window" data-rel="popup" data-theme="j" data-icon="bars" data-overlay-theme="j" data-dismissible="false"></a>
<div id="navbar-popup-menu" data-role="popup" class="ui-content">
<a id="navbar-menu-close-button" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" title="Close" data-dismissible="false" class="ui-btn-right"></a>
test info
</div>
</li>
<li id="navbar-info-button">
<a href="#navbar-popup-info" data-transition="slide" data-position-to="window" data-rel="popup" data-theme="j" data-icon="info"></a>
</li>
</ul>
</div>
</div>
正如您在div#navbar-popup-menu 中看到的,我有一个<a> 标记,具有以下属性:
data-role="button"、data-rel="back"、data-icon="delete"、data-iconpos="notext"、data-dismissible="false"、class="ui-btn-right"
除data-iconpos="notext" 和data-dismissible="false" 外,一切正常。按钮图标周围仍然有一个不应该存在的框,您仍然可以在弹出窗口之外单击以将其关闭。你可以在这里观看现场演示:DEMO
任何帮助将不胜感激。我一直在努力解决这个问题,因为我还有其他正在工作的按钮,它们之间没有什么不同可能导致发生的事情。
另外:关闭按钮不起作用
【问题讨论】:
-
data-dismissible="false"应该只添加到弹出 div 中。不是关闭按钮。删除它,然后重试。 -
也在你的网站上
data-rel="close",它应该是back,就像你上面的代码一样。您是否覆盖 jQM CSS(不是主题)? -
按照您的建议进行操作,并且按钮可以正常工作,这对我来说肯定是多余的,但按钮周围仍然有框,这不是所需的行为
-
如果您从按钮中删除
data-theme,会发生同样的情况吗?
标签: jquery jquery-mobile popup styling