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 属性进行的表单提交

实例

   

    首页
    
标题
   
   

     
内容
     跳转第二页
     
     按钮1
     
     按钮3
   
   

     
页脚
   
  
  
 
   回到第一页
  

按钮

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

创建的三种方式

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

主题

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

导航

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

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

图标

按钮添加图标

按钮图标

表单

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

类型

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

jQuery Mobile事件

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

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

触摸事件

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

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

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

页面事件

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

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