window.app = {
init: function () {
// Elenco prodotti
this.openCatalog();
},
openCatalog: function (id) {
// Elenco prodotti
var html = '';
for (var i = 0; i < DEMO_PRODUCTS.length; i++) {
var product = DEMO_PRODUCTS[i];
html += '<li><a href="javascript:app.openProduct(' + i + ')">' + '<img src="' + product.image + '" />' + '<h3>' + product.name + '</h3>' + '<p>' + product.descr + '</p>' + '</a></li>';
}
$('#browse-products-list').html(html).listview('refresh');
},
openProduct: function (id) {
var product = DEMO_PRODUCTS[id];
var nextpage = '#product-sheet';
$.mobile.loading('show');
// Simula caricamento lento
setTimeout(function () {
// Nome prodotto
$('.product-name').text(product.name);
// Immagine prodotto
$('#product-sheet-image', nextpage).attr('src', product.image);
// Descrizione prodotto
$('#product-sheet-descr', nextpage).html(product.descr);
// Switch
$.mobile.changePage(nextpage);
$.mobile.loading('hide');
}, 2000);
},
};
app.init();
<!-- Scelta prodotto -->
<div data-role="page" id="browse-products">
<div data-role="header" data-position="fixed" data-tap-toggle="false"
data-id="app-header">
<h1 class="catalog-name">Elenco prodotti</h1>
</div>
<div data-role="content">
<!-- Elenco prodotti -->
<ul data-role="listview" id="browse-products-list"></ul>
</div>
</div>
<!-- Scheda prodotto -->
<div data-role="page" id="product-sheet">
<div data-role="header" data-position="fixed" data-tap-toggle="false"
data-id="app-header"> <a data-role="button" data-rel="back" data-icon="back" data-iconpos="notext"></a>
<h1
class="product-name"></h1>
</div>
<div data-role="content">
<!-- Immagine prodotto -->
<img id="product-sheet-image" />
<div id="product-sheet-descr"></div>
</div>
</div>
External resources loaded into this fiddle: