Loading:


Dodawanie elementów do listy rozwijanej - list view - aplikacja mobilna

Podany poniżej przykład pokazuje jak stworzyć i dodać elementy do naszej listy rozwijanej.

 

Listing 1.0 przedstawia kod JavaScript, w którym tworzymy przykładowe dane w JSON oraz jak dołączyć elementy HTML do naszej list i odświeżyć listę.

 

Listing 2.0 to czysty HTML dla naszej początkowej pustej listy.

 

UWAGA!

Przykład korzysta z biblioteki jQuery mobile.



Napisz Artyku³

Listing

//listing 1.0
var out = '',
    data = [
    {"id":"12","city":"Warszawa","region":"mazowieckie"},
    {"id":"33","city":"Wroclaw","region":"dolnoslaskie"},
    {"id":"14","city":"Krakow","region":"none"}
];

//konwertowanie do tablicy
var results = $.parseJSON(data);

for(var i=0; i < results.length; i++) {
    out += '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-thumb ui-focus ui-btn-up-c"> ' +
             '<div class="ui-btn-inner ui-li">' +
                '<div class="ui-btn-text">' +
                   '<a href="#" class="ui-link-inherit showDetails" id="'+results[i].id+'">' +
                      '<img src="'+ results[i].id+'" class="ui-li-thumb">' +
                      '<h3 class="ui-li-heading">'+ results[i].region+'</h3>' +
                      '<p class="ui-li-desc">'+ results[i].city +'</p>' +
                   '</a>' +
                '</div>' +
            '</div>' +
        '</li>';
}

//dodanie elementów do listy
$('.listView .hpListView').html(out).listview('refresh');



//listing 2.0
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" class="ui-listview hpListView"> </ul>




Dodano przez: divix
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors