Как сохранить стиль jQuery Mobile для кнопок и т. Д., Введенных в HTML, с помощью JavaScript? - PullRequest
1 голос
/ 18 марта 2012

Я использую мобильную библиотеку jQuery, пытаясь создать редактируемый пользователем список флажков.Ниже представлен фрагмент HTML-кода, и 'fieldset id = "nameList" ...' - это место, где я пытаюсь динамически вставлять флажки, используя функцию JavaScript addName ();

<div data-role="content">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup">
                    <input type="submit" onclick="addName()" data-inline="true" data-theme="b" data-icon="plus" data-iconpos="left" value="Add New Name" />
                    <input id="textInput" placeholder="Enter a new name" value="" type="text" />
                </fieldset>
            </div>

            <div data-role="fieldcontain">
                <fieldset id="nameList" data-role="controlgroup" data-type="vertical">
                    <legend>
                        Members
                    </legend>
                    <input name="checkbox1" id="checkbox1" type="checkbox" />
                    <label for="checkbox1">
                        Checkbox1
                    </label>
                </fieldset>
            </div>
            <input type="submit" data-inline="true" data-theme="e" data-icon="delete" data-iconpos="left" value="Delete checked names" />
        </div>

IЯ пытался поместить эту функцию как внутри самого документа HTML, так и в отдельный файл .js, но в любом случае он дает тот же результат, как показано на рисунке под кодом js.

function addName(){
            $('#nameList').append('<input name="checkbox1" id="checkbox1" type="checkbox" />'+
                                '<label for="checkbox1">'+$('#textInput').val()+'</label><br>');
        }

Результатпосле добавления ned-флажка в уже существующий список действующих флажков это просто не стилизованный флажок вместо того, чтобы выглядеть как флажок, который я кодировал непосредственно в HTML, как показано на следующем рисунке: http://bildr.no/view/1134640

Кажется,Я имею в виду, что по какой-то причине jquery.mobile-1.0.1.css просто не стилизует код jQuery Mobile, который добавляется с использованием javascript.Раньше у меня была эта проблема с другими вещами, которые отмечены флажками, а также с различными типами кнопок jQuery Mobile, которые не будут отображаться так, как при добавлении в javascript.Есть ли способ добавить HTML-код из javascript и при этом воспользоваться всеми преимуществами jQuery Mobile css?

Ответы [ 4 ]

1 голос
/ 18 марта 2012

Вам нужно вызвать событие create для элемента или одного из его предков, чтобы jQuery Mobile добавил соответствующую разметку и классы для его стилизации.

function addName(){
    var lastID = $('[name^="checkbox"]').attr('name')
                                        .replace(/^checkbox/,''),
        nextID = parseInt(lastID,10) + 1;
    $('#nameList').append('<input name="checkbox"'
                          + nextID + ' id="checkbox"'
                          + nextID + ' type="checkbox" />'
                          + '<label for="checkbox'
                          + nextID + '">'+$('#textInput').val()
                          + '</label><br>')
                  .trigger('create');
}

См. Раздел Улучшение новой разметки в http://jquerymobile.com/test/docs/pages/page-scripting.html

FWIW - вам нужно изменить идентификатор флажка, так как идентификаторы должны быть уникальными.

1 голос
/ 18 марта 2012

После добавления динамического флажка, наберите

$("input[type=checkbox]").checkboxradio();

РЕДАКТИРОВАТЬ: Удалено «обновить» в качестве параметра для checkboxradio. Может быть, это поможет кому-то еще в будущем.

0 голосов
/ 17 апреля 2012

, если вы добавляете флажок, подобный этому

enter code here
   @foreach (var selectListItem in Mobile.GetLookupAsSelectList(Shared.TableConstants.FiledName))
            {

             <input type="checkbox" name="checkbox-@selectListItem.Value" class="fillter" id="@selectListItem.Value" value="@selectListItem.Value"/>
                  <label for="@selectListItem.Value">
                   @selectListItem.Text</label>
            }

Убедитесь, что ваш ввод

0 голосов
/ 18 марта 2012

jQuery Mobile применяет стили с помощью JavaScript, поэтому для добавления стилей необходимо динамически анализировать содержимое.jQuery Mobile предоставляет функцию .page() для применения стилей к вновь создаваемому контенту

Так что после добавления этого вы можете использовать:

$('input').page();

или использовать класс как newclass с этимидобавлены элементы, поэтому jQuery не должен анализировать все входные данные каждый раз, когда вы добавляете один

Дополнительная информация: http://jquerymobiledictionary.pl/faq.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...