我正在开发一个使用jQuery Mobile的项目。我使用过旋转木马:http://owlgraphic.com/owlcarousel/index.html
$.mobile.changePage("#home",{ transition: "slide"} );
用于导航到主页,
$(document).on("pageshow", "#home", function() {
var url = 'http://www.example.com/new-products';
$.ajax({
type: "get",
url: url,
//data: "login=" + login + "&password=" + pass,
dataType: "json",
success: function(data) {
var products = data;
var content = "";
$("#owl-example").html(content)
$.each(products, function(index, product) {
// Custom Navigation Events
$(".next").click(function() {
owl.trigger('owl.next');
})
$(".prev").click(function() {
owl.trigger('owl.prev');
})
$(".play").click(function() {
owl.trigger('owl.play', 1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function() {
owl.trigger('owl.stop');
})
content += "<div class='products'><div class='img-container'><img width='100' height='100' src=http://www.example.com" + product.image + "></div>" + product.name + "<br><span>" + product.points + "</span></div>";
});
$("#owl-example").html(content);
$.mobile.loading('hide');
callCaserole();
// Custom Navigation Events
$(".next").click(function() {
owl.trigger('owl.next');
})
$(".prev").click(function() {
owl.trigger('owl.prev');
})
$(".play").click(function() {
owl.trigger('owl.play', 1000); //owl.play event accept autoPlay speed as second parameter
})
$(".stop").click(function() {
owl.trigger('owl.stop');
})
},
error: function(httpReq, status, exception) {
$.mobile.loading('hide');
alert(status + " " + exception);
}
})
}
用于加载轮播。第一次加载很好。但是,如果我们点击浏览器的后退按钮进入该页面,它就不会加载样式。如何解决这个问题?
这是一个单页应用,页面更改使用div id
s
<div id="home" data-role="page"></div>
<div id="secondPage" data-role="page"></div>
<div id="firstPage" data-role="page"></div>