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 相关文章推荐
asp.net HttpHandler实现图片防盗链
Nov 09 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
elementUI多选框反选的实现代码
Apr 03 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP可变函数学习小结
2015/11/29 PHP
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python正则分析nginx的访问日志
2017/01/17 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
软件工程专业推荐信
2013/10/28 职场文书
欢迎词范文
2015/01/27 职场文书
武夷山导游词
2015/02/03 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
Python使用Web框架Flask开发项目
2022/06/01 Python