Loading:

Książka Zend Framework 3. Poradnik Programisty.

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>


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=12941

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: divix
Ranga: Administrator serwisu Punktów: 37169
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-17 v.1.5 | design: diviXdesign & rainbowcolors