<!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. php克隆 自动加载

    PHP加载 include() 函数 include() 函数可获得指定文件中的所有文本,并把文本拷贝到使用 include 函数的文件中. 例子 1 假设您拥有一个标准的页眉文件,名为 " ...

  2. ConnectionReset

    ConnectionReset The connection was reset by the remote peer. http://stackoverflow.com/questions/1434 ...

  3. POJ 1948 Triangular Pastures【二维01背包】

    题意:给出n条边,用这n条边构成一个三角形,求三角形的最大面积. 先求面积,用海伦公式,s=sqrt(p*(p-a)*(p-b)*(p-c)),其中a,b,c分别为三角形的三条边,p为三角形的半周长, ...

  4. C#中的lock关键字;就是lock住一个大家都共同访问的（静态static的）东东就行了

    public class ChatService : IChat //继承IChat接口或者说IChat的实现类 { //定义一个静态对象用于线程部份代码块的锁定,用于lock操作 private s ...

  5. [转帖]在RDLC中使用外部图片

    原文链接:http://blog.csdn.net/rock870210/article/details/4559962 在RDLC中使用外部图片 2009-09-16 19:08 3416人阅读 评 ...

  6. web项目路径问题

    路径    相对路径        URL中第一个字符不为“/”        request.getRequestDispatcher("b");        相对于该代码所在 ...

  7. Ensemble Learning 之 Bagging 与 Random Forest

    Bagging 全称是 Boostrap Aggregation,是除 Boosting 之外另一种集成学习的方式,之前在已经介绍过关与 Ensemble Learning 的内容与评价标准,其中“多 ...

  8. 【英语】Bingo口语笔记(30) - 表示“拒绝”

  9. Spring的5种通知

    1.前置通知  Before advice Advice that executes before a join point, but which does not have the ability ...

  10. Eclipse 打开编辑文件所在文件夹方法

    一个便捷的方法在eclipse的菜单中,依次点击Run->External Tools-> External Tools configurations添加一个新的工具 OpenContai ...