VPF::jQuery mobile, динамически наполнить ul

LLIbIcpEP

Дата 26.6.2011, 21:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 20.10.2010

Репутация: нет
Всего: нет

Здравствуйте.
Допустим, есть код:

Код


<ul data-role="listview" data-inset="true" data-theme="a">
    <li><a href="#questions_page">Begin test</a></li>
    <li><a href="#places_page">List places</a></li>
</ul>

В браузере это превращается в:

Код


<ul data-role="listview" data-inset="true" data-theme="a" class=" ui-listview  ui-listview-inset ui-corner-all ui-shadow ">
    <li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-corner-top ui-btn-up-a">
        <div class="ui-btn-inner ui-li ui-corner-top"><div class="ui-btn-text">
            <a href="#questions_page" class="ui-link-inherit">Begin test</a>
        </div><span class="ui-icon ui-icon-arrow-r"></span></div></li>
    <li data-theme="a" class="ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-a">
        <div class="ui-btn-inner ui-li ui-corner-bottom"><div class="ui-btn-text">
            <a href="#places_page" class="ui-link-inherit">List places</a>
        </div><span class="ui-icon ui-icon-arrow-r"></span></div></li>
</ul>

Ссылки выглядят красивыми кнопочками. Теперь мне надо наполнять другой <ul/> динамически. Делаю так:

Код


<ul id="list_answers" data-role="listview" data-inset="true"
                    data-theme="c">
</ul>

Код


question['answers'].forEach(function(answer) {
    $('#list_answers').append('<li><a href="#questions_page">' + answer['value'] + '</a></li>');
});

Как итог:

Код


<ul id="list_answers" data-role="listview" data-inset="true" data-theme="c" class=" ui-listview  ui-listview-inset ui-corner-all ui-shadow ">
    <li><a href="#questions_page">1</a></li>
    <li><a href="#questions_page">2</a></li>
    <li><a href="#questions_page">3</a></li>
    <li><a href="#questions_page">4</a></li>
</ul>

Как-бы разница на лицо. Как с этим бороться, без ручного копипаста всех свойств?

Это сообщение отредактировал(а) LLIbIcpEP - 26.6.2011, 21:38

LLIbIcpEP

Дата 26.6.2011, 22:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 20.10.2010

Репутация: нет
Всего: нет

Может есть другой способ решения моей задачи. Мне нужно получить такой-же список кнопочек, который получается в первом примере, только на этот раз ни содержание, ни даже количество этих кнопочек заранее не известно, это определяется по пришедшему JSON'у уже в ходе выполнения js.
Всего второй день за jQuery... с бизнес-логикой разобрался, джсон получил, распарсил, все круто.. а как до GUI дело дошло, облом.. не везет мне с интерфейсами, я видать рожден для серверного программирования(

нуп

Дата 26.6.2011, 23:24 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33

Цитата(LLIbIcpEP @ 26.6.2011, 21:35

)

question['answers'].forEach(function(answer) {

Это вообще вроде только для мозилы O_O Вы же строите дерево, посмотрите, какая функция это делает smile

LLIbIcpEP

Дата 26.6.2011, 23:43 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 28
Регистрация: 20.10.2010

Репутация: нет
Всего: нет

После постройки списка проблема решается вызовом

Код


$('#list_answers').listview("refresh");

Проблема решена smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »