由于项目中用到了，就去看了一下视频，然后进一步的找找资源，最后自己再总结一遍！（就是动手操作一遍，不论你感觉多简单，只有动手之后，你才有可能有收获）

当然如果你喜欢看文档可以到官网仔细研究，不过喜欢快餐的lz推荐一个链接

菜鸟教程网：http://www.runoob.com/jquerymobile/jquerymobile-ref-css.html

当然你想最直接的接触它，那就下载lz提供的demo 底部有链接地址！

下面我分享几张demo中的截图 这个看着比较直观一些！

               

               

为了显得比较专业：还是贴一点代码，也是来自底部分享的例子中的！

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 -->
  6.     <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
  7.  
  8.     <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css" />
  9.  
  10.     <script src="../js/jquery.js"></script>
  11.     <script src="../js/jquery.mobile-1.0.1.min.js"></script>
  12.  
  13.     <script type="text/javascript">
  14.  
  15.     </script>
  16. </head>
  17. <body>
  18. <div data-role="page" id="pageone">
  19.     <div data-role="content">
  20.         <h2>包含缩略图和文本的列表：</h2>
  21.         <ul data-role="listview" data-inset="true">
  22.             <li>
  23.                 <a href="#">
  24.                     <img src="chrome.png">
  25.                     <h2>Google Chrome</h2>
  26.                     <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p>
  27.                 </a>
  28.             </li>
  29.             <li>
  30.                 <a href="#">
  31.                     <img src="firefox.png">
  32.                     <h2>Mozilla Firefox</h2>
  33.                     <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p>
  34.                 </a>
  35.             </li>
  36.         </ul>
  37.     </div>
  38.  
  39.     <div data-role="content">
  40.         <h2>我的邮箱</h2>
  41.         <ul data-role="listview" data-inset="true">
  42.             <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>
  43.             <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>
  44.             <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>
  45.         </ul>
  46.     </div>
  47.  
  48.     <div data-role="header">
  49.         <h1>可折叠列表</h1>
  50.     </div>
  51.  
  52.     <div data-role="content">
  53.         <div data-role="collapsible">
  54.             <h4>A</h4>
  55.             <ul data-role="listview">
  56.                 <li><a href="#">Adam</a></li>
  57.                 <li><a href="#">Angela</a></li>
  58.             </ul>
  59.         </div>
  60.  
  61.         <div data-role="collapsible">
  62.             <h4>B</h4>
  63.             <ul data-role="listview">
  64.                 <li><a href="#">Bill</a></li>
  65.                 <li><a href="#">Bob</a></li>
  66.             </ul>
  67.         </div>
  68. </div>
  69.  
  70. </body>
  71. </html>

Demo下载地址：http://download.csdn.net/detail/u012922417/9133103

jquery mobile入门资料的更多相关文章

  1. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  2. jQuery Mobile 入门基础教程

    jQuery Mobile是jQuery在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架. jQue ...

  3. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  4. 【学习】一本案例驱动的jQuery Mobile入门书

    清华大学出版社推出的<构建跨平台APP:jQuery Mobile移动应用实战> 提供的全是jQuery Mobile的案例: 手机入侵 题库应用 音乐专辑 通讯录 新闻列表 销售排名 九 ...

  5. jQuery Mobile入门教程

    简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...

  6. jquery mobile 入门

    简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程 ...

  7. jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: &l ...

  8. 小强的HTML5移动开发之路（23）—— jQuery Mobile入门

    一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功后如下图 解压目录如图: 点击index.html进入d ...

  9. 开发者必读jQuery Mobile入门教程

    你每天都会对着它讲话,和它玩游戏,用它看新闻——没错,它就是你裤兜里的智能手机.android,黑莓还是iphone?为了让你清楚意识到究竟哪些才算是智能手机,我在下面总结了一个智能手机系统/设备的列 ...

随机推荐

  1. android视频播放

    视频播放我们用到的是MediaPlayer,显示控件使用的surfaceView 我们向SD卡中先添加个视频文件,我的是xajh.3gp,不要用mp4,MP4会出现 should have subti ...

  2. 在老项目中使用Gradle：更改默认目录结构

    apply plugin: 'war' sourceCompatibility = 1.5 version = "1.0" //中央仓库 repositories { mavenC ...

  3. [译]GotW #1: Variable Initialization

    原文地址:http://herbsutter.com/2013/05/09/gotw-1-solution/ 第一个问题强调的是要明白自己在写什么的重要性.下面有几行简单的代码--它们大多数之间都有区 ...

  4. message 匹配不上grok正则 也会写入到elasticsearch

    { "message" => "scan test 20161201", "@version" => "1" ...

  5. 17.1.2 Replication Formats

    17.1.2 Replication Formats 复制格式 17.1.2.1 Advantages and Disadvantages of Statement-Based and Row-Bas ...

  6. menuconfig选项

    打开一个典型的openwrt中package目录下都能发现两个相同点: ? package/<name> /Makefile ? package/<name> /patches ...

  7. Node.js权威指南 (12) - Node.js中的其他模块

    12.1 使用dns模块解析域名 / 313 12.1.1 使用resolve方法将域名解析为DNS记录 / 313 12.1.2 使用lookup方法查询IP地址 / 315 12.1.3 使用re ...

  8. Cocoapods 64-bit(iPhone5s) 问题解决方案

    把 主工程 和 Pods 中的所有的 Architectures --> Architectures 改为 Standard architectures(arvmv7, armv7s), 去掉 ...

  9. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

  10. Android开发必知--几种不同对话框的实现

    在开发过程中,与用户交互式免不了会用到对话框以实现更好的用户体验,所以掌握几种对话框的实现方法还是非常有必要的.在看具体实例之前先对AlertDialog做一个简单介绍.AlertDialog是功能最 ...