编程 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 相关文章推荐

JavaScript 加号(+)运算符号

Dec 06 Javascript

js操作textarea方法集合封装(兼容IE,firefox)

Feb 22 Javascript

Three.js源码阅读笔记(物体是如何组织的)

Dec 27 Javascript

javascript数组的使用

Mar 28 Javascript

jQuery验证插件validation使用指南

Apr 21 Javascript

js调用屏幕宽度的简单方法

Nov 14 Javascript

JavaScript实现Fly Bird小游戏

Dec 15 Javascript

@ResponseBody 和 @RequestBody 注解的区别

Mar 08 Javascript

Bootstrap标签页（Tab）插件切换echarts不显示问题的解决

Jul 13 Javascript

解决vue 项目引入字体图标报错、不显示等问题

Sep 01 Javascript

Vue实现push数组并删除的例子

Nov 01 Javascript

如何在Node和浏览器控制台中打印彩色文字

Jan 09 Javascript

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

You might like

PHP语法速查表

2006/12/06 PHP

php 伪静态之IIS篇

2014/06/02 PHP

php检测apache mod_rewrite模块是否安装的方法

2015/03/14 PHP

PHP二维数组矩形转置实例

2016/07/20 PHP

PHP中empty,isset,is_null用法和区别

2017/02/19 PHP

讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别

2007/04/12 Javascript

使用jQuery清空file文件域的解决方案

2013/04/12 Javascript

JQuery仿小米手机抢购页面倒计时效果

2014/12/16 Javascript

js中的事件捕捉模型与冒泡模型实例分析

2015/01/10 Javascript

JavaScript中的继承方式详解

2015/02/11 Javascript

jQuery.extend 函数及用法详细

2015/09/06 Javascript

JS 在数组指定位置插入/删除数据的方法

2017/01/12 Javascript

微信小程序之数据双向绑定与数据操作

2017/05/12 Javascript

vue-resource 拦截器（interceptor）的使用详解

2017/07/04 Javascript

最简单的JS实现json转csv的方法

2019/01/10 Javascript

Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解

2020/03/29 Javascript

JavaScript自定义超时API代码实例

2020/04/30 Javascript

小程序实现上下切换位置

2020/11/16 Javascript

Python字符串处理函数简明总结

2015/04/13 Python

对numpy中数组转置的求解以及向量内积计算方法

2018/10/31 Python

python浪漫表白源码

2019/04/05 Python

python def 定义函数,调用函数方式

2020/06/02 Python

Keras loss函数剖析

2020/07/06 Python

MAC平台基于Python Appium环境搭建过程图解

2020/08/13 Python

Web前端绘制0.5像素的几种方法

2017/08/11 HTML / CSS

CSS3 :not()选择器实现最后一行li去除某种css样式

2016/10/19 HTML / CSS

意大利灯具购物网站：Lampade.it

2018/10/18 全球购物

德国消费电子产品购物网站：Guter Kauf

2020/09/15 全球购物

门卫工作岗位职责

2013/12/17 职场文书

医学专业职业生涯规划范文

2014/02/05 职场文书

工作保证书范文

2014/04/29 职场文书

雷锋精神演讲稿

2014/05/13 职场文书

乡镇领导班子四风对照检查材料

2014/09/27 职场文书

买房协议书范本

2014/10/23 职场文书

学校通报表扬范文

2015/05/04 职场文书

环保建议书作文300字

2015/09/14 职场文书