jQuery Mobile 学习

jQuery Mobile是创建移动web应用程序触控优化的框架,适用于流行智能手机和平板电脑,构建于jQuery之上.
它会自动为网页设计交互的易用外观,并在所有移动设计上保持一致.

页面添加

1.从CDN引用jQuery Mobile
2.从 jQuerymobile.com下载jQuery Mobile库

jQuery Mobile页面

用于通过jQuery Mobile为移动设备创建友好的交互外观

• data-role='page':浏览器中显示的页面
• data-role='header':在页面顶层创建工具条(通常用于标题,搜索按钮)
• data-role='main':定义页面的内容,例如文本,按钮等
• data-role='footer':用于创建页面底部工具条

对话框

显示信息或请求输入的视窗类型

• data-rel='dialog':用户点击(轻触)时创建一个对话框

过渡

实现从一页过渡到另一页面的css效果

• data-transition:过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交

实例

<div data-role='page' id="page1">
   <div data-role = 'header'>
    <a href="###" data-role='button' class="ui-btn-left">首页</a>
    <h1>标题</h1>
   </div>
   <div data-role = 'content'>
     <p>内容</p>
     <a href="#page2" data-rel='dialog'>跳转第二页</a>
     <!-- data-inline='true'设置内容撑开宽高-->
     <button data-inline='true'>按钮1</button>
     <input type="button"  value="按钮2" data-inline='true'/>
     <a href="###" data-role="button" data-inline='true'>按钮3</a>
   </div>
   <div data-role ='footer'>
     <h1>页脚</h1>
   </div>
  </div>
  <div id="page2" data-role = 'page'> 
   <a href="#page1">回到第一页</a>
  </div>

按钮

Mobile 应用程序是建立在您想要显示的简单的点击事物上。

创建的三种方式

• 使用 <button> 元素,用于表单提交
• 使用 <input> 元素,用于表单提交
• 使用 data-role="button" 的a元素,创建页面之间的链接

主题

jQuery Mobile 提供了五种不同的样式主题，从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块

• <div data-role="page" data-theme="a|b|c|d|e">

导航

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部

• data-role="navbar" 属性来定义导航栏

图标

按钮添加图标

按钮图标

表单

jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性

类型

• 文本输入框
• 搜索输入框
• 单选按钮
• 复选框
• 选择菜单
• 滑动控件
• 切换开关

jQuery Mobile事件

在 jQuery Mobile 中使用任何标准的 jQuery 事件

• 触摸事件:当用户触摸屏幕时触发(敲击和滑动)

触摸事件

• 滚动事件:当页面上下滚动

scrollstart 事件在用户开始滚动页面时被触发

• 页面事件:当页面被显示,隐藏,创建,加载以及卸载是触发

页面事件

• 方向事件:当设备垂直或水平旋转时触发

事件在用户垂直或水平旋转移动设备时被触发