J'essaie de créer une liste en utilisant les styles fournis par jquery mobile. Lorsque je crée la liste dans le fichier html, la liste incorpore les styles fournis par jquery mobile: http://jquerymobile.com/demos/1.0/docs/lists/lists-search.html

Cependant, dans mon site Web, j'ai besoin de générer la liste en fonction du nombre d'objets dans mon tableau, donc je veux le faire en créant le script html en utilisant javascript et en changeant le innerHTML d'un div. Lorsque je fais cela, une liste normale apparaît sans les styles de jquery mobile.

Quelqu'un a-t-il une solution à mon problème?

Voici mon code de balisage:

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;
}
0
theNoobProgrammer 8 déc. 2011 à 00:35

3 réponses

Meilleure réponse

Vous n'utilisez pas le même CSS que jQuery Mobile. Si vous regardez le code HTML sur le lien que vous avez fourni, vous verrez qu'ils ont des classes supplémentaires sur leurs éléments de liste:

<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>
0
lrusli 7 déc. 2011 à 20:45

Je ne prends pas le crédit de la solution au lieu d'essayer de l'expliquer en détail car il m'a fallu un certain temps pour le comprendre, mais les changements devraient être quelque chose comme ça.

Code d'origine:

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;
}

Code fixe:

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();
}

De cette façon, il affiche votre liste en utilisant la vue de liste de jquery mobile.

1
emoralesgt 21 févr. 2012 à 20:43

Vous voudrez vous assurer que JQuery Mobile initialise la liste après l'avoir créée avec javascript. Utilisez l'extrait de code suivant où cette liste est l'ID de l'élément de liste non ordonné.

$('#thislist').listview()

De plus, si la liste non ordonnée avec data-role = 'listview' existe déjà, alors vous voudrez utiliser le même initialiseur avec un paramètre, 'refresh'. Voici un autre extrait où cette liste est l'ID de la liste non ordonnée. Vous voudrez utiliser l'actualisation si vous en avez ajouté / supprimé des éléments de manière dynamique.

$('#thislist').listview('refresh');
2
David Manske 2 avril 2012 à 17:35