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

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

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

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

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

               

               

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 -->

    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

    <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.min.css" />

    <script src="../js/jquery.js"></script>

    <script src="../js/jquery.mobile-1.0.1.min.js"></script>

    <script type="text/javascript">

    </script>

</head>

<body>

<div data-role="page" id="pageone">

    <div data-role="content">

        <h2>包含缩略图和文本的列表：</h2>

        <ul data-role="listview" data-inset="true">

            <li>

                <a href="#">

                    <img src="chrome.png">

                    <h2>Google Chrome</h2>

                    <p>Google Chrome 是免费的开源 web 浏览器。发布于 2008 年。</p>

                </a>

            </li>

            <li>

                <a href="#">

                    <img src="firefox.png">

                    <h2>Mozilla Firefox</h2>

                    <p>Firefox 是来自 Mozilla 的 web 浏览器。发布于 2004 年。</p>

                </a>

            </li>

        </ul>

    </div>

    <div data-role="content">

        <h2>我的邮箱</h2>

        <ul data-role="listview" data-inset="true">

            <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>

            <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>

            <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>

        </ul>

    </div>

    <div data-role="header">

        <h1>可折叠列表</h1>

    </div>

    <div data-role="content">

        <div data-role="collapsible">

            <h4>A</h4>

            <ul data-role="listview">

                <li><a href="#">Adam</a></li>

                <li><a href="#">Angela</a></li>

            </ul>

        </div>

        <div data-role="collapsible">

            <h4>B</h4>

            <ul data-role="listview">

                <li><a href="#">Bill</a></li>

                <li><a href="#">Bob</a></li>

            </ul>

        </div>

</div>

</body>

</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. 匿名hash

    [root@oadb test]# cat a1.pl use Data::Dumper; my @a=qw/1 3 5 7 9/; push @b ,{@a}; print Dumper(@b); ...

  2. Oracle - Unprocessed Material

    create table kol.MTL_MATERIAL_TRANS_TMP_140325 as select * from MTL_MATERIAL_TRANSACTIONS_TEMP ; upd ...

  3. Oracle core03_ACID

    ACID特性 oracle如何使用undo和redo来保证了关系数据库的ACID特性. ACID的特性简单描述为: Atomic:以事务为单位的原子性 Consistency:保证数据一致性 Isol ...

  4. Javascript自动换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Unity3D常见技术点(持续更新)

    一:获取对象, 添加对象等 1:使用prefab生成对象 GameObject ballObj = GameObject.Instantiate(Resources.Load(, Quaternion ...

  6. [转]NHibernate之旅(7)：初探NHibernate中的并发控制

    本节内容 什么是并发控制? 悲观并发控制(Pessimistic Concurrency) 乐观并发控制(Optimistic Concurrency) NHibernate支持乐观并发控制 实例分析 ...

  7. StringHelpers

    public class StringHelpers { public const char QUERY_STRING_DELIMITER = '&'; private static Rijn ...

  8. 【转】.NET 三层架构 中 DAL+IDAL+Model+BLL+Web

    其实三层架构是一个程序最基本的 在.Net开发中通常是多层开发 比如说 BLL 就是business Logic laywer(业务逻辑层) 他只负责向数据提供者也就是DAL调用数据 然后传递给 客户 ...

  9. input hidden用法

    之前获取数据传数据,都是写在全局变量里,今天老板告诉我说用input hidden来存,我百度了一下,确实是个好方法,记录之: 1 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或 ...

  10. poj 1654 Area（多边形面积）

    Area Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17456   Accepted: 4847 Description ...