JQuery开发权威指南——学习笔记

——题记：最近比较无聊，想学习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" );

参考资料：Jquery添加动态元素后未能正常渲染的解决方法

2）JM转场是个巨坑

由于默认情况下，为了不重新加载文件，使用ajax转场的时候，仅仅会变化body中的内容，head中内容完全不会加载。因此，如果在另外一个页面使用了新的javascript之类的东西，需要使用data-ajax="false"禁用jm转场，但是这样又会消耗性能和网络io。

参考资料：Android+Jquery Mobile学习系列(4)-页面转场及参数传递