标准页面结构

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" /> 
<script type="text/javascript" src="jquery-1.4.3.min.js"></script> 
<script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script> 
</head> 
<body> 
<div data-role="page"> 
 <div data-role="header"> 
  <h1>Page Title</h1> 
</div><!-- /header --> 
<div data-role="content"> 
 <p>Page content goes here.</p> 
</div><!-- /content --> 
<div data-role="footer"> 
 <h4>Page Footer</h4> 
</div><!-- /footer --> 
</div><!-- /page --> 
</body> 
</html>

---------------------------------------

data-role=...
page header content footer   navbar list-divider

fieldcontain button controlgroup listview slider(<select>)

collapsible  collapsible-set

none//保持原生html元素的外观 jqm不做渲染

------------------------------
data-role=controlgroup data-type=horizontal

data-role=listview data-filter=true data-inset=true/false

data-inline=true/false

data-position=inline/fixed
data-role=header data-position=inline data-backbtn=false

data-theme=a/b/c..
data-content-theme=a/b/c..

data-icon=delete/check/arrow-l/arrow-r/arrow-u/arrow-d/plus/minus/gear/grid/star/alert/info/home...
data-iconpos=right/top/bottom/notext(隐藏文字) 默认left

data-transition=slide/pop/slideup/slidedown/fade/flip

data-role=collapsible data-collapsed=true/false

data-role=listview data-split-icon=delete data-split-theme=a/bc..

data-role=page data-direction=reverse

data-rel=dialog //模态对话框

data-back-btn-text="previous"

$.mobile.page.prototype.options.backBtnText = 'previous';

---------------------------------
.ui-grid-a
.ui-grid-a > .ui-block-a + .ui-block-b
.ui-btn-active
.ui-bar
<div data-role="footer" class="ui-bar"><a>..</a></div>
-----------------------------------
$('.ui-dialog').dialog('close');
$('ul').listview('refresh');

$('body').bind('taphold',function(){..});
$('body').bind('swipe', function(){...});

-----------------------------------------------------------------------------------------

定义页面切换动画

data-transition=slide/slideup/slidedown/pop/fade/flip

data-rel="dialog" //打开模态对话框

$('.ui-dialog').dialog('close'); //关闭模态对话框

data-backBtn="false" //阻止后退按钮的自动创建

data-back-btn-text="previous" //定义后退按钮的文本
$.mobile.page.prototype.options.backBtnText="previous";

data-iconshadow=false / $('a').buttonMarkup({iconshadow:'false'});
data-shadow="false" //可让按钮没阴影

改变表单中按钮的初始化选择器 默认为button, [type=button], [type=submit] , [type="reset"], [type=image]
$.mobile.button.prototype.options.initselectors = ".mybtn";

data-type="horizontal"

data-id=""

data-role="navbar" //导航条组件可1行容纳5个按钮

class=ui-bar/ui-btn-active
class=ui-btn-right/ ui-btn-left

data-inline=true //让按钮变为自适应宽度的
data-theme=a/b/c/d...
data-content-theme=a/b/c..

data-inset="true"
data-filter="true"

html5新控件 range: <input type="range" value="20" min="0" max="100" />

data-url=""
data-title=""

data-corners="true" //圆角 或者 $('a').buttonMarkup({corners:'true'});

启用和禁用按钮
$("[type='submit']").button('enable');
$("[type='submit']").button('disable');

更新一个按钮 所有表单元素都有这个方法refresh
$('[type=submit]').button('refresh');

jquery mobile 会把同一个域下所有指向页面的链接都转换为ajax请求 并用动画效果做切换
指向别的域的链接 或 rel="external" 或 data-ajax="false" 或包含target=""的链接不会通过ajax方式加载 页面整体刷新

为节省空间工具栏中的按钮都是内联的

jqmobile的更多相关文章

  1. jqmobile小技巧

    jqmobile API好像是不全,很多查不到.记录下自己的发现: 1.popup:data-position-to能够指向class或者id:data-position-to="#id|| ...

  2. 【初识 JQMobile 小小总结】

    作为一个前端新手,之前还没有接触过手机端的项目.两周前项目经理告诉我要做手机端,让我用JQMobile. 之前在前端群里,偶尔听说过jqmobile很坑,自己又查了下其他框架,比如zepto.amaz ...

  3. Jqmobile Secha Ionic比较

    1. Jqmobile 轻量级框架,它的语言基于 jquery 语言容易上手,运行速度快,但是没有 MVC 多人协作 开发的概念,项目比较大后 代码不易维护     (中小项目  1-2 个人开发很适 ...

  4. jqMobile中pageinit,pagecreate,pageshow等函数的执行顺序

    常见的共有5个page函数,刚开始有点迷糊的是到底谁先谁后执行. 实验告诉我们结果: var temp = ''; $('body').live('pagechange', function () { ...

  5. jqMobile中的dialog和popup的区别

    主要区别是:dialog默认含回退按钮.并且dialog在1.4版中已经过时,1.5中将会移除. 下面是 原文1: Using a Dialog Window as a Popup A jQuery ...

  6. 如何脱离SDK，使用DW5.5和phonegap以及JQMobile搭建开发环境

    也许有些人是学C++出身,对于Java几乎不了解.一时心血来潮想学学android开发,于是下载了Eclipse,安装了SDK,有模有样的学习起来.也许是懒惰了,对于java一直总是提不起精神.于是确 ...

  7. JQMobile引入外部CSS,JS文件

    使用CDN <!DOCTYPE html> <html> <head> <title>html5</title> <meta name ...

  8. jqmobile FAQ

    1. 用JavaScript弹出对话框 $("#msgBox").popup("open"); <div data-role="popup&qu ...

  9. JQMObile 优势

    1.跨平台  目前大部分的移动设备浏览器都支持HTML5标准,jQuery Mobile以HTML5标记配置网页,所以可以跨不同的移动设备,如Apple iOS,Android,BlackBerry, ...

随机推荐

  1. jvm的内存管理【转】

    [转]JVM内存管理 这些日子一直在研究jvm内存管理的东西,网上的知识很多,总结一下,能沉淀下来的就是自己的! 首先,刚学java的时候就知道java类文件是以 .java为后缀的文件,经过java ...

  2. 从零开始学习UNITY3D(GUI篇 2)

    复合控件极其使用,toolbar,selectgrid 先看效果图: toolbar可以看作是一个button按钮的集合,一次只能点击一个按钮, selectgrid又可以堪称是一个toolbar的集 ...

  3. Linux前台的程序转到后台执行（关闭终端而不杀死命令）

    你是否经常遇到这样的情况,通过SSH或者终端putty连接到一台linux/unix机器,执行一个程序.一个脚本或者一条命令,但现在你需要关闭SSH或者终端,由于该该程序.脚本或者命令正在运行,一旦你 ...

  4. 浅谈Mybatis(三)

    一.动态SQL 1.sql片段 解决sql语句的冗余代码问题. <sql id="SELECT_T_USER"> select id,name,password,bir ...

  5. STL模板_multimap_智能指针作为键值

    map的键值的类型 -可以是自定的类型(对象.函数指针.智能指针....) -但是有副作用-当自己定义的类型键值无法用系统自己提供的 < 或者 > 进行排序的时候,会出现各种问题 -所以需 ...

  6. firebreath注册接口

    对firebreath文档进行翻译,顺便做个笔记,原地址:http://www.firebreath.org/display/documentation/JSAPIAuto 综述: 你可能会对需要转换 ...

  7. 以Android环境为例的多线程学习笔记（二）-----------------锁和条件机制

    现在的绝大多数应用程序都是多线程的程序,而当有两个或两个以上的线程需要对同一数据进行存取时,就会出现条件竞争,也即 是这几个线程中都会有一段修改该数据状态的代码.但是如果这些线程的运行顺序推行不当的话 ...

  8. Mysql数据库中的EXISTS和NOT EXISTS

    SQL语言中没有蕴含逻辑运算.但是,可以利用谓词演算将一个逻辑蕴含的谓词等价转换为:p->q ≡┐p∨q. 我们通过一个具体的题目来分析:(具体的表和数据详见文章:Mysql数据库中的EXIST ...

  9. Enum基础

    enum ColorE {     RED, GREEN, BLUE; } public class GetEnumContent {     public static void main(Stri ...

  10. css如此强大你知道吗

    看个这个大神纯 CSS 绘制<辛普森一家>人物头像我惊呆了,css如此牛x <div id="wrap"> <div class="cont ...