Loading:

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.yp_first 2.current() 3.getenv() 4.atan2() 5.chmod() 6.ob_clean() 7.next() 8.fread() 9.localtime 10.bzerrstr()

56853.05

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.

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>