您现在的位置： 365建站网 > 365文章 > jqueryMobile使用方法及实例分享

jqueryMobile使用方法及实例分享

文章来源：365jz.com     点击数：362    更新时间：2017-08-13 10:23   参与评论

jQuery Mobile是客户端代码，但其基于ajax技术与服务器端交互。因此拥有一个Web Service，才能更好的体验jQuery Mobile的功能。这里不打算介绍Web Service的搭建过程，朋友们可以根据自己的实际需要自行搭建。

示例一：

</>code
  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.  <div data-role="content">
  17.   <p>定位图标:</p>
  18.   <a href="#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>
  19.   <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右侧</a>
  20.   <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>
  21.   <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左侧</a>
  22.  </div>
  23.  <div data-role="footer">
  24.  <h1>底部文本</h1>
  25.  </div>
  26. </div> 
  27.  </body>
  28.  </html>

 演示图：

示例二：

</>code
  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. <div data-role="page" id="pageone">
  10.  <div data-role="header">
  11.   <h1>可折叠块</h1>
  12.  </div>
  13.  <div data-role="content">
  14.   <div data-role="collapsible">
  15.    <h1>点击我 - 我可以折叠！</h1>
  16.    <p>我是可折叠的内容。</p>
  17.   </div>
  18.  </div>
  19.  <div data-role="footer">
  20.   <h1>页脚文本</h1>
  21.  </div>
  22. </div> 
  23. </body>
  24. </html>

演示图

示例三：

</>code
  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. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  9.   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  10.   <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  11. </head>
  12. <body>
  13. <div data-role="page" id="pageone">
  14.  <div data-role="header">
  15.   <h1>可折叠集合</h1>
  16.  </div>
  17.  <div data-role="content">
  18.   <div data-role="collapsible-set">
  19.    <div data-role="collapsible">
  20.     <h3>点击我 - 我可以折叠！</h3>
  21.      <p>我是可折叠的内容。</p>
  22.    </div>
  23.    <div data-role="collapsible">
  24.     <h3>点击我 - 我可以折叠！</h3>
  25.     <p>我是可折叠的内容。</p>
  26.    </div>
  27.    <div data-role="collapsible">
  28.     <h3>点击我 - 我可以折叠！</h3>
  29.     <p>我是可折叠的内容。</p>
  30.    </div>
  31.    <div data-role="collapsible">
  32.     <h3>点击我 - 我可以折叠！</h3>
  33.     <p>我是可折叠的内容。</p>
  34.    </div>
  35.   </div>
  36.  </div>
  37.  <div data-role="footer">
  38.   <h1>在此插入底部文本</h1>
  39.  </div>
  40. </div> 
  41. </body>
  42. </html>

演示图：

示例四：

</>code
  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. <div data-role="page" id="pageone">
  23.  <div data-role="header">
  24.  <h1>自定义的列</h1>
  25.  </div>
  26.  <div data-role="content">
  27.   <p>三列样式布局：</p>
  28.   <div class="ui-grid-b">
  29.    <div class="ui-block-a"><span>第一个列</span></div>
  30.    <div class="ui-block-b"><span>第二个列</span></div>
  31.    <div class="ui-block-c"><span>第三个列</span></div>
  32.   </div>
  33.  </div>
  34. </div> 
  35. </body>
  36. </html>

演示图

示例五：

</>code
  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. <div data-role="page" id="pageone">
  11.  <div data-role="content">
  12.   <h2>有序列表：</h2>
  13.   <ol data-role="listview">
  14.    <li><a href="#">列表项</a></li>
  15.    <li><a href="#">列表项</a></li>
  16.    <li><a href="#">列表项</a></li>
  17.   </ol>
  18.   <h2>无序列表：</h2>
  19.   <ul data-role="listview">
  20.    <li><a href="#">列表项</a></li>
  21.    <li><a href="#">列表项</a></li>
  22.    <li><a href="#">列表项</a></li>
  23.   </ul>
  24.  </div>
  25. </div> 
  26. </body>
  27. </html>

演示图

在介绍过程中有不对的地方或不严谨的地方，欢予以纠正。感谢大家！

与其他教程不同的是，本教程都是通一个个实例进行展示。关键性介绍都会在代码中穿插。

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (362人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号