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

当然如果你喜欢看文档可以到官网仔细研究，不过喜欢快餐的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. 远程仓库版本回退方法 good

    1 简介 最近在使用git时遇到了远程分支需要版本回滚的情况,于是做了一下研究,写下这篇博客. 2 问题 如果提交了一个错误的版本,怎么回退版本? 如果提交了一个错误的版本到远程分支,怎么回退远程分支 ...

  2. Uninstall Tool 3.3.2.5315 简体中文注册版（彻底卸载软件）

    Uninstall Tool Uninstall Tool是CrystalIdea Software出品的一款强大而灵活的Windows标准“添加/删除程序”工具的替代软件.它能快速,安全而方便的删除 ...

  3. 《C语言程序设计现代方法》第3章 格式化输入/输出

    完整的细节将留到第22章中介绍. 调用printf函数一次可以打印的值的个数没有限制. 注意:C语言编译器不会检查格式串中转换说明的数量是否和输出项的数量相互匹配,也不会检查转换说明是否适合要显示项的 ...

  4. 关于 RecastNavigation 寻路结果异常的问题。

    由于我们的项目采用的寻路解决方案是:客户端使用 unity 原生的寻路系统,服务器采用 RecastNavigation 系统,而服务器的寻路数据来自于从 unity 导出的,所以理论上两边的寻路结果 ...

  5. cpp

  6. [置顶] 分析Java死锁:分析jstack日志

    本文中我将展示一段垃圾代码,这段代码会产生死锁,这样围绕这段代码重点展示三种不同的方法来分析线程日志,从而得知什么地方有问题. 下面的讨论将用到两个类 Account 和 DeadlockDemo c ...

  7. 在html使用a标签 直接下载图片 不通过后台实现直接下载

    由于a标签在HTML中链接图片会被识别并打开到网页上 如果想下载这个图片的话 就需要连接到后台读取文件并生成一个头信息下载.不过可以先给a标签加上一个download属性即可直接下载了. <a ...

  8. eclipse中建立tomcat容器

    步骤 1.  new - orther - server 出现下图,选择tomcat版本, 2. 选择已有的web项目至tomcat容器中,如果尚未建立,可不选. 3. 点击完成后,就会发现一个新建项 ...

  9. 连接数据库超时设置autoReconnect=true

    1,问题现象: com.mysql.jdbc.CommunicationsException: The last packet successfully received from the serve ...

  10. (9/18)重学Standford_iOS7开发_动画、自动布局_课程笔记

    最近开始实习,没多少时间更新了=_= 第九课: 1.上节课demo:Dropit完整实现 https://github.com/NSLogMeng/Stanford_iOS7_Study/commit ...