Динамические кнопки в нижнем колонтитуле jQuery Mobile? - PullRequest
Новая
       0

Динамические кнопки в нижнем колонтитуле jQuery Mobile?

3 голосов
/ 17 января 2012

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

  • Многостолбцовые сетки кнопок неправильно отформатированы в нижнем колонтитуле

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

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

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

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

Ответы [ 2 ]

1 голос
/ 17 января 2012

Хотелось бы что-то вроде этой работы:

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>
1 голос
/ 17 января 2012

Кнопки с несколькими столбцами неправильно отформатированы в нижнем колонтитуле - вот мой ответв контрольной группе есть следующий 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

Надеюсь, что это помогает.

...