——题记：最近比较无聊，想学习JQuery。
目录：
1. 基本框架
2. data-add-back-btn注意事项
3. 按钮上的图标
4. 导航
5. 网格布局
6. 页面常用组件
7. 主题
8. 事件
9.实验阶段
正文
0. 这本书是基于JQuery mobile的，至少我看了3章当前都是这样。
测试的源码暂时找不到地方上传，先搁置。
1. 基本框架
page
header ——注意，page中的header使得文档的title可有可无，因此此部分的h1内容将替换页面的title
content
footer
2. data-add-back-btn
1）1.2版本后此属性默认为false，需要用的时候将data-add-back-btn="true"即可；
2）1.4版本后此属性只能使用在header中。参考：stackoverflow 1楼answer的第三个评论。
3. 按钮上的图标
1）在<a>标签中，使用data-icon="arrow-l"添加左箭头图标，用此种方式标注的箭头，在opera mobile emulor里面不能正常显示，网页及手机正常；
2）使用 data-iconpos="top" 可以定义图标位置，但是定义为top或者bottom都会产生bug，会浮动，并且超出header/footer的范围；
3）使用 class="ui-btn ui-icon-arrow-r ui-btn-icon-right" 方式添加的图标能定义放置位置，data-icon和class混用以class为准，使用top和bottom会产生同2）的bug。
4）图标样式：JQuery Mobile API。
4. 导航
1）使用 data-role="navbar" 并在中间添加ul和li来定义导航按钮；
2）class="ui-btn-active" 定义高亮选中，但是在实际测试中存在bug，同一个html中如果存在多个page，来回切换的时候，active效果会丢失；
3）使用data-role="controlgroup"产生无缝的导航栏，默认是 data-type="vertical"，但是没有任何效果，使用horizontal可以产生无缝的水平导航栏。
5. 网格布局
1）使用class="ui-grid-a"/"ui-grid-b"/"ui-grid-d"/"ui-grid-d"能创建二栏/三栏/四栏/五栏的网格，class="ui-grid-solo"可以创建一个一栏的；
2）使用data-role="collapsible"建立可折叠块区，支持嵌套使用，并且默认展开效果 data-collapsed="false" 是独立的；
3）使用data-role="collapsible-set"作为容器包裹collapsible可以建立类似手风琴风格的树形折叠区域。
6. 页面常用组件
1）在a标签中使用data-role="button"、input中type为submit、reset、button、image，都会建议按钮样式；
2）使用data-inline="true"可以将按钮在同一行中显示，但是由于固定了宽度，导致不能与浏览器进行等比缩放，所以，一般情况下需要等比缩放的地方都会联合网格布局；
3) input定义为type="search"会出现搜索按钮，type="number"右端会出现上下调整按钮，type="range"并且定义min和max可以出现滑块；
4）使用type="radio"配合data-role="controlgroup"可以产生组合单选按钮，切记每个radio的name一定要一致；
5）使用type="checkbox"产生复选组合按钮；
6）使用select-option组合产生下拉框，data-native-menu="false"定义为自定义风格（弹出效果），可以配合multiple="true"可以产生多项选择；
7）在ul li标签组中使用data-role="listview"可以自动产生a标签带右箭头的列表；
8）嵌套的listview无法正常显示jquery样式，将会使用html默认样式，非常丑陋，这个可能是1.4版本的问题；
9）添加使用data-split-icon="gear"，并加一个a标签能让listview分成左右两栏，目前仅支持两栏；
10）在li标签添加data-role="list-divider"能让该li标签变成一个分割栏。
7. 主题
1）使用jquery.cookie.js中的$.cookie("cookie name"[,value,{path:"path",expires:"number"}])函数设置cookie，同一个函数忽略后面的三个参数读取cookie，并且将page的theme属性（data-theme）设置为a/b/c/d/e等的主题；
2）主题的有效性优先级顺序是：Active（隐藏主题）--内层--外层--全局
更多的主题内容从实际应用中体会吧，因为这个是前端的概念了。
8. 事件
1）滑动事件中对于swiptleft方法的定义方式存在问题，原书的方式不能用；
2）使用bind方法能将orientationchange事件绑定到控件中，原书中绑定的是body，但是实际测试时不能用的（模拟器和手机均不行），绑定在$(window)对象就可以了；
3）滚动事件的测试试验中发现obj.live()方法无效，根据最新官方api文档，使用的是$(document).on('pageinit',"#page", function(event,ui)的方式进行绑定；
4）滚动时间在IOS系统中无效，因为IOS设备在滚屏时锁定 DOM 操作，这意味着当用户滚屏时不可能改变任何东西。
9.实验阶段（此部分内容会比较零星）
1）给controlgroup之类含有div元素的data-role使用html()方法添加内容的时候，需要使用.trigger( "create" )刷新以便正常渲染；listview需要使用.listview("refresh")
例如，有一个listview，id='testlist'，那么渲染方法：$('#testlist').listview("refresh");
有一个fieldset 是controlgroup类型，id='testcontrolgroup'，那么渲染方法为：$('#testcontrolgroup').trigger( "create" );
2）JM转场是个巨坑
由于默认情况下，为了不重新加载文件，使用ajax转场的时候，仅仅会变化body中的内容，head中内容完全不会加载。因此，如果在另外一个页面使用了新的javascript之类的东西，需要使用data-ajax="false"禁用jm转场，但是这样又会消耗性能和网络io。
扫一扫
563
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
