liang408015204的专栏

1、JQuery Mobile 中创建对话框，只需要在指向页面的链接元素中添加一个data-rel属性，并将该属性值设置为dialog。关闭对话框是将data-rel属性值设置为back。2、示例代码：   New Document                    JQuery Mobile  打开对话框    //打开对话框

1、JQuery Mobile 提供的CSS样式ui-grid可以实现内容的网格布局，该样式有4种预设的配置布局：ui-grid-a、ui-grid-b、ui-grid-c、ui-grid-d，分别对应为两列、三列、四列、五列的网格布局形式。使用网格布局时，整个宽度为100%，无任何padding，margin及背景颜色，因此不会影响到其他元素放入网格中的位置。2、示例代码：

1、在底部栏中，可以添加按钮组，也可以向容器中添加表单中的元素，如、等，为了确保表单元素在底部栏的正常显示，需要在底部栏容器中添加ui-bar类别，使新增加的表单元素保持一定的间距。此外，将data-position属性值设置为inline，用于统一设定各表单元素的显示位置。2、示例代码：   New Document

1、尾部栏与头部栏结构差不多，区别是设置的data-role属性值不同，为了减少各按钮间的距离，通常需要在按钮的外围添加一个data-role属性值为controlgroup的容器，形成一个按钮组显示在尾部栏中。同时，在该容器中添加一个data-type属性，并将属性值设置为horizontal，表示按钮按水平顺序排列。2、示例代码：   New Document

1、在JQuery Mobile的列表中，有时需要对选项内容做两个不同的操作，这时，需要对选项中的链接按钮进行分割。实现分割的方法是在元素中再增加一个元素，便可以在页面实现分割效果。2、示例代码：  New Document                头部栏         Iphone手机 移动电话、宽屏iPod和

1、JQuery Mobile中可以通过增加multiple属性，并将该属性值设置为true即可将菜单设置为多项选择。2、示例代码：  New Document                头部栏     multiple="true">   年份20112012  multiple="true">   月份

1、菜单由按钮和菜单两部分组成，当用户单击按钮选择其中一项后，菜单自动关闭，被单击按钮的值将自动更新为菜单中用户所选的值。将菜单的类型设置为自定义，只需在元素中，将data-native-menu属性值设为false即可。2、示例代码：  New Document                头部栏        年份2011

1、分割列表项，只需在分割的位置添加一个元素，并将该元素的data-role属性值设为list-divider，表示该元素是一个分割列表项。在默认情况下，普通列表项的主题颜色为浅灰色，分割列表项的主题颜色为蓝色。2、示例代码：  New Document                头部栏    图书  计算机 社科 文艺

1、在列表中，增加一个显示图标的元素和显示计数器的元素2、示例代码：  New Document                头部栏        图书 3      音乐 5  3、效果图预览：

1、JQuery Mobile为导航栏提供了专门的组件，使用时只需要将标签的data-role属性值设置为navbar，便会产生一个导航栏容器，在容器内，通过元素设置导航栏各子类导航按钮，每一行最多可以放置5个按钮，超出将自动显示在下一行。2、示例代码：   New Document                   头部标题栏添加尾部导航栏

1、JQuery Mobile支持以HTML语义化的元素，如、、，显示列表中所需要的内容格式。使用元素并添加一个名为ui-li-count的类别，可以在列表的右侧生成一个计数器。使用元素来突出列表中显示的内容，元素用于减弱列表项中显示的内容，两者结合，可以使列表中显示的内容具有层次关系。如果要增加补充信息，可以在显示的元素中添加一个名为ui-li-aside的类别。2、示例代码：

1、在头部导航栏中，也可以保留头部栏中的标题与按钮，只要将导航栏容器以嵌套的方式放置在头部即可。2、示例代码：   New Document                    图书频道      图书音乐影视    这是图书页面 @2013 3I Studio        音乐频道

1、在头部栏中，在左侧和右侧分别添加一个按钮，只需在中添加属性data-icon，并将其属性值设置为arrow-l左侧或arrow-r右侧。2、示例代码：   New Document                   //定位，确保头部栏在更多移动浏览器中显示    上一张     //按钮位置在左边图片   下一张   // 按

1、在JQuery Mobile中，将元素的data-role属性值设置为slider，可以将该下拉列表元素下的两个选项样式变成一个翻转切换开关。2、示例代码：   New Document           #pTip{ font-weight:bold; clear:both; text-align:center}

1、要创建一个滑块组件，只需添加一个元素，并将type属性值设置为range。在JQuery Mobile 中，滑块组件由两部分组成一部分是可调整大小的数字输入框，另一部分是可拖动修改输入框数字的滑动条。通过添加min、max属性值来设置滑动条的取值范围。2、示例代码：   New Document               #spnPrev{m

1、实现对区块的折叠需要创建一个容器，将该容器的data-role属性设为collapsible，表示是一个可折叠的区块。2、示例代码：   New Document                头部栏标题    点击查看更多JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工

1、内部链接是通过在标签内将href属性值设为#+id的形式，外链则是在中增加rel属性，并将属性值设为external，如：3i Studio2、外部链接切换示例代码：   New Document                   天气预报  今天|  明天@2013 3i studio

1、在JQuery Mobile中，多个页面的切换是通过元素、并将属性设置为#+对应的id号的方式进行的。2、多页面切换示例代码：   New Document                   JQuery Mobile  这是首页  详细页3I工作室版权所有           JQuery Mobile

1、需要运行JQuery Mobile 移动应用页面，需要下载JQuery Mobile 3个相关插件文件（有多版本），jquery.mobile-1.2.0.min.css、jquery-1.8.3.min.js、jquery.mobile-1.2.0.min.js，JQuery Mobile官网地址：http://jquerymobile.com2、将插件文件加载到页面中，注意它们的加载顺

1、在开发移动应用时，对需要链接的页面进行预加载是十分有必要的。因为当一个链接页面设置成为预加载方式时，在当前页面加载完成之后，目标页面也被自动加载到当前文档中，用户单击就可以马上打开，大大加快了页面访问的速度。2、设置链接页面预加载，在标签中添加data-prefetch属性，并将属性值设为true。在JQuery Mobile中要实现页面的预加载，另外一种方法是调用JavaScript代码

1、在JQuery Mobile中，可以通过页面缓存的方式将访问过的历史内容写入页面文档的缓存中，当用户重新访问时，不需要重新加载，只要从缓存中读取就可以。2、设置页面为缓存，只需要在page容器中添加data-dom-cache属性，并将属性设置为true。在JQuery Mobile中设置缓存页面还有另外一种方法，即通过JavaScript代码设置一个全局性的JQuery Mobile属性

1、如果要跟踪不同页面的内容注入当前的DOM结构，可以将页面中的page容器绑定pagecreate事件，该事件在页面初始化时触发，绝大多是的JQuery Mobile组件都在该事件之后进行一些数据的初始化。2、将page容器与pagebeforecreate和pagecreate事件进行绑定，在页面执行时，通过绑定的事件跟踪执行的过程3、示例代码   New Docum

1、给page容器头部添加后退按钮，只需在page容器中添加data-add-back-btn属性，并将属性值设置为true。显示默认为back，可修改data-back-btn-text属性值来设置后退按钮中显示的文字。2、示例代码：   New Document               $(function(){  $.mobile.pag

1、文本输入包括文本输入框和文本输入域，以及HTML5中新增的输入类型。2、示例代码：   New Document                     头部栏  搜索：  姓名：  年龄：    @2013 3I Studio    3、效果图预览：

1、设置导航栏图标，只需子类导航按钮中添加data-icon属性，属性值可设置为arrow-l、arrow-r、arrow-u、arrow-d、delete、plus、minus、check、gear。设置图标位置只需添加另外一个属性data-iconpos，属性值可设置为top、left、right、bottom。2、示例代码：   New Document

1、JQuery Mobile中的按钮由两类元素组成，一类是元素，将该元素的data-role属性值设置为button；另一类是，无需在表单内添加data-role属性，只要将type属性值设置为submit、reset、button或image。2、示例代码：   New Document                头部栏

1、创建单选按钮组，使用data-role属性值为controlgroup的元素，包裹全部的和元素，然后在成员结构中每个元素都通过for属性对应一个类型为radio的元素。2、示例代码：   New Document               $(function(){ $("input[type='radio']").bind("change",f

1、开发者可以另外创建一个CSS样式文件，在文件中添加链接按钮的图标地址与显示位置来自定义按钮图标。2、示例代码：   New Document               initial-scale=1" />                           图书  音乐  影视    这是图书

1、在头部栏中，如果只放置一个链接按钮，不论放置在标题的左侧还是右侧，其最终显示在标题的左侧，如果想改变位置，需要添加新的类别属性ui-btn-left左侧和ui-btn-right右侧。2、示例代码：   New Document                  图片 下一张   //按钮在右侧 @2013 3I S