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

当然如果你喜欢看文档可以到官网仔细研究，不过喜欢快餐的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. Knockout绑定audio的pause事件导致音频无法停止

    ...时间过得真快, 一晃4天已经过去了, 然而自己并没有动笔写什么. 自省. 看了看今天的工作, 感觉好像没什么可写的. 不禁在想是不是一天一篇有点儿难. 再一想, 这分明就是在给自己找理由. 就是 ...

  2. 转：十八、java中this的用法

    http://blog.csdn.net/liujun13579/article/details/7732443 我知道很多朋友都和我一样:在JAVA程序中似乎经常见到“this”,自己也偶尔用到它, ...

  3. 【HDOJ】1160 FatMouse's Speed

    DP. #include <stdio.h> #include <string.h> #include <stdlib.h> #define MAXNUM 1005 ...

  4. Centos6.5 安装Vim7.4

    系统本身会带Vim7.2都版本,其实也够用,强迫症患者可以按以下操作升级成Vim7.4: (1)切换到root权限 (2)卸载 rpm -qa | grep vim yum remove vim vi ...

  5. ldr指令总结

    LDR/STR字和无符号字节加载/存储 1,LDR Rd,[Rn]   2, LDR Rd,[Rn,Flexoffset] 3, LDR Rd,[Rn],Flexoffset 4, LDR Rd,la ...

  6. Keepass 2.x 的一些新发现

    近期将 Keepass 从 1.22 升级到了 2.24,经过一番折腾,发现有了很多新功能,也有一些之前被忽视的地方.再一次感叹这个软件的强大,向作者的无私奉献致敬! 其实,这个软件一直有 1.x 和 ...

  7. Bzoj 1976: [BeiJing2010组队]能量魔方 Cube 最小割,最大流

    1976: [BeiJing2010组队]能量魔方 Cube Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 879  Solved: 304[Submi ...

  8. parseSdkContent failed Could not initialize class android.graphics.Typeface

    Deleting ".android" is temporarily fixing the problem with me as after sometime it begins ...

  9. Oracle ROWNUM用法和分页查询总结（转）

    [转载] Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. Oracle分页查询格式(一):http://yangtingkun.itpub.net/post/468/100278 ...

  10. 利用xshell从windows上传文件到虚拟机

    Xshell实现Windows上传文件到Linux主机 经常有这样的需求,我们在Windows下载的软件包,如何上传到远程Linux主机上?还有如何从Linux主机下载软件包到Windows下:之前我 ...