<!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. mysql命令分类（DML、DDL、DCL）

    DML:数据操作语言(操作数据) SELECT - 从数据库表中获取数据 UPDATE - 更新数据库表中的数据 DELETE - 从数据库表中删除数据 INSERT INTO - 向数据库表中插入数 ...

  2. 压缩工具类 - ZipUtils.java

    压缩工具类,提供压缩文件.解压文件的方法. 源码如下:(点击下载 - ZipUtils.java .FolderUtils.java.ant-1.7.0.jar.commons-io-2.4.jar. ...

  3. 如何通过session控制单点登录

    web服务器为每一个浏览器实例对应一个session.这个session有自己的一个独立id,这个id保存在浏览器的cookie中(这个cookie貌似随着这个浏览器实例的关闭而清除),访问web服务 ...

  4. 网易新闻页面信息抓取 -- htmlagilitypack搭配scrapysharp

    最近在弄网页爬虫这方面的,上网看到关于htmlagilitypack搭配scrapysharp的文章,于是决定试一试~ 于是到https://www.nuget.org/packages/Scrapy ...

  5. UVa 12206 (字符串哈希) Stammering Aliens

    体验了一把字符串Hash的做法,感觉Hash这种人品算法好神奇. 也许这道题的正解是后缀数组,但Hash做法的优势就是编码复杂度大大降低. #include <cstdio> #inclu ...

  6. (转)FirstResponder 释放问题

    FirstResponder 释放问题 转自:http://www.cnblogs.com/smileEvday/archive/2012/03/18/2405190.html View的FirstR ...

  7. hadoop数据容易出现错误的地方

    最近在搞关于数据分析的项目,做了一点总结. 下图是系统的数据流向.容易出现错误的地方.1.数据进入hadoop仓库有四种来源,这四种是最基本的数据,简称ods,original data source ...

  8. Ajaxload动态加载动画生成工具的实现（ajaxload的本地移植）

    前言 前段时间看到一个国外的网站,在线生成ajax loading动画.觉得很实用,于是动起了移植到自己网站的念头(一直以来的习惯,看到好的工具总想着移植到本地好好研究).根据以往移植的经验最终把 这 ...

  9. nanakon

    1.安装python pip3 install tornado pip3 install pymysql pip3 install qiniu pip3 install pillow 2.安装mysq ...

  10. css的使用技巧资料

    http://www.instantshift.com/2010/03/15/47-css-tips-tricks-to-take-your-site-to-the-next-level/ http: ...