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 相关文章推荐
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
Mar 13 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
vue+iview分页组件的封装
Nov 17 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
You might like
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
jQuery.extend 函数详解
2012/02/03 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python中类的初始化特殊方法
2017/12/01 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
基于Python实现简单学生管理系统
2020/07/24 Python
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
办公室文秘岗位职责
2013/11/15 职场文书
会计应届生的自荐信
2013/12/13 职场文书
单位未婚证明范本
2014/01/18 职场文书
体育节口号
2014/06/19 职场文书
民族学专业求职信
2014/07/28 职场文书
代领毕业证委托书
2014/08/02 职场文书
2014年教务工作总结
2014/12/03 职场文书
会计工作态度自我评价
2015/03/06 职场文书
golang中的空接口使用详解
2021/03/30 Python
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
Python序列化模块JSON与Pickle
2022/06/05 Python