编程 Javascript

jqueryMobile使用示例分享

Posted in Javascript onJanuary 12, 2016

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>

演示图：

jqueryMobile使用示例分享

示例二：

<!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>

演示图

jqueryMobile使用示例分享

示例三：

<!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>

演示图：

jqueryMobile使用示例分享

示例四：

<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>

演示图

jqueryMobile使用示例分享

示例五：

<!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>

演示图

jqueryMobile使用示例分享

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

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

jqueryMobile使用示例分享

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

超越Jquery_01_isPlainObject分析与重构

Oct 20 Javascript

关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法

Nov 30 Javascript

jquery 提交值不为空的元素示例代码

May 10 Javascript

JQuery解析HTML、JSON和XML实例详解

Mar 29 Javascript

js实现使用鼠标拖拽切换图片的方法

May 04 Javascript

AngularJs directive详解及示例代码

Sep 01 Javascript

微信小程序参数传递详解

Oct 24 Javascript

Bootstrap路径导航与分页学习使用

Feb 08 Javascript

JS实现课堂随机点名和顺序点名

Mar 09 Javascript

Vuex之理解state的用法实例

Apr 19 Javascript

微信小程序自定义导航教程（兼容各种手机）

Dec 12 Javascript

使用vue-element-admin框架从后端动态获取菜单功能的实现

Apr 29 Vue.js

WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现

Jan 12 #Javascript

WordPress中利用AJAX技术进行评论提交的实现示例

Jan 12 #Javascript

基于JavaScript实现div层跟随滚动条滑动

Jan 12 #Javascript

JavaScript继承模式粗探

Jan 12 #Javascript

轻松实现Bootstrap图片轮播

Apr 20 #Javascript

探析浏览器执行JavaScript脚本加载与代码执行顺序

Jan 12 #Javascript

学习JavaScript设计模式之策略模式

Jan 12 #Javascript