jqmobile
标准页面结构
<!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的更多相关文章
- jqmobile小技巧
jqmobile API好像是不全,很多查不到.记录下自己的发现: 1.popup:data-position-to能够指向class或者id:data-position-to="#id|| ...
- 【初识 JQMobile 小小总结】
作为一个前端新手,之前还没有接触过手机端的项目.两周前项目经理告诉我要做手机端,让我用JQMobile. 之前在前端群里,偶尔听说过jqmobile很坑,自己又查了下其他框架,比如zepto.amaz ...
- Jqmobile Secha Ionic比较
1. Jqmobile 轻量级框架,它的语言基于 jquery 语言容易上手,运行速度快,但是没有 MVC 多人协作 开发的概念,项目比较大后 代码不易维护 (中小项目 1-2 个人开发很适 ...
- jqMobile中pageinit,pagecreate,pageshow等函数的执行顺序
常见的共有5个page函数,刚开始有点迷糊的是到底谁先谁后执行. 实验告诉我们结果: var temp = ''; $('body').live('pagechange', function () { ...
- jqMobile中的dialog和popup的区别
主要区别是:dialog默认含回退按钮.并且dialog在1.4版中已经过时,1.5中将会移除. 下面是 原文1: Using a Dialog Window as a Popup A jQuery ...
- 如何脱离SDK,使用DW5.5和phonegap以及JQMobile搭建开发环境
也许有些人是学C++出身,对于Java几乎不了解.一时心血来潮想学学android开发,于是下载了Eclipse,安装了SDK,有模有样的学习起来.也许是懒惰了,对于java一直总是提不起精神.于是确 ...
- JQMobile引入外部CSS,JS文件
使用CDN <!DOCTYPE html> <html> <head> <title>html5</title> <meta name ...
- jqmobile FAQ
1. 用JavaScript弹出对话框 $("#msgBox").popup("open"); <div data-role="popup&qu ...
- JQMObile 优势
1.跨平台 目前大部分的移动设备浏览器都支持HTML5标准,jQuery Mobile以HTML5标记配置网页,所以可以跨不同的移动设备,如Apple iOS,Android,BlackBerry, ...
随机推荐
- AngularJs(一) MVC 模式的应用
Model的应用 MVC的模式大家都是十分熟悉了,那么Angular是怎么规划的呢.数据被放在json文件中,通过Ajax获取数据. [{ "action": "Buy ...
- BOW
bag of words(NLP): 最初的Bag of words,也叫做"词袋",在信息检索中,Bag of words model假定对于一个文本,忽略其词序和语法,句法,将 ...
- C#将图片转化为黑白图片
最近项目需要将上传的图片转化为黑白图片 在网上找了很多资料,测试通过,上代码 using System; using System.Collections.Generic; using System. ...
- java 获取本机ip及mac地址
package com.achun.test; import java.net.Inet4Address;import java.net.Inet6Address;import java.net.In ...
- 【转】iOS隐藏导航条1px的底部横线
默认情况下会有这条线 第一种方法: 1 2 3 4 5 6 UINavigationBar *navigationBar = self.navigationController.navigationB ...
- realloc,c语言
realloc #include <stdlib.h> main() { char* ptr=NULL; char* ptr2=NULL; ptr = malloc(); printf(& ...
- C++_基础_类和对象2
内容: (1)构造函数 (2)初始化列表及其必要性 (3)支持自定义类型转换的构造函数 (4)this指针 (5)const对象和成员函数 (6)析构函数 1.构造函数1.1 格式: class 类名 ...
- c++ primer plus 习题答案(1)
c++ primer plus 习题答案用的是第五版,IDE仍然是vs2013.我只标注了题号,具体的题目找下书上对应内容吧. p110.8 #include<iostream> #inc ...
- 排序算法——交换排序(冒泡排序、快速排序)(java)
一.冒泡排序 时间复杂度:O(n^2) 公认最慢的排序,每次把最大/最小的放一边,原理: [57,68,59,52] [57,68,59,52] [57,59,68,52] [57,59,52,68] ...
- 星际SC 地图 Big Game Fort 要塞之战 修正了 BIG GAME 地图的平衡性
星际SC 地图 Big Game Fort 要塞之战 修正了 BIG GAME 地图的平衡性 也适合BIG 1V1 对战 此版本目前不开放1打1造功能