zoukankan html css js c++ java

jqueryMobile

 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>

查看全文

相关阅读:
Idea主题下载
 使用plsql创建用户并授权(图形化界面)
PLSQL Developer 没有64位版本 + 找不到 msvcr71.dll
NOIp2017TG解题报告
 Restart
NOIp2018RP++
其他题
 Errors
NOIpDairy
Code Style for OI

原文地址：https://www.cnblogs.com/double405/p/5113082.html