NFH.019 - JQueryMobile入门

---

2.28学习经验分享#

Bruce_Zhu于2017.2.28

---

一. JQueryMobile

1. jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

2. JQM主要分为四部分：

   页面&导航
   CSS框架
   组件
   表单控件

3 使用JQM的步骤

1） 项目中引入jquery1.8+版本

2） 项目创建jqm目录，引入jqm必需资源文件

jquery-mobile.css
jquery-mobile.js
images/...

3. 创建html文件，引入必需的css和js,并设置viewport

 
  
body中data-role="page"元素
 
  
 
注意： jqm的html文件中，body中必须至少有一个page，若用户未提供，jqm自动添加
 
 
body中可以声明多个page,但默认只有第一个可以显示
 
 
jqm中的所有的网页内容不能直接至于body中，必须至于page中
 
 
jqm中的所有样式都是通过预定义class来设置的，开发者可以指定元素的class,也可以为元素指定data-*扩展属性来实现让jqm添加class的功能
 
 
二. jqueryMobile-page跳转及过场动画
 
 
 
  
页面跳转可以使用a/button/input等，推荐使用a-会自动添加过场动画
 
  
可以跳转到外部的完整HTML页面；也可以跳转到当前HTML中的另一个page,如
 
 
 
 
 1)跳转到外部完整的HTML页面

   

 2)跳转到当前HTML中的另一个page

   

 3) 已模态框形式打开另一个page

    
 
 
 
  
 
JQM为页面切换添加了非常丰富的过渡动画，使用方法
 
 
可用的动画效果有：
 
fade:默认动画
 pop:弹出动画
 slide:滑动动画
 slideup:向上滑动动画
 trun:翻转动画
 flip:翻转动画
 flow:流动动画
 none:无动画
 
 
 
 
 
三. jqueryMobile-按钮
 
 
 
  
可以使用A.button.input元素实现按钮的样式
 
  
可以使用data-role="button"属性实现按钮样式，也可以指定class实现按钮的样式，如ui-btn ui-corner-all ui-shadow
 
  
按钮默认是块级显示，可以使用ui-btn-inline实现行内按钮
 
  
按钮上可以有文字和图标，若存在图标，必须指定与文字的位置关系,可选值
 btn-icon-left
 btn-icon-right
 btn-icon-bottom
 btn-icon-top
 
 
 
 
创建带图标的按钮，图标功能：后退，前进，刷新，配置，用户，定位，主页，对勾....
 
 
 
  
按钮可以放到page的header里
 
 
 
 
 header中的第一个按钮默认处于左侧，第二个按钮处于右侧，一般只放两个
 
 


   按钮 默认就是按钮效果

 
 
 
四. jqueryMobile-导航条
 
 
 
  
 
基本结构
 

  

    

  

 
 
  
 
注意
 
导航条中一般最多只能有五个项目，超过5个会在一行中显示2个
 
导航条可以出现在page的Header/Main/Footer
 
处于Header和Footer中的navbar默认会占满整行，并和标题字错开
 
 
 
 
 
五. jqueryMobile-load加载器
 
 
显示加载器： $.mobile.loading("show");
 
 
取消加载器：$.mobile.loading("hide");
 
 
六. jqueryMobile-panel(面板)
 
 
1）面板在目前版本的jqp中只能放在page中，header之前和footer之后
 
 
     


          


          


          


              打开面板

          

          


          


     
 
 
 
  
 
面板组件可以指定出现位置和打开方式
 
  data-position="left/right"

  data-display = "reveal/overlay/push"
 
 
 
 
 
七. jqueryMobile-折叠组件(collapsible)和手风琴效果(collapsibleset)
 
 
 
  
 
折叠组件
 

  
标题字
  
折叠的内容

 
 
  
 
手风琴
 


   

     
标题字
     
折叠的内容
   

   

     
标题字
     
折叠的内容