jQuery Mobile 实例
jQuery Mobile 页�
一个基本的移动网页
多个页�
对�框
jQuery Mobile 页�切�
淡入效果
从���翻转效果
�动效果
弹出效果
滑动效果
从�到左滑动并淡入效果
从下到上滑动效果
从上到下滑动效果
翻页效果
没有切�效果
é¢ å€’æ•ˆæžœ
jQuery Mobile 按钮
创建按钮
内�按钮
组�按钮
�退按钮
带有圆角或�带有圆角的按钮
�尺寸或常规尺寸的按钮
带有阴影或�带有阴影的按钮
jQuery Mobile æŒ‰é’®å›¾æ ‡
æ·»åŠ å›¾æ ‡åˆ°æŒ‰é’®
定ä½�å›¾æ ‡
å�ªæ˜¾ç¤ºå›¾æ ‡
jQuery Mobile 工具æ �
创建头部æ �和尾部æ �
在头部æ �æ·»åŠ æŒ‰é’®
在头部æ �å·¦ä¾§æ·»åŠ æŒ‰é’®
在头部æ �å�³ä¾§æ·»åŠ æŒ‰é’®
带有按钮的尾部æ �
带有居ä¸å¯¹é½�按钮的尾部æ �
带有组å�ˆæŒ‰é’®çš„尾部æ �
带有水平组å�ˆæŒ‰é’®çš„尾部æ �
Inline 定ä½� - 头部æ �和尾部æ �与页é�¢å†…容内è�”
Fixed 定ä½� - 头部æ �和尾部æ �固定在页é�¢çš„顶部和底部
Fullscreen 定ä½� - 头部æ �和尾部æ �固定在页é�¢çš„顶部和底部,但是会é�®ä½�页é�¢å†…容
jQuery Mobile 导航æ �
创建导航æ �
内容ä¸çš„导航æ �
尾部ä¸çš„导航æ �
在导航æ �ä¸ä¸ºæŒ‰é’®æ·»åŠ è¢«é€‰ä¸ï¼ˆæŒ‰ä¸‹ï¼‰å¤–è§‚
æŒ�ç»æ·»åŠ è¢«é€‰ä¸ï¼ˆæŒ‰ä¸‹ï¼‰å¤–è§‚
定ä½�导航æ �ä¸çš„å›¾æ ‡
导航æ �ä¸ 10 个按钮的演示
jQuery Mobile å�¯æŠ˜å� å�—
创建å�¯æŠ˜å� 的内容å�—
当页é�¢åŠ è½½æ—¶å±•å¼€å†…å®¹
嵌套å�¯æŠ˜å� å�—
å�¯æŠ˜å� 集å�ˆ
å�–消å�¯æŠ˜å� å�—上的圆角
让å�¯æŠ˜å� å�—æ›´å°�
改å�˜å�¯æŠ˜å� å�—çš„å›¾æ ‡
å�¯æŠ˜å� 列表
å�¯æŠ˜å� 表å�•
jQuery Mobile ç½‘æ ¼
两列布局
三列布局
四列布局
五列布局
è‡ªå®šä¹‰ç½‘æ ¼
列内的多行
jQuery Mobile 列表
创建列表视图
带圆角的列表视图
列表分隔
自动分隔
创建�索过滤
改��索框内的文本
创建�读列表
ä¸ºåˆ—è¡¨é¡¹æ·»åŠ ç¼©ç•¥å›¾
æ·»åŠ HTML å…ƒç´ ï¼Œç”¨ä¿¡æ�¯å¡«å……列表项
æ·»åŠ å›¾æ ‡åˆ°åˆ—è¡¨é¡¹
创建带有分割按钮的列表
让列表项更具功能性
创建计数气泡
ä¸ºåˆ—è¡¨é¡¹åˆ›å»ºé»˜è®¤é“¾æŽ¥å›¾æ ‡
å�¯æŠ˜å� 列表
创建日历
jQuery Mobile 表�
文本输入框
文本输入域
�索输入框
�选按钮
�选框
水平组��选按钮和�选框
带有�选按钮和�选框的 Field 容器
预选ä¸å�•选按钮/å¤�选框
创建选择��
创建带有分隔(optgroup)的选择��
自定义选择��
在选择è�œå�•ä¸é€‰æ‹©å¤šä¸ªé€‰é¡¹
组�选择��
水平组�选择��
预选ä¸é€‰é¡¹
å�¯æŠ˜å� 表å�•
创建滑动�控件
高亮�出显示滑动�的值
创建拨动开关
预选䏿‹¨åЍ开关
jQuery Mobile 主题
主题 "a"
主题 "b"
主题头部�内容和尾部
主题对�框
主题按钮
ä¸»é¢˜å›¾æ ‡
头部和尾部的主题按钮
主题导航æ �
主题å�¯æŠ˜å� 按钮和内容
主题列表
主题分割按钮
主题å�¯æŠ˜å� 列表
主题表�
主题å�¯æŠ˜å� 表å�•
自定义主题
jQuery Mobile 触摸事件
点击(Tap)事件
点击�放(Taphold)事件
滑动(Swipe)事件
�左滑动(Swipeleft)事件
��滑动(Swiperight)事件
滚�开始(Scrollstart)事件
滚�结�(Scrollstop)事件
方�改�(Orientationchange)事件 - �示方�
æ–¹å�‘改å�˜ï¼ˆOrientationchange)事件 - 为纵å�‘和横å�‘设置ä¸�å�Œçš„æ ·å¼�
点我分享笔记