为啥按钮在 JQM 弹出窗口的页脚之外

Posted 2023-03-21

【中文标题】为啥按钮在 JQM 弹出窗口的页脚之外

【英文标题】：Why buttons are outside of JQM popup's footer为什么按钮在 JQM 弹出窗口的页脚之外

【发布时间】：2014-10-13 04:52:30

【问题描述】：

使用Jquery-mobile，以下（此处略）页脚

<div data-role="footer">
    <a href="#table" data-role="button" data-icon="plus"
    data-iconpos="left" class="ui-btn-left">Open</a>
    <a href="#" data-rel="back" data-role="button" data-icon="delete"
    data-iconpos="notext" class="ui-btn-right">Close</a>
</div>

存在于弹出窗口中，当弹出时，其按钮 显示在弹出框之外，并在其下方对齐。

为什么？我做错了什么？

完整的例子在http://jsfiddle.net/yotam/d0aqmx6m/

【参考方案1】：

我开始怀疑弹出窗口是否不支持按钮页脚。或者至少，不完全支持。从文档中，您还需要在其中添加一个“ui-title”——它会给出页脚高度（文档在按钮定义之后显示一个跨度）。

我在这里做了：

<div data-role="footer">
  <a href="#table" class="ui-btn ui-btn-left ui-icon-delete ui-btn-icon-left ui-icon-plus">Open</a>
  <a href="#" data-rel="back" class="ui-btn ui-btn-right ui-icon-delete ui-btn-icon-left ui-btn-icon-notext ui-icon-delete">Close</a>
   <span class="ui-title"></span>
</div>

见：http://jsfiddle.net/had4or71/

当然，它只是部分地解决了您的问题，就好像它们现在在页脚中一样，它们看起来还不是很好。我尝试在页脚中使用导航栏，结果同样令人失望（导航栏位于顶部、底部和左侧，但非常糟糕地超出了右侧边界。

最后，我也很快完成了这个版本：

http://jsfiddle.net/ph0e54ee/2/

这显示了像演示网站一样将关闭按钮推到标题中，并且只是将您的打开按钮内嵌显示为标准按钮 - 唉，这是一种妥协，而不是您要求的。

经过进一步调查，页脚中似乎不支持“ui-btn-left”和“ui-btn-right”类，请参阅：

gh:6331 gh:6872 gh:6137 (comment)

再一次，我对 CSS 进行了一些处理，并设法得到了一些不错的东西，至少在我的 chrome 测试浏览器上是这样。我怀疑你的里程在 chrome 之外会有很大差异。：http://jsfiddle.net/9crnjakr/