Динамические кнопки в jQuery Мобильный нижний колонтитул?

Question

Динамические кнопки ввода в нижние колонтитулы JQM, похоже, являются упражнением в расстройстве. Кто-нибудь знает, как применить для этого правильное форматирование? Вот несколько аномалий, которые я нашел пытаюсь сделать это:

• Multi-колонка кнопки сетка не отформатирована в сноске

• данных уголков = «ложно» атрибута (чтобы получить флеш кнопки) не не применяются к первой и последней кнопкам в нижнем колонтитуле

• С data-role = "controlgroup" data-type = "horizontal" для кнопок нижнего колонтитула, если слишком много кнопок, чтобы вписаться в одну строку, выглядит стиль странно (поскольку некоторые кнопки будут иметь закругленные углы, другие не будут)

• Если данные-роль = «controlgroup» тип-данных = «горизонтальные» опущены для кнопок нижнего колонтитула, кнопки могут быть оказаны частично вне экрана ...

В общем - Argh !!! ! Кто-нибудь имеет успех, динамически вставляя кнопки в нижний колонтитул? Если да, то очень хотелось бы услышать, как это было достигнуто. Спасибо!

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

Would что-то вроде этой работы:

• 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>