转自:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/01/2270863.html
初始化
jQM在加载的时候会自动的初始化默认配置项,这样我们就不需要为了学习和配置这些参数花费很多的时间了,大大的提高了开发效率。
但是有些时候因为项目的需要我们还是需要对这些参数进行自定义的。在学习jQM的初始化参数之前,我们需要先来了解mobileinit事件。
Mobileinit事件
jQM的加载事件和普通的jQuery插件有所不同,它会在document.ready事件之前执行。因此我们在需要对jQM的默认运行参数进行调整的时候就需要在document.ready事件之前来对这些参数进行设置,jQM为我们提供了mobileinit事件来处理加载之前需要执行的代码。
例如:
$(document).bind("mobileinit", function(){
//apply overrides her
});
复制代码
初始化配置项的两种方法
方法一:通过jQuery的$.extend方法来设置多个配置项
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
foo: bar
});
});
复制代码
方法二:独立设置每个配置项
$(document).bind("mobileinit", function(){
$.mobile.foo = bar;
});
复制代码
初始化配置项
以下是可以通过$.mobile对象来初始化的配置项:
activeBtnClass (string, default: "ui-page-active"):
设置按钮处于激活状态时的CSS样式。
字符串类型,在默认状态下参数是引用样式表中的” ui-page-active "。
覆盖范围:Buttons、List views、Select menus等组件的触发状态。
例如:
$(document).bind("mobileinit", function(){
$.mobile.activeBtnClass="ui-btn-hover-a";
});
复制代码
将按钮激活状态的样式定义为样式” ui-btn-hover-a”
activePageClass (string, default: "ui-page-active"):
设置当前激活状态页面的样式,一个jQM页面中必将有一个页面容器是处于激活状态的,其它jQM页面容器将会处于隐藏状态。
字符串类型,在默认状态下参数是引用样式表中的” ui-page-active”,样式ui-page-active是用来将页面设置为显示状态的样式。所以在自定义这个样式到时候必须要在样式中声明以下属性:”display:block !important; overflow:visible !important;” 。(注意:不熟悉jQM的CSS框架的朋友经常会遇到自定义的样式不起作用的情况,这一般是由于自定义的样式和原有CSS框架的继承关系不同引起的,可以在不起作用的样式后面加上!important来提高自定义样式的优先级)
例如:
$(document).bind("mobileinit", function(){
$.mobile.activePageClass="ui-page-custom";
});
复制代码
将页面激活状态的样式定义为样式” ui-page-custom”,” ui-page-custom”中必须定义” display:block !important; overflow:visible !important;”属性。
ajaxEnabled (boolean, default: true):
同时设置页面中的链接和表单提交是否使用Ajax方法,也就是说表单的提交和a标记中的链接,都是采用ajax调用。
布尔类型,在默认状态下参数是true。
例如:
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled=false;
});
复制代码
如果你的项目中没有用到Ajax,那么建议将这里设为false
ajaxFormsEnabled (deprecated boolean, default: true):
单独设置页面中的表单提交是否使用Ajax方法。
布尔类型,在默认状态下参数是true。
ajaxLinksEnabled (deprecated boolean, default: true):
单独设置页面中的链接是否使用Ajax方法。
布尔类型,在默认状态下参数是true。
autoInitialize (boolean, default: true):
设置页面是否自动初始化,当设置为false时,jQM将推迟对页面的渲染,方便我们动态构建页面的Dom元素等异步操作时引发的页面渲染失败问题。
在页面元素构建完成后用$.mobile.initializePage();来开始渲染页面。
布尔类型,默认状态下参数为true。
例如:
$(document).bind("mobileinit", function(){
$.mobile.autoInitialize=false; //删除这行配置参数就会出现渲染错误
});
$(function(){
function newDom(){
$("div[data-role='content']")
.append("<a href='web.html' data-role='button'>Link button</a>");
$.mobile.initializePage();//加载完成后开始渲染页面
}
setTimeout(newDom,500); //延时加载
});
复制代码
defaultTransition (string, default: 'slide'):
设置默认的页面过渡效果,如果不想使用过渡效果就将参数设置为”none”。
字符类型,默认参数”slide”。
gradeA (function that returns a boolean, default: a function returning the value of $.support.mediaquery):
用于判断浏览器是否属于A级浏览器。
布尔类型,默认$.support.mediaquery用于返回这个布尔值。
loadingMessage (string, default: "loading"):
设置加载提示框里显示的文本,如果设置为false,将不显示加载提示框。
字符类型,默认值”loadind”。
metaViewportContent (string, default: "width=device-width, minimum-scale=1, maximum-scale=1"):
设置用于页面的适应比例的mata元素,如果设置为false,将不添加Mata元素。
字符类型,默认” width=device-width, minimum-scale=1, maximum-scale=1”。
nonHistorySelectors (string, default: "dialog"):
设置何种data-rel参数不会记录到哈希表。
由于现阶段data-rel只有” dialog”参数,建议不要自定义此项。
subPageUrlKey (string, default: "ui-page"):
用于设置引用子页面时哈希表中的标识。
字符类型,默认” ui-page”。
分享到:
相关推荐
jQuery_Mobile中文手册
资源名称:jQuery Mobile参考手册 中文CHM版 内容简介:jQuery Mobile 是一个用于创建移动端web应用的的前端框架。jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。jQuery Mobile 工作与所有主流的智能...
jQueryMobile-Ajax开发-初始化,jQueryMobile中文文档,对与入门者还不错。
jquery mobile中文手册,详细介绍了jquery mobile的相关知识。
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。 jQuery Mobile 可以应用于智能手机与平板电脑。 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
jQuery_Mobile的中文api手册,做移动开发的同学必备。
主要是针对移动web开发中使用Jquery Mobile框架的学习和参考文档和资料,包含: jquery_mobile_设计思想.docx jQuery_Mobile_入门教程.docx jQuery_Mobile入门教程——主题的使用和定制.docx jQuery_Mobile使用指南....
1.jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 2.jQuery Mobile 构建于 jQuery 以及 jQuery UI类库之上,如果您了解 jQuery,您可以很容易的学习 jQuery Mobile。 3.jQuery Mobile 使用了极少的 ...
Jquery Mobile 中文手册,适合手机开发的人
jquery1.7手册中文 CHM文档,编译于2012.02.09,也算是最新的jQuery参考文档了。内容比较丰富,查询方便,放在手边,可作为jquery速查手册,包括jQuery核心、选择器、属性、筛选器、文档处理、css、事件处理、效果、...
jquery mobile开发手册,基于jquery用于手机wap开发手册文档
[Packt Publishing] 移动应用开发教程 (jQuery Mobile 实现) (英文版) [Packt Publishing] Creating Mobile Apps with jQuery Mobile (E-Book) ☆ 出版信息:☆ [作者信息] Shane Gliser [出版机构] Packt ...
jQuery API 3.3.1 中文手册,jQuery是一个JavaScript框架,自面世以来,以其快速、简洁,能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等功能使多很多WEB编程者对其非常热爱,本手册旨在帮助广大...
JQuery+Mobile+中文手册,对于初学者来说非常有用哦。
jquery1.7.2中文手册 你懂的,以备不时之需
压缩文件包含PhoneGap wp7, JQuery Mobile 中文手册,PhoneGap1.3 它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外...
好用的Ajax框架——jquery——树型结构