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 相关文章推荐
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
js遍历td tr等html元素
Dec 13 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
浅谈vuex之mutation和action的基本使用
Aug 29 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JS 统计时间
2021/03/09 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
python自定义类并使用的方法
2015/05/07 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
毕业生自我推荐
2013/11/04 职场文书
《阳光》教学反思
2014/02/23 职场文书
授权委托书(完整版)
2014/09/10 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
论文答谢词
2015/01/20 职场文书
业务员岗位职责
2015/02/03 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
人事任命书范本
2015/09/21 职场文书
工作报告范文
2019/06/20 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
详细聊聊vue中组件的props属性
2021/11/02 Vue.js