有些时候因为项目的需要我们还是需要对这些参数进行自定义的。在学习jM的初始化参数之前,我们需要先来了解mobileinit事件。
Mobileinit事件
jQuery Mobile的加载事件和普通的jQuery插件有所不同,它会在document.ready事件之前执行。因此我们在需要对jQuery Mobile的默认运行参数进行调整的时候就需要在document.ready事件之前来对这些参数进行设置,jM为我们提供了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"):
设置当前激活状态页面的样式,一个jM页面中必将有一个页面容器是处于激活状态的,其它jM页面容器将会处于隐藏状态,
字符串类型,在默认状态下参数是引用样式表中的” ui-page-active”,样式ui-page-active是用来将页面设置为显示状态的样式。所以在自定义这个样式到时候必须要在样式中声明以下属性:”display:block !important; overflow:visible !important;” 。(注意:不熟悉jM的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”。
初始化配置部分结束
相关推荐
jqm-transitions jquery-mobile 使用速度和 jquery-ui 进行转换
jQuery Mobile开发的移动新闻阅读器,HTML5技术配合jQuery MobilejQuery Mobile jqm 新闻阅读器 jqm图标更换 jQuery Mobile jqm 新闻阅读器 jqm自定义按钮的图片以及header和footer的定位
本开发文档是Jquery mobile开发文档,中文版的,解压有直接点击index.html即可
当前分支布局大师-jQuery Mobile 1.4版-当前正在进行中,尚未准备好生产jqm-1.3.1-jQuery Mobile版本1.3.1 jqm-1.3.0-jQuery Mobile版本1.3.0用法将jquery.mobile.flatui.css ,字体和图像从generated文件夹复制到您...
当前分支布局大师-jQuery Mobile 1.4版-当前正在进行中,尚未准备好生产jqm-1.3.1-jQuery Mobile版本1.3.1 jqm-1.3.0-jQuery Mobile版本1.3.0用法将jquery.mobile.square.css ,字体和图像从generated文件夹复制到您...
jQuery 移动版 这是一个用于开发 jQuery Mobile 应用程序的存储库。 它基于 Joe Marini 的 lynda.com 在线课程:[jQuery Mobile Essential Training] ( ) 指示 资源
jQuery mobile滑动式的标题导航
jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制
这是在 jQuery Mobile 的 Ajax 导航模型之上实现的,这意味着该插件与您浏览器的历史记录相关联,因此后退和前进按钮按预期工作!演示和文档这个插件需要 jQuery 和 jQuery Mobile。 虽然它不需要整个框架,我们...
中文API文档 jQuery Mobile示例代码
jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。 今天,jQuery 驱动着 Internet 上的大量网站,在浏览器中提供动态用户体验,促使...
jQM邮件 ... 使用 jQuery Mobile 组件尝试移动优先的响应式应用程序布局。 一些亮点: 许多平台上的固定工具栏 通过使用位置在更宽的视口上滚动独立列:固定(使用本机浏览器滚动) 渐进增强驱动
Booking_Movies jQueryMobile关于预订电影Sour Leangchhean设计
具体内容为:1、普通Jquery如何用Ajax访问WebService;2、JQM如何用Ajax访问WebService。3、WebService服务非常全面,返回值分为空、字符串、对象、数组、集合、DataSet等,参数也区分了有参和无参,绝对全面。4、...
JqueryMobile输入联想控件 1 控件依赖于Jquery Mobile,因为联想控件的弹出面板是通过Jquery Mobile里面的panel组件实现的,当然如果不想依赖JQM,可以自行实现panel部分,用div替代即可,只不过那些效果要自己实现...
jQuery Mobile中文教程,移动平台应用开发必备!
jqm-内联-多选一个插件,可让您使用复选框组在 jquery mobile 中表示多选。 演示: : 为什么? 我有一个存在于弹出窗口中的 jQM 表单,我需要在这里使用多选。 多选需要使用 jQM 样式,但这是不可能的,因为 jQM 将...
jQueryMobile + BackboneJS + RequireJS | 启动移动应用程序的样板! jQMBR是一个小包,用于快速启动一个新的移动应用程序项目: jQuery UndescoreJS 主干JS 需要JS 一些自定义模块 更少的源文件 一切准备...
## README 这是jQuery Mobile ThemeRoller工具的新仓库。 有关jQm ThemeRoller托管版本PHP配置的说明: php函数调用file_get_contents()在一些地方使用。 为了使它起作用,必须将php配置allow_url_fopen设置为true...
最新jquery.mobile-1.4.0 jquery.mobile-1.4.0.zip 含Demos 最新jquery.mobile-1.4.0-UI(jQuery+CSS+images+demos.index.html) jquery.mobile-1.4.0.min.js jquery.mobile-1.4.0.js jquery.mobile-1.4.0.min....