【jQuery Mobile】jQuery Mobile 语法小抄

在这里插入图片描述
最近向母校图书馆借的"学好跨平台网页设计第二版"这本书写得真好，我翻阅了一遍大致都是已熟习没必要再借，但其中jQuery Mobile部分语法表具有快速查阅价值，故综合之前笔记中所测试的功能整理如下，参考：

data-role 属性值列表：

jQuery Mobile 利用HTML5 的data-* 属性功能自订了一组data-role 自订属性， jQuery Mobile 的全部元件与版面配置都是靠data-role 控制与排版：

在这里插入图片描述

第一页除外的页面，其header 可用 data-add-back-btn=“true” 属性添加返回按钮，但预设是"Back", 可用 data-back-btn-text=“返回” 修改.

设定为controlgroup 的div 区块可以用data-type=“horizontal” 控制容器内元件为水平排列.

超联结按钮可用data-inline=“true” 设定宽度不占用萤幕宽(可容纳文字/图示即可), 以利按钮不分行配置(但超过5 个还是会跳行).

列表清单元件可用data-inset=“true” 设定清单内缩，不占用萤幕全宽. 其清单项目(li 元素) 可添加data-role=“list-divider” 属性作为分类项目，添加data-filter= “true” 则可在上面加上一个搜寻框.

按钮图示(data-icon 与data-iconpost) ：

data-icon 属性值说明action 动作alert 注意arrow-l 左箭头arrow-d 下箭头arrow-dl 下左箭头arrow-dr 下右箭头arrow-r 右箭头arrow-u 上箭头arrow-ul 上左箭头arrow-ur 上右箭头audio 音讯back 后退bars 横杠bullets 子弹calendar 日历camera 照相机carat-d 向下carat-l 向左carat-r 向右

carat-u 向下check 选取clock 时钟cloud 云端comment 评论delete 删除edit 编辑eye 眼睛forbidden 禁止forward 前进gear 齿轮(常用于设定)grid 网格heart 爱心home 首页info 讯息location 定位lock 上锁mail 邮件

navigation 导览phone 电话minus 减号plus 加号power 电源recycle 回收refresh 重新整理search 搜寻shop 购物star 星号tag 标签user 使用者video 音讯

data-iconpos 属性值说明left 按钮图示在左right 按钮图示在右top 按钮图示在上bottom 按钮图示在下notext 无文字(仅显示按钮图示)

3.主题布景(data-theme与 data-overlay-theme ) ：

data-[overlay-]theme 属性值说明a 预设主题 ab 备选主题 bc~z 自订主题c~z

换页特效(data-transition) ：

data-transition 属性值说明fade 淡入效果(预设)flip 翻转flow 原页面缩小移出, 新页面缩小移入后放大none 无特效pop 新页面跳出展开slide 原页面由右至左滑出, 新页面由右至左滑入slidedown 原页面由上至下滑出, 新页面由上至下滑入slidefade 原页面由右至左淡出, 新页面由右至左淡入slideup 原页面由下至上滑出, 新页面由下至上滑入turn 以页面中心为轴转换

超联结按钮动作属性data-rel ：

此属性用在超联结按钮之动作：

data-rel 属性值说明popup 跳出讯息窗dialog 开启对话框back 回上一页external 前往外部资源

jQuery Mobile 用超联结按钮切换页面时预设都是使用Ajax, 页面移出时会被放入暂存区以增进效能，但对于需动态从资料库更新者会造成资料不及时问题，可用data-ajax =“false” 属性关闭Ajax.

【jQuery Mobile】jQuery Mobile 语法小抄

猜你喜欢