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使用示例分享

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

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

Javascript 相关文章推荐
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
Vue header组件开发详解
Jan 26 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
js实现时间日期校验
May 26 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
如何在Python对Excel进行读取
2020/06/04 Python
数据库面试要点基本概念
2013/10/31 面试题
一分钟演讲稿
2014/04/30 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
志愿者个人总结
2015/03/03 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript