<!DOCTYPE html>

  <html lang="zh-CN">

  <head>

      <meta charset="UTF-8">

      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

      <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

      <title>jqueryMoblie</title>

  </head>

  <body>

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

   <div data-role="header">

   <h1>图标</h1>

   </div>

   <div data-role="content">

     <p>定位图标:</p>

     <a href="#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>

     <a href="#link" data-role="button" data-icon="search" data-iconpos="right">右侧</a>

     <a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">底部</a>

     <a href="#link" data-role="button" data-icon="search" data-iconpos="left">左侧</a>

   </div>

   <div data-role="footer">

   <h1>底部文本</h1>

   </div>

 </div>

  </body>

  </html>
 <!DOCTYPE html>

 <html>

 <head>

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

         <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

         <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 </head>

 <body>

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

   <div data-role="header">

     <h1>可折叠块</h1>

   </div>

   <div data-role="content">

     <div data-role="collapsible">

       <h1>点击我 - 我可以折叠！</h1>

       <p>我是可折叠的内容。</p>

     </div>

   </div>

   <div data-role="footer">

     <h1>页脚文本</h1>

   </div>

 </div> 

 </body>

 </html>
 <!DOCTYPE html>

 <html lang="zh_CN">

 <head>

 <meta charset="utf-8">

 <!-- <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">

 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script> -->

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

 </head>

 <body>

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

   <div data-role="header">

     <h1>可折叠集合</h1>

   </div>

   <div data-role="content">

     <div data-role="collapsible-set">

       <div data-role="collapsible">

         <h3>点击我 - 我可以折叠！</h3>

           <p>我是可折叠的内容。</p>

       </div>

       <div data-role="collapsible">

         <h3>点击我 - 我可以折叠！</h3>

         <p>我是可折叠的内容。</p>

       </div>

       <div data-role="collapsible">

         <h3>点击我 - 我可以折叠！</h3>

         <p>我是可折叠的内容。</p>

       </div>

       <div data-role="collapsible">

         <h3>点击我 - 我可以折叠！</h3>

         <p>我是可折叠的内容。</p>

       </div>

     </div>

   </div>

   <div data-role="footer">

     <h1>在此插入底部文本</h1>

   </div>

 </div> 

 </body>

 </html>
 <html lang="zh_CN">

 <head>

 <meta charset="utf-8">

 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">

 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

 <style>

 .ui-block-a,

 .ui-block-b,

 .ui-block-c

 {

 background-color: lightgray;

 border: 1px solid black;

 height: 100px;

 font-weight: bold;

 text-align: center;

 padding: 30px;

 }

 </style>

 </head>

 <body>

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

   <div data-role="header">

   <h1>自定义的列</h1>

   </div>

   <div data-role="content">

    <p>三列样式布局：</p>

    <div class="ui-grid-b">

      <div class="ui-block-a"><span>第一个列</span></div>

      <div class="ui-block-b"><span>第二个列</span></div>

      <div class="ui-block-c"><span>第三个列</span></div>

    </div>

   </div>

 </div> 

 </body>

 </html>
 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">

 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

 </head>

 <body>

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

   <div data-role="content">

     <h2>有序列表：</h2>

     <ol data-role="listview">

       <li><a href="#">列表项</a></li>

       <li><a href="#">列表项</a></li>

       <li><a href="#">列表项</a></li>

     </ol>

     <h2>无序列表：</h2>

     <ul data-role="listview">

       <li><a href="#">列表项</a></li>

       <li><a href="#">列表项</a></li>

       <li><a href="#">列表项</a></li>

     </ul>

   </div>

 </div> 

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">

 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

 </head>

 <body>

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

   <div data-role="content">

     <h2>列表分隔符</h2>

     <ul data-role="listview">

       <li data-role="list-divider">欧洲</li>

       <li><a href="#">德国</a></li>

       <li><a href="#">英国</a></li>

       <li data-role="list-divider">亚洲</li>

       <li><a href="#">中国</a></li>

       <li><a href="#">印度</a></li>

       <li data-role="list-divider">非洲</li>

       <li><a href="#">埃及</a></li>

       <li><a href="#">南非</a></li>

     </ul>

   </div>

 </div> 

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.css">

 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

 <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>

 </head>

 <body>

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

   <div data-role="header">

     <a href="#" data-role="button" data-icon="home" data-theme="b">首页</a>

     <h1>欢迎来到我的主页</h1>

     <a href="#" data-role="button" data-icon="search" data-theme="e">搜索</a>

   </div>

   <div data-role="content">

    <p>此处是内容...</p>

   </div>

   <div data-role="footer">

     <a href="#" data-role="button" data-theme="b" data-icon="plus">在Facebook上关注我</a>

     <a href="#" data-role="button" data-theme="c" data-icon="plus">在Twitter上关注我</a>

     <a href="#" data-role="button" data-theme="e" data-icon="plus">在Instagram上关注我</a>

   </div>

 </div> 

 </body>

 </html>

jqueryMobile的更多相关文章

  1. html5+jqueryMobile编写App推广注册页

    html5+jqueryMobile的组合可以直接开发web版的app,所以用到我当前app中的推广注册页的编写是很恰当的,其实只要你熟悉html4+jquery的组合开发,那么html5+jquer ...

  2. [deviceone开发]-do_Webview加载JQueryMobile的示例

    一.简介 JQueryMobile是JQuery的移动版,不过它并没有像JQuery那么成功.我们只是使用JQueryMobile来展示do_Webview加载第三方js框架.适合所有开发者.二.效果 ...

  3. jQueryMobile示例页面代码

    这是一个jQueryMobile示例页面 示例效果:http://hovertree.com/texiao/jquerymobile/ 可以在手机或者触屏浏览器查看效果. 以下是HTML代码: < ...

  4. jQueryMobile 网页在UC等游览器上无法正常显示或者是无法自适应设备大小，但在QQ游览器上能正常显示的解决方法

    造成jQueryMobile网页在QQ游览器上能正常显示,在UC等游览器上无法正常显示或者是无法自适应设备大小的解决方法: 在<head>标签间添加<meta name=" ...

  5. jQueryMobile引入文件后样式无法正常显示

    jQueryMobile引入文件后样式无法正常显示解决方法: jQuery文件必须放在jQueryMobile文件之前 eg:

  6. jquerymobile仿微信 - 01

    jquerymobile仿微信 - 01 jquerymobile的组件感觉不咋地哇 本地调试最好是开一个web server,不然数据访问会有问题 <div data-role="p ...

  7. Jquerymobile 简单安装

    需要导入三个文件jquery,jquerymobile,css(jquerymobile地址:http://jquerymobile.com/) <script src="js/jqu ...

  8. jquerymobile页面跳转和参数传递

    http://blog.csdn.net/chen052210123/article/details/7481578 页面跳转: 页面跳转时pagebeforechange事件会被触发两次,通过$(d ...

  9. jquery-mobile之loading加载自定义

    用jquery-mobile的时候,我们发现文档中loading是直接通过标签属性进行渲染,封装的函数必须通过点击按钮才能执行.而实际运用中,我们的加载开始和结束可能不需要点击,而是通过某个函数调用直 ...

  10. JqueryMobile入门基础附源码下载

    最近要做一个手机版的网站,所以就了解了一点JqueryMObile,下面是我整理的笔记,现在分享给大家,希望朋友们喜欢,先给个首页看看吧!!! 一.JqueryMobile基本页面结构 <!DO ...

随机推荐

  1. opencv 人脸识别 （一）训练样本的处理

    本文实现基于eigenface的人脸检测与识别.给定一个图像数据库,进行以下步骤: 进行人脸检测,将检测出的人脸存入数据库2 对数据库2进行人脸建模 在测试集上进行recognition   本篇实现 ...

  2. OpenCV4Android——No implementation found for native Lorg/opencv/core/Mat;.n_Mat ()J

    ok 12-17 08:13:10.461: W/dalvikvm(540): No implementation found for native Lorg/opencv/core/Mat;.n_M ...

  3. oracle数据库sql的基本使用

    整理了下关于oracle数据库中SQL的基本使用语句,整理如下,方便记忆. oracle的基本术语 数据字典,数据库元数据信息的数据字典表和用户可以读取的数据字典视图组成.存放oracle数据库所用的 ...

  4. MongoDB操作(.net)

    一.查询 var doc = new Document(); 1.模糊查询var reg = new MongoRegex(".*" + qry.名称 + ".*&quo ...

  5. Win XP 如何禁用屏保

    如果你试过 “在桌面空白处点击右键-[属性]-[屏幕保护程序],选择[无],点击[确定]”后,当时是可以去掉屏保.但如果重启计算机或者从待机状态唤醒后,屏保依然会出现,那么你可以试试下面的方法. 首先 ...

  6. Volley HTTP库系列教程(1)简介及优点

    Transmitting Network Data Using Volley Get  started Dependencies and prerequisites Android 1.6 (API ...

  7. 关于在c#中引用外部dll文件，在页面中找不到命名空间

    最近在项目中碰到这样的问题,经过搜索,发现是vs2010的版本不对,VS默认的版本是.NET Framework 4 Client Profile,需要将他更改为.NET Framework 4 版本 ...

  8. JAVA的序列化与反序列化

    一.为什么要进行序列化 再介绍之前,我们有必要先了解下对象的生命周期,我们知道Java对象的生命周期,也即Java中的远程方法调用RMI也会被用到,在网络中要传输对象的话,则必须要对对象进行序列化,关 ...

  9. asp.net，CSS设置<TableListView>的title居左,居左，居上

    居左 DIV.TableTitleStyle TABLE.grid TH { text-align:left; } 引用 <div class="TableTitleStyle&quo ...

  10. splay入门

    在比较了网上的几份模板的速度之后,发现指针版明显快了很多,但是一敲起来....各种不习惯...所以还是学的hzwer 的数组版... bzoj3223:维护reverse操作就可以了 #include ...