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

当然如果你喜欢看文档可以到官网仔细研究，不过喜欢快餐的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. 未能找到类型或命名空间名称DbContext

    Visual Studio调试 .NET 项目时报错: 未能找到类型或命名空间名称“DbContext” 解决办法: 首先 右键 引用——System.Data.Entity 其次,在自己项目里搜索E ...

  3. C# Winform 实现自定义半透明loading加载遮罩层

    在网页中通过div+css实现半透明效果不难,今天我们看看一种在winfrom中实现的方法: 效果图如下,正常时: 显示遮罩层时: 自定义遮罩层控件的源码如下: View Row Code 1 usi ...

  4. Red and Black

    Red and Black Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  5. Climbing Worm

    Climbing Worm Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  6. 进军es6(1)---初识es6

    es6,全称ECMAScript6(又名es2015).何为ECMAScript?我们常说的Javascript和它又有什么联系呢? 阮一峰老师有一句话描述的比较准确:“ECMAScript是Java ...

  7. [MarsZ]ThinkPHP项目实战总结

    本文原word格式百度云盘下载地址: http://pan.baidu.com/s/1qYqZFkg 综述 2 需求 2 作者 2 系统一览 2 Unity3d客户端 2 PHP后台 4 准备 6 X ...

  8. JAVA vo pojo javabean dto的区别

    JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公共方法将内部域暴露成员属性 ...

  9. [洛谷U990]传递游戏（90分）

    [题目描述 Description] n个人在做传递物品的游戏,编号为1-n. 游戏规则是这样的:开始时物品可以在任意一人手上,他可把物品传递给其他人中的任意一位:下一个人可以传递给未接过物品的任意一 ...

  10. mongoDB启动参数备忘

    本文转载 Mongodb启动命令mongod参数说明   mongod的主要参数有:    基本配置   ----------------------------------------------- ...