<!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. SQL SERVER 常用字符类型的区别

    长度为 n 个字节的固定长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储大小为 n 个字节.char 在 SQL-92 中的同义词为 character. ...

  2. [转]c/c++输入函数

    最全输入函数 c/c++ 一: c=getchar(); 功能:读入一个字符 说明:调用此函数时要求在程序的第一行有预编译命令:#include<stdio>,不过在做c++时 有#inc ...

  3. win7下搭建opengles2.0编程环境

    原帖地址:http://sixgod.org/archives/72   1.下载AMD的OpenGL ES2.0的模拟器,地址: http://www.opengles-book.com/ESEmu ...

  4. UVa 11100 The Trip, 2007

    今天的教训:做题要用大块的时间来做,上午做一下,做题做到一半就去忙别的事,那么后面再做的时候就无限CE,WA了.因为你很难或者需要很长时间来找回当时的思路. 题意:就像套瓷娃娃一样,有n个包,大小可能 ...

  5. bzoj3668: [Noi2014]起床困难综合症

    从高位到低位枚举期望的应该是ans最高位尽量取一.如果该数最高位为o的话能够取得1直接更新ans否则判断该位取1是否会爆m不会的话就加上. #include<cstdio> #includ ...

  6. 漫游Kafka实战篇之搭建Kafka运行环境

    接下来一步一步搭建Kafka运行环境. Step 1: 下载Kafka 点击下载最新的版本并解压. > tar -xzf kafka_2.9.2-0.8.1.1.tgz > cd kafk ...

  7. 字符集设置为UTF-8

    vi /etc/my.cnf [mysqld] character-set-server=utf8 [mysql] default-character-set=utf8 来自为知笔记(Wiz)

  8. 几个排序算法的JS实现

    最近找工作,复习一下数据结构的知识,看到排序这一块,顺便动手改了一下. 直接插入排序: 插入排序就是把数据分为有序区和无序区,遍历到的数据和有序区域的数据进行比较,找到要插入的位置,插入位置后的数据做 ...

  9. Java Cardioid 心脏形曲线 (整理)

    package demo; import java.awt.Color; import java.awt.Graphics; import javax.swing.JFrame; import jav ...

  10. （六）6.10 Neurons Networks implements of softmax regression

    softmax可以看做只有输入和输出的Neurons Networks,如下图: 其参数数量为k*(n+1) ,但在本实现中没有加入截距项,所以参数为k*n的矩阵. 对损失函数J(θ)的形式有: 算法 ...