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

当然如果你喜欢看文档可以到官网仔细研究，不过喜欢快餐的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. Android 通过代码设置radiobutton不同方位图标的两种方法

    更换radiobutton中的图片在xml中很好设置,但对于初学者如何在代码中设置还是不容易找的.没法子,通过看原版api找到两个方法,setCompoundDrawables和setCompound ...

  2. ChannelFactory.Endpoint 上的地址属性为空。ChannelFactory 的终结点必须指定一个有效的地址。

    主体代码如下 IServiceA proxyA; ChannelFactory<IServiceA> factoryA = new ChannelFactory<IServiceA& ...

  3. Apache Struts 远程代码执行漏洞(CVE-2013-4316)

    漏洞版本: Apache Group Struts < 2.3.15.2 漏洞描述: BUGTRAQ ID: 62587 CVE(CAN) ID: CVE-2013-4316 Struts2 是 ...

  4. Centos6.4 设置开机自动以某个非root用户启动脚本

    开机自动运行脚本,可以将脚本的执行命令放在 /etc/rc.d/rc.local 文件中,但是这样开机自动运行这个脚本的用户默认为root. 如果想以某个非root用户运行脚本,可以使用如下命令: s ...

  5. linux中替换目录下的某个文件中包含的IP地址

    #!/bin/bash #set -x oldIP=172.17.39.135 newIP=172.17.98.115 homefile=/usr/local/ims/ filelist=`grep ...

  6. NodeJS with Express 4.x

    Express 4.x 静态资源目录设置: //静态文件目录 app.use('/public', express.static(__dirname+'/public')); app.use('/da ...

  7. HTML5与CSS3权威指南.pdf7

    第14章 使用选择器在页面中插入内容 使用选择器来插入文字图片 上一章提到过使用before和after伪类为某个元素之前或之后插入内容 h2:after{content:'12345'},也可以指定 ...

  8. JS中多个onload冲突解决办法

    一  多个window.onload冲突 在一个页面中有两个JavaScript 分别都用到了window.onload一个是:window.onload=externallinks,另一个是:win ...

  9. linux下如何执行PHP脚本

    Linux 下如何直接执行 php 脚本? 下面是部分 php 命令行参数. 用法 php [-q] [-h] [-s] [-v] [-i] [-f ] | { [args...]} -q 安静模式, ...

  10. Clojure学习资料

    以下大部分收藏自博客:http://blog.csdn.net/ithomer/article/details/17225813 官方文档: http://clojure.org/documentat ...