jQuery Mobile 页脚中的动态按钮？答案

【问题标题】：Dynamic buttons in jQuery Mobile footer?jQuery Mobile 页脚中的动态按钮？
【发布时间】：2012-02-12 10:04:21
【问题描述】：

将按钮动态注入 JQM 页脚似乎是一种令人沮丧的练习。任何人都知道如何为此应用正确的格式？以下是我在尝试这样做时发现的几个异常情况：

页脚中的多列按钮网格格式不正确
data-corners="false" 属性（用于获取刷新按钮）不适用于页脚中的第一个和最后一个按钮
使用 data-role="controlgroup" data-type="horizontal" 作为页脚按钮，如果有太多按钮无法容纳在一行中，则样式看起来很奇怪（因为有些按钮会有圆角，其他人不会）
如果页脚按钮的 data-role="controlgroup" data-type="horizontal" 被省略，按钮可能会部分呈现在屏幕之外...

一般来说 - 啊！！！！任何人都成功地将按钮动态注入页脚？如果是这样，将不胜感激听到这是如何实现的。谢谢！

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

这样的工作是否可行：

http://jsfiddle.net/eznh8/7/

$('#addButtonName').click(function() {
    var theFooter = $('#addMoreButtons');
    var buttonName= $('#newButtonName');

    if(buttonName.val() != '') {
        theFooter.append('<a href="#" data-role="button" data-icon="delete">'+buttonName.val()+'</a>');
        buttonName.val('');
        $('#theHomePage').trigger('create');  
    }
});

HTML

<div data-role="page" id="theHomePage">
    <label for="basic">Button Name:</label>
    <input type="text" name="newButtonName" id="newButtonName" value="" />
    <a href="#" data-role="button" id="addButtonName">Add New button</a>
    <div data-role="footer" class="ui-bar" id="addMoreButtons">
    </div>
</div>

【讨论】：

谢谢。我想我只是在页脚中遇到了一些带有按钮的特质——并将其归因于我的动态变化。我现在看到的是页脚按钮有时会在屏幕右侧溢出一点 - 如果您逐渐调整结果 JQM 面板的大小，您可以轻松看到它。正文中的常规内联按钮不会发生这种情况（刚刚尝试过）。此外，我的 html 中有一个预定义的按钮，并且添加得更加动态。事实证明，JQM 在第一个预定义页脚按钮之后放置了更多空间，但如果该按钮是动态插入的，则不会......嗯
jsfiddle.net/mokesmokes/8VS7F 逐渐调整 JQM 面板宽度并在页脚右侧看到丑陋（最右侧按钮中的最后一个字符被切掉）。动态添加按钮时会发生这种情况。
也许添加一些填充？观点？我会玩弄它，另一个例子：jsfiddle.net/eznh8/8
在我之前评论中给出的示例中，class="ui-bar" 是罪魁祸首。如果从页脚中删除此类，则右侧不会溢出。至于您的最新示例 - 只需检查您是否在第一个按钮之后看到额外的填充 - 对吗？

【解决方案2】：

页脚中的多列按钮网格格式不正确 - 这是我对此的回应。

检查您是否使用带有 href 链接的控制组 - 确保控制组中的每个链接都具有以下 CSS；

vertical-align:top;

如果您将元素样式设置为按钮，您还必须更好地控制元素的外观。我在这里发表了类似的讨论：

https://forum.jquery.com/topic/jquery-mobile-horizontal-control-groups-creating-a-custom-split-list

https://forum.jquery.com/topic/css-code-to-help-control-entire-button-in-a-jquery-mobile-theme

希望对您有所帮助。

【讨论】：