Jquery mobile 主干网和jQuery Mobile:所有页面上的标题相同
我负责开发一个web应用程序 我做了很多研究,最后决定用主干网和jQuery手机开发这个webapp。您当然知道,jQuery Mobile和主干网之间存在一些路由冲突。由于本教程,我决定使用主干路由,所以禁用了jQM路由: 我开始构建一个只有3个视图和一个路由器的示例应用程序(没有jQM)。它工作得很好。您可以在此处运行此应用程序。我将在下一部分中添加jQuery移动HTML标记 现在,我想用jQuery Mobile做同样的事情:为所有模板保留相同的标题。上一篇教程确实帮助了我,但我仍然对jQM的DOM系统感到困惑 我试过的是: index.html() 但它不起作用Jquery mobile 主干网和jQuery Mobile:所有页面上的标题相同,jquery-mobile,backbone.js,asynchronous,header,footer,Jquery Mobile,Backbone.js,Asynchronous,Header,Footer,我负责开发一个web应用程序 我做了很多研究,最后决定用主干网和jQuery手机开发这个webapp。您当然知道,jQuery Mobile和主干网之间存在一些路由冲突。由于本教程,我决定使用主干路由,所以禁用了jQM路由: 我开始构建一个只有3个视图和一个路由器的示例应用程序(没有jQM)。它工作得很好。您可以在此处运行此应用程序。我将在下一部分中添加jQuery移动HTML标记 现在,我想用jQuery Mobile做同样的事情:为所有模板保留相同的标题。上一篇教程确实帮助了我,但我仍然对j
那么,你能帮我实现这个系统吗:所有模板都有相同的标题,而jQuery Mobile的
app content
div中只有一个可变内容?好的,我终于通过使用触发器事件找到了解决方案
我只想使用主干网和jQuery Mobile在每个页面(或模板)上显示相同的页眉和页脚。这其实很简单,但我研究的时候走错了路
以下是2个简单的应用程序;唯一的区别在于:
普通应用程序(正在工作的JSFIDLE:)
}))
使用jQuery Mobile的应用程序(正在使用JSFIDLE:)
}))
我刚刚在$(this.el).html(renderedContent)
上添加了.trigger('create')
!
我特意将jQuery移动标签放在这两个应用程序上,以强调这几乎是相同的代码
希望它有用。你说的“它不起作用”是什么意思?JQM是否没有正确设置标题的样式?如果是这样的话,我猜这是因为您将数据角色页面添加到一个元素中,而该元素没有包含头,因此JQM不知道如何运行该代码。
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>
<!-- The Templates -->
<script type="text/template" id="home">
<p>This is Home page.</p>
<ul data-role="listview" data-inset="true">
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
</ul>
</script>
<script type="text/template" id="page1">
<p>This is Page 1.</p>
<ul data-role="listview" data-inset="true">
<li><a href="#">Home</a></li>
<li><a href="#page2">Page 2</a></li>
</ul>
</script>
<script type="text/template" id="page2">
<p>This is Page 2.</p>
<ul data-role="listview" data-inset="true">
<li><a href="#">Home</a></li>
<li><a href="#page1">Page 1</a></li>
</ul>
</script>
<!-- The Scripts -->
<script src="lib/jquery-1.7.1.min.js"></script>
<script src="js/jqm-config.js"></script>
<script src="lib/jquery.mobile-1.0.1.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- The fixed header -->
<div data-role="header">
<a href="#" data-icon="home">Home</a>
<h1>Header</h1>
</div>
<!-- THE CONTENT FOR THE TEMPLATES -->
<div data-role="content" id="app-content">
</div>
</body>
window.HomeView = Backbone.View.extend({
template:_.template($('#home').html()),
render:function (eventName) {
$(this.el).html(this.template());
return this;
}
});
window.Page1View = Backbone.View.extend({
template:_.template($('#page1').html()),
render:function (eventName) {
$(this.el).html(this.template());
return this;
}
});
window.Page2View = Backbone.View.extend({
template:_.template($('#page2').html()),
render:function (eventName) {
$(this.el).html(this.template());
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes:{
"":"home",
"page1":"page1",
"page2":"page2"
},
initialize:function () {
// Handle back button throughout the application
$('.back').live('click', function(event) {
window.history.back();
return false;
});
this.firstPage = true;
},
home:function () {
console.log('#home');
this.changePage(new HomeView());
},
page1:function () {
console.log('#page1');
this.changePage(new Page1View());
},
page2:function () {
console.log('#page2');
this.changePage(new Page2View());
},
changePage:function (page) {
console.log($(page.el));
$(page.el).attr('data-role', 'page');
page.render();
$('#app-content').append($(page.el));
var transition = $.mobile.defaultPageTransition;
// We don't want to slide the first page
if (this.firstPage) {
transition = 'none';
this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash:false, transition: transition});
}
});
$(document).ready(function () {
console.log('document ready');
app = new AppRouter();
Backbone.history.start();
});
app.Views.Main = Backbone.View.extend({
initialize : function(params)
{
// ...
},
render : function()
{
// ...
$(this.el).html(renderedContent);
// ...
}
app.Views.Main = Backbone.View.extend({
initialize : function(params)
{
// ...
},
render : function()
{
// ...
$(this.el).html(renderedContent).trigger('create');
// ...
}