jqueryMobile

時間 2019-11-10

原文原文鏈接

 1  <!DOCTYPE html>
 2  <html lang="zh-CN">
 3  <head>
 4      <meta charset="UTF-8">
 5      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
 6      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 7      <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 8      <title>jqueryMoblie</title>
 9  </head>
10  <body>
11      
12 <div data-role="page" id="pageone">
13   <div data-role="header">
14   <h1>圖標</h1>
15   </div>
16 
17   <div data-role="content">
18     <p>定位圖標:</p>
19     <a href="#link" data-role="button" data-icon="search" data-iconpos="top">頂部</a>
20     <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右側</a>
21     <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>
22     <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左側</a>
23   </div>
24 
25   <div data-role="footer">
26   <h1>底部文本</h1>
27   </div>
28 </div> 
29  </body>
30  </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
 5         <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 6         <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 7 </head>
 8 <body>
 9 
10 <div data-role="page" id="pageone">
11   <div data-role="header">
12     <h1>可摺疊塊</h1>
13   </div>
14 
15   <div data-role="content">
16     <div data-role="collapsible">
17       <h1>點擊我 - 我能夠摺疊！</h1>
18       <p>我是可摺疊的內容。</p>
19     </div>
20   </div>
21 
22   <div data-role="footer">
23     <h1>頁腳文本</h1>
24   </div>
25 </div> 
26 
27 </body>
28 </html>

 1 <!DOCTYPE html>
 2 <html lang="zh_CN">
 3 <head>
 4 <meta charset="utf-8">
 5 <!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
 6 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
 7 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script> -->
 8 
 9 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
10     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
11     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
12 </head>
13 <body>
14 
15 <div data-role="page" id="pageone">
16   <div data-role="header">
17     <h1>可摺疊集合</h1>
18   </div>
19 
20   <div data-role="content">
21     <div data-role="collapsible-set">
22       <div data-role="collapsible">
23         <h3>點擊我 - 我能夠摺疊！</h3>
24           <p>我是可摺疊的內容。</p>
25       </div>
26       <div data-role="collapsible">
27         <h3>點擊我 - 我能夠摺疊！</h3>
28         <p>我是可摺疊的內容。</p>
29       </div>
30       <div data-role="collapsible">
31         <h3>點擊我 - 我能夠摺疊！</h3>
32         <p>我是可摺疊的內容。</p>
33       </div>
34       <div data-role="collapsible">
35         <h3>點擊我 - 我能夠摺疊！</h3>
36         <p>我是可摺疊的內容。</p>
37       </div>
38     </div>
39   </div>
40 
41   <div data-role="footer">
42     <h1>在此插入底部文本</h1>
43   </div>
44 </div> 
45 
46 </body>
47 </html>

 1 <html lang="zh_CN">
 2 <head>
 3 <meta charset="utf-8">
 4 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
 5 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
 6 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
 7 <style>
 8 .ui-block-a, 
 9 .ui-block-b, 
10 .ui-block-c 
11 {
12 background-color: lightgray;
13 border: 1px solid black;
14 height: 100px;
15 font-weight: bold;
16 text-align: center;
17 padding: 30px;
18 }
19 </style>
20 </head>
21 <body>
22 
23 <div data-role="page" id="pageone">
24   <div data-role="header">
25   <h1>自定義的列</h1>
26   </div>
27 
28   <div data-role="content">
29    <p>三列樣式佈局：</p>
30    <div class="ui-grid-b">
31      <div class="ui-block-a"><span>第一個列</span></div>
32      <div class="ui-block-b"><span>第二個列</span></div>
33      <div class="ui-block-c"><span>第三個列</span></div>
34    </div>
35   </div>
36 </div> 
37 
38 </body>
39 </html>

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4 <meta charset="utf-8">
 5 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
 6 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
 7 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
 8 </head>
 9 <body>
10 
11 <div data-role="page" id="pageone">
12   <div data-role="content">
13     <h2>有序列表：</h2>
14     <ol data-role="listview">
15       <li><a href="#">列表項</a></li>
16       <li><a href="#">列表項</a></li>
17       <li><a href="#">列表項</a></li>
18     </ol>
19     <h2>無序列表：</h2>
20     <ul data-role="listview">
21       <li><a href="#">列表項</a></li>
22       <li><a href="#">列表項</a></li>
23       <li><a href="#">列表項</a></li>
24     </ul>
25   </div>
26 </div> 
27 
28 </body>
29 </html>

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4 <meta charset="utf-8">
 5 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
 6 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
 7 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
 8 </head>
 9 <body>
10 
11 <div data-role="page" id="pageone">
12   <div data-role="content">
13     <h2>列表分隔符</h2>
14     <ul data-role="listview">
15       <li data-role="list-divider">歐洲</li>
16       <li><a href="#">德國</a></li>
17       <li><a href="#">英國</a></li>
18       <li data-role="list-divider">亞洲</li>
19       <li><a href="#">中國</a></li>
20       <li><a href="#">印度</a></li>
21       <li data-role="list-divider">非洲</li>
22       <li><a href="#">埃及</a></li>
23       <li><a href="#">南非</a></li>
24     </ul>
25   </div>
26 </div> 
27 
28 </body>
29 </html>

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4 <meta charset="utf-8">
 5 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
 6 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
 7 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
 8 </head>
 9 <body>
10 
11 <div data-role="page" id="pageone">
12   <div data-role="header">
13     <a href="#" data-role="button" data-icon="home" data-theme="b">首頁</a>
14     <h1>歡迎來到個人主頁</h1>
15     <a href="#" data-role="button" data-icon="search" data-theme="e">搜索</a>
16   </div>
17 
18   <div data-role="content">
19    <p>此處是內容...</p>
20   </div>
21 
22   <div data-role="footer">
23     <a href="#" data-role="button" data-theme="b" data-icon="plus">在Facebook上關注我</a>
24     <a href="#" data-role="button" data-theme="c" data-icon="plus">在Twitter上關注我</a>
25     <a href="#" data-role="button" data-theme="e" data-icon="plus">在Instagram上關注我</a>
26   </div>
27 </div> 
28 
29 </body>
30 </html>

相關標籤/搜索

jquerymobile

android+cordova+jquerymobile

JQuery

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。