jQuery Mobile知识汇总.pptx

jQueryMobile简介jQueryMobile的作用jQueryMobile关键特点jQueryMobile兼容的移动平台A级
AppleiOS3.2-5.0beta
Android2.1-2.3
Android3.0Honeycomb
WindowsPhone7
Blackberry6.0
Blackberry7
BlackberryPlaybook
PalmWebOS(1.4-2.0)
PalmWebOS3.0
FireboxMobile(Beta)
OperaMobile11.0
Meego1.2
Kindle3
ChromeDesktop11-13
FirefoxDesktop3.6-4.0
InternetExplorer7-9
OperaDesktop10-11
配置讲解优化移动体验增强标记jQueryMobile设置内部页面的页面标题Ajax导航Ajax导航转换效果对话框对话框:警告对话框:操作表带有媒体查询的响应式布局页面预加载页面缓存链接到内部页面或外部页面页眉回退按钮回退链接页脚标签栏含有图标的标签栏按钮按钮Icon列表Icon列表按钮分组按钮动态按钮按钮选项按钮方法按钮事件表单元素本地表单元素文本输入名称文本输入选项文本输入方法<divdata-role=“fieldcontain”>
<labelfor=“name”>文本输入框：</label>
<inputtype=“text”name=“name”value=“”/>
</div>
选择菜单选择菜单选择菜单hidePlaceholderMenuItemsbooleandefault:true:默认情况下，当选择菜单打开时，占位符菜单条目时隐藏不见的。为了让占位符条目时可选择的，将该值设置为false。
$(“#select1”).selectmenu({hidePlaceholderMenuItemes:false});
Iconstringdefault:”arrow-d”:设置选择按钮的图标。该选项还可以公开作为一个数据属性：data-icon=“plus”.
$(“#select1”).selectmenu({icon:”plus”});
Iconposstringdefault:”right”：设置图标位置。可能的值为”left”、”right”、”none”和”notext”.”notext”值会将选择按钮（select）显示为一个只带有图标的按钮，而且该按钮没有占位符文本。”none”值将会彻底移除图标：data-iconpos=“none”.
$(“#select1”).selectmenu({iconpos:”notext”});
Iconshadowbooleandefault:true:当该选项的值为true时，jQueryMobile框架会为图标添加阴影：data-iconshadow=“false”
$(“#select1”).selectmenu({iconshadow:false});
initSelectorCSSselectorstringdefault:”select:not(:jqmData(role=‘slider’))”:initSelector定义用来触发widget插件自动初始化的选择器（元素类型、数据角色[datarole]等）。例如，由默认选择器匹配的所有元素都会被selectmenu插件增强。为了重写该选择器，可以绑定到mobileinit事件，并根据情况更新选择器。
$(document).bind(“mobileinit”,function(){
$.mobile.selectmenu.prototype.options.initSelect=“…”;})Inlinebooleandefault:false:如果该选项设置为true，则会让选择按钮以内嵌（inline）按钮的形式显示。默认情况下，选择按钮会占据其容器的整个宽度。与之相对比的是，内嵌按钮只占据其占位符文本的宽度：data-inline=“true”$(“#select1”).selectmenu({inline:true});
nativeMenubooleandefault:true:默认情况下，选择按钮会为OS启动本地的选择选择器（selectpicker）。要以自定义的HTML/CSS视图来呈现选择菜单，需要将该值设置为false：data-native=“false”
$(“#select1”).selectmenu({nativeMenu:false});
Shadowbooleandefault:true:默认情况下，选择按钮会应用阴影。将该选项设置为false则会移除阴影：d