jQuery Mobile教程-基础篇-属性

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

特别申明:本系列教程由小春撰写

本文我们来认识一下jQuery Mobile的一些属性
(注释:下面示例中的代码片段均来自1.1.0版本)
首先解释一下在jquery mobile里面的每一个view或者page的概念:
如何定义一个页面容器呢?
从前面的教程里面,你应该看过下面的代码:

//一个单独的page
<div data-role="page"></div>

//多个page
<div data-role="page" id="home-page">
</div>

<div data-role="page" id="copyright-page">
</div>

其实page的配置方式很简单,但是我们下面看看源码:

//#7470
var $pages = $(":jqmData(role='page'),:jqmData(role='dialog')");		
if(!$pages.length){
	$pages = $("body").wrapInner("<div data-"+ $.mobile.ns + "role='page'></div>").children(0);
}

说明:
1、其实data-role="dialog"的对于jquery mobile体系来讲也是算一个page 大家看了前面的dialog的例子,发现它不是我们一般认为的一个传统的浮层
2、如何页面中没有定义page和dialog,体系会默认加一个 当然这种状况很少见

说了那么多,我们来看一下到底哪3个属性还是比较重要的!

1、$.mobile.pageContainer

返回的是:存放page的容器,在体系中其实是body

源码部分:

//#7488行
$.mobile.pageContainer = $pages.first().parent().addClass("ui-mobile-viewport");  
	

2、$.mobile.firstPage

返回的是:第一个page

源码部分:

//#7488行
	  $.mobile.firstPage = $pages.first(); 

3、$.mobile.activePage

返回的是:当前处于可见的page或者dialog

源码部分:

//#3385行
$.mobile.activePage = toPage;  

PS:
1、有问题欢迎在官网留言或者直接联系我:@zhangyaochun_fe
2、可以在官网的问答频道进行提问,我们会尽快回复
3、谢谢您对w3cplusjquery mobile系列教程的关注

关于小春

专注于前端开发,对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习,涉足移动前端许久,爱好分享交流…个人博客focus-fe。欢迎随时关注我:新浪微博

Air Jordan XIII 13 Shoes

如需转载,烦请注明出处:https://www.w3cplus.com/blog/705.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部