jquery mobile 学习(安装和页面)

学习资料 ：http://www.w3school.com.cn/jquerymobile/

安装 

  添加jquery mobile库

1:下载类库，添加到本地.

2:引用外网的js库.

 

从 CDN 引用 jQuery Mobile:

 1 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 

2 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

 3 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>  

jquery mobile 的样式。jquerymobile的js库。jquery 的js库 .

 
 
运行jquery mobile。
尽量在谷歌浏览器Chrome中运行。其他浏览器存在兼容性问题。
 
 

jquery mobile 的页面

  
 1 <div data-role="page">
 2 
 3   <div data-role="header">
 4     <h1>欢迎访问我的主页</h1>
 5   </div>
 6 
 7   <div data-role="content">
 8     <p>我是一名移动开发者！</p>
 9   </div>
10 
11   <div data-role="footer">
12     <h1>页脚文本</h1>
13   </div>
14 
15 </div>

 

 

 

 
 
解释:
data-role="page". :显示一个屏幕的标识
data-role="header":页面的头
data-role="content":页面的主体
data-role="footer":页面脚.
 一个html页面可以有多个page div.每一个用id区分. page div 的跳转用href+pageid.
page div的跳转也可以跳转到另一个html。
href跳转也可以设置成对话框。请添加 data-rel="dialog";
 
 
 
 
 
 1  <div data-role="page" id="page1">
 2         <div data-role="header"> 
 3         <h2>jquery mobile学习</h2>
 4         </div>
 5         
 6         <div data-role="content"> 
 7         
 8            <h1>创建page div page1</h1>
 9            <a href="#page2">跳转到page2</a>
10         
11         
12         </div>
13         <div data-role="footer">  
14         
15           <h2>底部导航栏</h2>
16         
17         </div>
18 
19      </div>
20      
21      
22       <div data-role="page" id="page2">
23         <div data-role="header"> 
24         <h2>jquery mobile学习</h2>
25         </div>
26         
27         <div data-role="content"> 
28         
29            <h1>创建page div page2</h1>
30            <a href="#page3"  data-rel="dialog" >跳转</a>
31         
32         
33         </div>
34         <div data-role="footer"> 
35          <h2>底部导航栏</h2>
36         </div>
37 
38      </div>
39      
40      
41      <div data-role="page" id="page3">
42         <div data-role="header"> 
43         <h2>jquery mobile学习</h2>
44         </div>
45         
46         <div data-role="content"> 
47         
48            <h1>创建page div page3</h1>
49            <a href="#page1">跳转</a>
50         
51         
52         </div>
53         <div data-role="footer"> 
54          <h2>底部导航栏</h2>
55         </div>
56 
57      </div>

 

    
 
 
 
 
href跳转到其他页面用的是jquery的ajax请求 ：
 

posted on 2016-12-23 11:12  kulinglei  阅读(75)  评论(0)    收藏  举报