Jquery Mobile初学总结（1）

问题:

JQM是什么？

  你可以在官网上( http://jquerymobile.com/)找到说明。甚至于中文的网站也有很好的翻译。大概齐的说，再考虑兼容的情况下用html5和js，构建适合于移动平台的操作(触屏滑动...移动平台的特有的动作)而封装的框架。<这些实际上就是废话，不是很新的技术，我记得大概是在2011年的时候开发的>

jqm的使用范围？

  同上，根据业务需求定。现在有好多基于html5和js开发快平台移动应用的工具，phonegap、appCan...这些东西感觉起来真的很神奇。百度,goole一下会有很多的资料和视频<我也需要花大量时间学习的>

关于html5？

存储：Localstatage sessionStatage和很多的特性

jqm的学习资料和入门？

http://www.iteye.com/blogs/tag/jquerymobile

http://mobile.51cto.com/web-321959_1.htm

jqm新闻阅读器(安卓)：

http://www.desteps.com/application/mobile/0100145_2.html

实现多个页面加载：

http://blog.youkuaiyun.com/chen052210123/article/details/7481578

UI界面设计工具/资源及网站

http://mobile.51cto.com/design-250037.htm

android UI设计官方讲解;

http://mobile.51cto.com/android-223416_2.htm

5种傻瓜式app开发工具介绍

http://mobile.51cto.com/hot-292923.htm

滑动加载版面：

http://modiliany.iteye.com/blog/1131242

http://www.myexception.cn/h/1199044.html

--------------------------------------------------------------

问题 ：  jquery mobile事件的执行顺序：

jqm的page事件常用的有pageinit,pageshow等等，但是具体还有哪些？他们的执行顺序是怎么样的？参考下图：

jqm事件详解：参考<http://mobile.51cto.com/web-321959.htm>

mobileinit事件：

Query Mobile的默认运行参数进行调整的时候就需要在document.ready事件之前来对这些参数进行设置，jM为我们提供了mobileinit事件来处理加载之前需要执行的代码。

初始化配置项的方法：

方法一：独立设置每个配置项

$(document).bind("mobileinit",function(){

    $.mobile.foo=bar;

});

方法一：通过&extend方法设置多个配置项的值

$(document).bind("mobileinit",function(){

    $.extend($.mobile,{

        foo:bar

    });

});

常用的初始化配置：

<参考： http://mobile.51cto.com/web-321959_1.htm>

<参考： http://mobile.51cto.com/web-315568.htm>//重要，各种功能的详解

(具体可以查看jquery.mobile-1.3.1.js,搜索activeBtnClass所在的方法就是,<-- 源码总共有11000多行有时间可以看下--->)。

1 设置按钮处于激活状态的css样式。覆盖范围：Buttons、List views、Select menus等组件的触发样式。< 参考：jquery.mobil.theme-1.3.1.cs中.ui-btn-active>

  默认：

activeBtnClass: "ui-btn-active"/activeBtnClass(string ,default:"ui-btn-active");

  自定义：

$(document).bind("mobileinit",function(){

        $.mobile.activeBtnClass="ui-btn-active-mine"

});/

$(document).bind("mobileinit",function(){

    $.extend($.mobile,{

        activeBtnClass: " "ui-btn-active-mine "//这里可以指定自自己的自定义样式。

    });

});

2 设置当前激活状态的page样式：

默认：

    activePageClass(string,default:"ui-page-active");< 参考：jquery.mobile.structure-1.3.1.css中（这个里面是全局的 structure< 结构>）.  ui-page-active>

        字符串类型，在默认状态下参数是引用样式表中的”   ui-page-active”，样式 ui-page-active是用来将页面设置为显示状态的样式。所以在自定义这个样式到时候必须要在样式中声明以下属性： ”display:block !important; overflow:visible !important;”（注意：不熟悉jM的CSS框架的朋友经常会遇到自定义的样式不起作用的情况，这一般是由于自定义的样式和原有CSS框架的继承关系不同引起的，可以在不起作用的样式后面加上!important来提高自定义样式的优先级）;

注：!important在样式中提高优先级。注意IE6. http://baike.baidu.com/view/5843374.htm

自定义：

   $(document).bind("mobileinit",function(){

        $. activePageClass ="ui-page-active-mine"

});/

$(document).bind("mobileinit",function(){

    $.extend($.mobile,{

         activePageClass : " ui-pagie-active-mine "//这里可以指定自自己的自定义样式。

    });

});

（注意：将页面激活状态的样式定义为样式”  ui-pagie-active-mine ”，”  ui-pagie-active-mine ”中必须定义” display:block !important; overflow:visible !important;”属性。）

其他：

1 ajaxEnabled (boolean, default: true)://如果你的项目中没有用到Ajax，那么建议将这里设为false

2 ajaxFormsEnabled (deprecated boolean, default: true)://单独设置页面中的表单提交是否使用Ajax方法。

3 ajaxLinksEnabled (deprecated boolean, default: true)://单独设置页面中的链接是否使用Ajax方法。

4 autoInitialize (boolean, default: true)://设置页面是否自动初始化，当设置为false时，jQM将推迟对页面的渲染，方便我们动态构建页面的Dom元素等异步操作时引发的页面渲染失败问题。

     在页面元素构建完成后用$.mobile.initializePage();来开始渲染页面。

例子：

$(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); //延时加载 }); 

5 defaultTransition (string, default: 'slide')://设置默认的页面过渡效果，如果不想使用过渡效果就将参数设置为”none”。

6 gradeA (function that returns a boolean, default: a function returning the value of $.support.mediaquery)://用于判断浏览器是否属于A级浏览器。

7 loadingMessage (string, default: "loading")://设置加载提示框里显示的文本，如果设置为false，将不显示加载提示框。

8 metaViewportContent (string, default: "width=device-width, minimum-scale=1, maximum-scale=1")://设置用于页面的适应比例的mata元素，如果设置为false，将不添加Mata元素。

9 nonHistorySelectors (string, default: "dialog")://设置何种data-rel参数不会记录到哈希表。由于现阶段data-rel只有” dialog”参数，建议不要自定义此项。

10 subPageUrlKey (string, default: "ui-page")://用于设置引用子页面时哈希表中的标识。

11 其他的可以自己查看源文件。<具体可以查看jquery.mobile-1.3.1.js,搜索activeBtnClass所在的方法就是>

例如：按钮按下/划过的状态反应有些迟缓

$.mobile.buttonMarkup.hoverDelay = "false";按钮延迟效果取消

测试：

<!DOCTYPE html>

<html>

<head>

<link href=".css/jquery.mobile.theme-1.3.1.css" rel="stylesheet" type="text/css"/>

<link href="css/jquery.mobile.structure-1.3.1.css" rel="stylesheet" type="text/css"/>

<link href="css/custom.css" rel="stylesheet" type="text/css"/>

<!--jquery-->

<script src="js/config/jquery-1.8.2.min.js"></script>

<!--初始化mobileinit的js，必须放在 jqueryMobile之前 ->

<script src="js/config/init.js"></script>

<!--jqueryMobile-->

<script src="js/config/jquery.mobile-1.3.1.js"type="text/javascript"></script>

<!--自定义的全局的js-->

<script src="js/global/global.js"></script>

<!--custom的js-->

<script src="js/custom.js"></script>

<script>

$("#page").live("pageinit",function(){

    alert("hi ! this is page in pageinit");

});

$("#page").live("pageshow",function(){

    alert("hi ! this is page in pageshow");

});

$("#page").live("pagecreate",function(){

    alert("hi ! this is page in pagecreate");

});

$(function(){

    alert("hi ! this is document is ready!");

});

</script>

</head>

<body>

    header 

    content

    footer

</body>

</html>

<!--初始化mobileinit的js代码-->init.js清单：

$(document).bind("mobileinit", function(){

        //参考初始化配置

        alert("hi ! document is in mobileinit！！");

});

pagebeforecreate事件：

//在pagecreate事件之前，以及在UI组件初始化之前控制页面的内容。

 $("#football_news").live("pagebeforecreate", function() {

        alert('Hi! this is football_news in pagebeforecreate!!');}); 

pagecreate事件：

 //加载新页面的时候执行代码，你可以给pagecreate 事件绑定代码

 //pagecreate事件会在页面初始化的时候被触发，跟在initialization事件之后。大多数 jQuery Mobile的UI组件都是在这个事件后初始 化

$("#football_news").live("pagecreate", function() {
	alert('Hi! this is football_news in pagecreate!!');
 });

//pageshow事件
$("#football_news").live("pageshow", function() {
		alert('Hi! this is football_news in pageshow');
	});	

	$(function(){
		alert("Hi!document is ready!!");
	
	});

改变页面：

通过js改变现在活动的页面，可以使用changePage方法。有很多的方法和属性在改变页面的时候进行控制：

例子：

//使用solideup效果转到about us页面

    $.mobile.changePage("about/us.html",{transition:"solidup"});

//使用id为earch的表单数据转到"search results"页面

    $.mobile.changePage("searchresult.do",type:"post",data:$("form#search").serialize());

问题：create和refresh的区别

create事件用于将包含UI组件的原始的HTML标记渲染。而refresh 方法应该用在已经存在的组件上，来手动通过程序刷新他

问题：jqm的相册效果

http://blog.youkuaiyun.com/cockroach/article/details/7989413

http://www.photoswipe.com/

问题：jqm的基本事件

http://www.webjx.com/javascript/jsajax-33592.html

jqueryselector：

http://www.2cto.com/kf/201301/181723.html

------------------------------------------------------------/

问题：如何调用laoding效果

//显示loading

function showLoading(){

    $.mobile.loadingMessageTextVisible=true;

    $.mobile.showPageLoadingMsg("a","加载中...");//样式和文字

}

//隐藏loading

function hideLoading(){

    $.mobile.hidePageLoadingMsg();

}

------------------------------------------------------------

问题：如何禁用ajax跳转

    局部：data-ajax="false";

    全局：$(document).bind("mobileinit",function(){

        $.mobile.ajaxEnabled=false;

    });//注意放在jquery.mobile.js之前，所有的初始化都放在此

------------------------------------------------------------

问题：去掉jqm的默认样式

  data-role='none'

------------------------------------------------------------

问题:自定义样式

参考：http://www.docin.com/p-504440485.html

------------------------------------------------------------/

问题：  jquery mobile动态改变的list内容不加载

调用组件的refresh:

$("#contentList").append(content).listview('refresh');

原理：

jqm组件的显示原理是把原始的web组件隐藏，而用自动的UI组件来代替原始的web组件显示。动态改变list的值，其实是改变了原始组件web组件显示。同理，动态改变的list组件，而jqm自定义的组件并没有被更新，所以需要用refresh方法更新一下才能显示。

注意：

基本的所有的jqm UI组件都在改变子之后需要调用refresh。更多的刷新参考：jquery mobile各类组件刷新的方法。

------------------------------------------------------------

问题 ： jquery mobile各类组件刷新方法

1、Combobox or select dropdowns

var myselect = $("#sCountry");
 myselect[0].selectedIndex = 3;
 myselect.selectmenu('refresh');

2、Listviews

$('#mylist').listview('refresh');

3、Slider control

$('#slider').val(80).slider('refresh');

4、Toggle switch

var myswitch = $("#toggle");
 myswitch[0].selectedIndex = 1;
 myswitch .slider("refresh");

5、Radio buttons

$("input[value=grid]").attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

6、Checkboxes

$('#checkbox-1').attr('checked',true).checkboxradio('refresh');
or
$( ".selector" ).prop( "checked", true ).checkboxradio( "refresh" );

7、Buttons

$( "[type='submit']" ).button( "refresh" );

8、Column-Toggle Table

$( ".selector" ).table-columntoggle( "refresh" );

9、Reflow Table

$( ".selector" ).table( "refresh" );

-------------------

3 跳转时重复调用pageinit方法的解决办法	
问题描述：
		用ajax跳转的时候，从a.html跳转到b.html，用从b.html返回a.html等等这种反复跳转的时候，pageinit方法内的代码会调用多次。	
解决办法：
		在page中加入 data-dom-cache="true"属性，如：	
<div data-role="page" id="myPage" data-dom-cache="true">
然后把pageinit方法换为pageshow,如：	

$("#myPage").live("pageshow", function() {
//...do something
});

------------------------------------------------------------