Question

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

多页按钮网格未在页脚中正确格式化
data-corners =“false”属性（获取刷新按钮）不适用于页脚中的第一个和最后一个按钮
对于页脚按钮，data-role =“controlgroup”data-type =“horizontal”，如果有太多按钮适合一行，则样式看起来很奇怪（因为某些按钮会有圆角，其他人不会）
如果页脚按钮省略了data-role =“controlgroup”data-type =“horizontal”，则可能会在屏幕上部分显示按钮...

一般来说 - 唉!!!!任何人都有成功动态地将按钮注入页脚？如果是这样，我们将非常感激听到这是如何实现的。谢谢！

Answer 1

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

检查是否使用带有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

希望有所帮助。

Answer 2

这样的事情会起作用吗？

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

JS

$('#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>

jQuery Mobile页脚中的动态按钮？

2 个答案: