составление списка в jquery mobile с использованием innerhtml - PullRequest
Новая
       1

составление списка в jquery mobile с использованием innerhtml

0 голосов
/ 08 декабря 2011

Я пытаюсь создать список, используя стили, предоставляемые jquery mobile. Когда я создаю список в html-файле, он включает в себя стили, которые предоставляет jquery mobile: http://jquerymobile.com/demos/1.0/docs/lists/lists-search.html

Однако на моем веб-сайте мне нужно сгенерировать список на основе количества объектов в моем массиве, поэтому я хочу сделать это, создав html-скрипт с использованием javascript и изменив innerHTML div. Когда я это делаю, появляется обычный список без стилей jquery mobile.

У кого-нибудь есть решение моей проблемы?

Вот мой код разметки: 

function GenerateList(appArray) {
    var searchList = document.getElementById('searchList');
    var app;
    var htmlString = "<ul data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";

    for(i=0; i<appArray.length;i++) {
        app = appArray[i];
        htmlString = htmlString + "<li><a id=App" + (i+1).toString() + " onclick='AppSelected(id);'>";
        htmlString = htmlString + "<img src='DummyImages/" + app[1] + "' alt='Logo' class='ListAppLogo'>";
        htmlString = htmlString + "<h3>"+ app[2] + "</h3>";
        htmlString = htmlString + "<p>" + app[4] + ".0/5.0</p>";
        htmlString = htmlString + "<input type='hidden'>" + app[0] + "</a></li>";
    }

    htmlString = htmlString + "</ul>";
    searchList.innerHTML = htmlString;
}

Ответы [ 3 ]

2 голосов
/ 02 апреля 2012

Вы хотите убедиться, что JQuery Mobile инициализирует список после того, как вы создали его с помощью javascript. Используйте следующий фрагмент кода, где этот список является идентификатором неупорядоченного элемента списка. 

$('#thislist').listview()

Кроме того, если неупорядоченный список с data-role = 'listview' уже существует, вам нужно использовать тот же инициализатор с параметром 'refresh'. Вот еще один фрагмент, где этот список является идентификатором неупорядоченного списка. Вы захотите использовать обновление, если вы добавили / удалили из него элементы динамически. 

$('#thislist').listview('refresh');
1 голос
/ 22 февраля 2012

Я не принимаю кредит на решение, вместо этого пытаюсь объяснить его подробно, поскольку мне потребовалось некоторое время, чтобы выяснить это, но изменения должны быть примерно такими:

Оригинальный код:

function GenerateList(appArray) {
var searchList = document.getElementById('searchList');
var app;
var htmlString = "<ul data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";

...

searchList.innerHTML = htmlString;
}

Фиксированный код: 

function GenerateList(appArray) {
var searchList = document.getElementById('searchList');
var app;
var htmlString = "<ul id='thislist' data-role='listview' data-filter='true' data-filter- placeholder='Search...' data-filter-theme='a' data-theme='a'>";

...

searchList.innerHTML = htmlString;
$('#thislist').listview();
}

Таким образом, он показывает ваш список, используя просмотр списка из jquery mobile.

0 голосов
/ 08 декабря 2011

Вы не используете тот же CSS, что и jQuery Mobile.Если вы посмотрите HTML-код по указанной вами ссылке, вы увидите, что в их элементах списка есть дополнительные классы: 

<ul data-role="listview" data-filter="true" class="ui-listview">
  <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c">
    <div class="ui-btn-inner ui-li" aria-hidden="true">
      <div class="ui-btn-text"><a href="index.html" class="ui-link-inherit">Acura</a></div>
      <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
    </div>
  </li>
</ul>
...