Я хочу создать динамическую страницу, где я щелкаю опцию Listview.
Моя HTML-разметка для домашней страницы списка и опции страницы выглядит так:
<body onload="inici(); ">
<div id="home" data-role="page">
<div data-role="header" data-theme="c"><h1>Receptes de cuina</h1></div>
<div data-role="content">
<ul data-role="listview" data-filter="true" id="articleList"></ul>
</div>
</div>
<div data-role="page" id="chapter">
<div data-role="header" data-position="fixed" data-theme="b">
<a href="#home" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
<h1>Header page </h1>
<a href="" data-role="button" class="next" data-icon="forward" data-iconpos="notext">Next</a>
</div>
<div data-role="chapter_content"></div>
<div data-role="footer" data-theme="d">
<span class="ui-title" />
<label for="chapter_num">Jump to chapter</label>
<select name="chapter_num" id="chapter_num" data-mini="true"></select>
</div>
</div>
</body>
Сначала я заполняю список изXML-файл с помощью jQuery.Код работает правильно и выглядит следующим образом:
$.ajax({
type: "GET",
url: "https://script.google.com/macros/s/XXXXXXXXX";
dataType: "xml",
success: function(xml) {
var resultat = xml;
$(xml).find('recepta').each(function(){
var categoria = $(this).find('categoria').text() ;
var name_text = $(this).find('titol').text() ;
var foto = $(this).find("informacio_general").children("foto_recepta").text();
var id = $(this).attr('id');
$('#articleList').append('<li><a href="#chapter?id=' + id +'"><img src="' + foto + '" class="foto_thumb" />' + name_text + '</a></li>');
}); //close each(
$('#articleList').listview('refresh');
}
}); //close $.ajax(
} // fi inici
Список списков полностью загружается из файла XML, но я не могу создать динамическую страницу "главу", когда нажимаю на параметр списка ... Я нахожулюбой код и попробуйте адаптировать его, но не запускать ....
$(document).on('pagebeforeshow', '#home', function(e,data) {
if ( typeof data.toPage === "string" ) {
var url = $.mobile.path.parseUrl( data.toPage ), regex = /^#chapter/;
if ( url.hash.search(regex) !== -1 ) {
var id = data.toPage.substr(data.toPage.lastIndexOf("id") + 1).substr(4);
showChapter(id);
e.preventDefault()
}
}
});
function showChapter(id) {
var htmlGeneratedOnTheFly =" The id is " + id ;
$('#chapter_content').empty();
$('#chapter_content').append(htmlGeneratedOnTheFly);
$('#chapter_content').trigger('create');
$.mobile.changePage('#chapter', {transition:"flip"});
};
Кто-нибудь может мне помочь, как заполнить слои DIV на странице главы, когда я нажимаю на опцию просмотра списка?
Спасибо