jqueryMobile使用示例分享

更新时间：2016年01月12日 15:51:11 投稿：hebedich

这里是本人学习jQuery Mobile的过程，现在将学习过程中的实例一一展现出来，希望能帮到更多的新手。本系列中实例都经过了本人的亲自测试。

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

示例一：

<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
   <title>jqueryMoblie</title>
 </head>
 <body>
   
<div data-role="page" id="pageone">
 <div data-role="header">
 <h1>图标</h1>
 </div>

 <div data-role="content">
  <p>定位图标:</p>
  <a href="#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>
  <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右侧</a>
  <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>
  <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左侧</a>
 </div>

 <div data-role="footer">
 <h1>底部文本</h1>
 </div>
</div> 
 </body>
 </html>

演示图：

示例二：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
 <div data-role="header">
  <h1>可折叠块</h1>
 </div>

 <div data-role="content">
  <div data-role="collapsible">
   <h1>点击我 - 我可以折叠！</h1>
   <p>我是可折叠的内容。</p>
  </div>
 </div>

 <div data-role="footer">
  <h1>页脚文本</h1>
 </div>
</div> 

</body>
</html>

演示图

示例三：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script> -->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
 <div data-role="header">
  <h1>可折叠集合</h1>
 </div>

 <div data-role="content">
  <div data-role="collapsible-set">
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠！</h3>
     <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠！</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠！</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠！</h3>
    <p>我是可折叠的内容。</p>
   </div>
  </div>
 </div>

 <div data-role="footer">
  <h1>在此插入底部文本</h1>
 </div>
</div> 

</body>
</html>

演示图：

示例四：

<html lang="zh_CN">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<style>
.ui-block-a, 
.ui-block-b, 
.ui-block-c 
{
background-color: lightgray;
border: 1px solid black;
height: 100px;
font-weight: bold;
text-align: center;
padding: 30px;
}
</style>
</head>
<body>

<div data-role="page" id="pageone">
 <div data-role="header">
 <h1>自定义的列</h1>
 </div>

 <div data-role="content">
  <p>三列样式布局：</p>
  <div class="ui-grid-b">
   <div class="ui-block-a"><span>第一个列</span></div>
   <div class="ui-block-b"><span>第二个列</span></div>
   <div class="ui-block-c"><span>第三个列</span></div>
  </div>
 </div>
</div> 

</body>
</html>

演示图

示例五：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
 <div data-role="content">
  <h2>有序列表：</h2>
  <ol data-role="listview">
   <li><a href="#">列表项</a></li>
   <li><a href="#">列表项</a></li>
   <li><a href="#">列表项</a></li>
  </ol>
  <h2>无序列表：</h2>
  <ul data-role="listview">
   <li><a href="#">列表项</a></li>
   <li><a href="#">列表项</a></li>
   <li><a href="#">列表项</a></li>
  </ul>
 </div>
</div> 

</body>
</html>

演示图

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

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

您可能感兴趣的文章:

jQuery使用经验小技巧(推荐)
下面小编就为大家带来一篇jQuery使用经验小技巧(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jQuery中live方法的重复绑定说明
使用jQuery的live()方法绑定事件，有时会出现重复绑定的情况，如，当点击一个按钮时，此按钮所绑定的事件会并执行n遍
2011-10-10
jQuery中[attribute^=value]选择器用法实例
这篇文章主要介绍了jQuery中[attribute^=value]选择器用法,实例分析了[attribute^=value]选择器的功能、定义及匹配以某些值开始的元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2014-12-12
基于jquery插件制作左右按钮与标题文字图片切换效果
制作左右按钮与标题文字图片切换效果的方法有很多，在本文为大家介绍下使用jquery图片切换插件是如何实现的，感兴趣的朋友不要错过
2013-11-11
jQuery创建及操作xml格式数据示例
这篇文章主要介绍了jQuery创建及操作xml格式数据,结合实例形式分析了jQuery针对xml格式数据的创建、解析、添加等相关操作技巧,需要的朋友可以参考下
2018-05-05
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
这篇文章主要介绍了jQuery创建自定义的选择器用以选择高度大于100的超链接,实例分析了jQuery自定义选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
jQuery实现的省市联动菜单功能示例【测试可用】
这篇文章主要介绍了jQuery实现的省市联动菜单功能,结合完整实例形式分析了jQuery实现级联菜单的具体流程与操作方法,涉及jQuery表单及数组元素的遍历及事件响应处理技巧.非常简单实用,需要的朋友可以参考下
2017-01-01
jQuery用FormData实现文件上传的方法
众所周知文件上传是Web开发中的重要话题，最直接和简单的方式是通过表单直接提交文件。下面这篇文章小编就来和大家分享jQuery利用FormData实现文件上传的方法，文中介绍的方法简单易懂，相信对大家的理解和学习很有帮助，有需要的朋友们下面来一起学习学习吧。
2016-11-11
jQuery实现全选&全不选&非全选
本文主要介绍了jQuery实现全选&全不选&非全选,具有很好的参考价值,下面跟着小编一起来看下吧
2017-03-03
Jquery通过ajax请求NodeJS返回json数据实例
本篇文章主要是介绍Jquery通过ajax请求NodeJS返回json数据，具有一定的参考价值，有需要的可以了解一下。
2016-11-11

jqueryMobile使用示例分享

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具