jquery mobile常用的data-role类型介绍
转自原文 jquery mobile常用的data-role类型介绍
data-role参数表:
page 页面容器,其内部的mobile元素将会继承这个容器上所设置的属性
header 页面标题容器,这个容器内部可以包含文字、返回按钮、功能按钮等元素
footer 页面页脚容器,这个容器内部也可以包含文字、返回按钮、功能按钮等元素
content 页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素
controlgroup 将几个元素设置成一组,一般是几个相同的元素类型
fieldcontain 区域包裹容器,用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
navbar 功能导航容器,通俗的讲就是工具条
listview 列表展示容器,类似手机中联系人列表的展示方式
list-divider 列表展示容器的表头,用来展示一组列表的标题,内部不可包含链接
button 按钮,将链接和普通按钮的样式设置成为jQueryMobile的风格
none 阻止框架对元素进行渲染,使元素以html原生的状态显示,主要用于form元素。
data-transition参数表:
slide 从右侧向左滑入页面
slideup 从底部向上滑入
slidedown 从上向下滑入
pop 从中心渐显展开
fade 渐显
flip 翻转
data-icon参数表:
data-iconpos参数表:
right 图标在文字的右侧
top 图标在文字上面
bottom 图标在文字下面
pop 从中心渐显展开
fade 渐显
flip 翻转
jquery mobile常用的data-role类型介绍的更多相关文章
- jQuery Mobile 1.1八大新特性介绍
随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用.在众多的 移动HTML5开发框架中,比较著名的是j ...
- !!! jquery mobile常用代码
Jquery MOBILE: (2014-7-1 发布jquery.mobile 1.4.3版本) <!doctype html> <html> <head> & ...
- jquery mobile常用的data-role类型
data-role参数表: page 页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header 页面标题容器,这个容器内部可以包含文字.返回按钮.功能按钮等 ...
- jquery mobile常用的data-role类型 data-icon data-iconpos
文章链接: http://blog.csdn.net/cainiaoxiaozhou/article/details/48521241
- Jquery Mobile 常用参数
data-role 属性值: data-role参数表: page 页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header 页面标题容器,这个容器内部 ...
- How to update jQuery Mobile in Dreamweaver CS6
来源:http://wpguru.co.uk/2013/01/how-to-update-jquery-mobile-in-dreamweaver-cs6/ Since the release of ...
- Jquery mobile div常用属性
组件 页面 jQuery Mobile 应用了 HTML5 标准的特性,在结构化的页面中完整的页面结构分为 header. content.footer 这三个主要区域. 在 body 中插入内容块: ...
- jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?
1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自 ...
- jQuery Mobile Data 属性
按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...
随机推荐
- HDU 4345
细心点想,就明白了,题目是求和为N的各数的最小公倍数的种数.其实就是求N以内的各素数的不同的组合(包含他们的次方),当然,是不能超过N的.用Dp能解决.和背包差不多. #include <ios ...
- POJ 2407
裸 的求欧拉函数 #include <iostream> #include <cstdio> #include <cstring> #include <alg ...
- [Angular] Upgrade existing Angular app to Progressive Web App
If you alread have an existing Angular application and want to upgrade to progressive web app. 1. In ...
- 高速排序(Java版)
package com.love.test; import java.util.Scanner; /** * @author huowolf *高速排序实现 *快排是十分优秀的排序算法. *核心:分治 ...
- Oracle 中UNDO与REDO的差别具体解释
一 为了更清楚的看出2者差别,请看下表: UNDO ...
- CSS初步理解
近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...
- ThinkPHP是什么
ThinkPHP是什么 ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的.最早诞生于2006年初,2007年元旦正式更名为ThinkPHP,并且遵循Apache2开源协议发布.Th ...
- iodine免费上网——本质就是利用dns tunnel建立tcp,然后tcp proxy来实现通过访问虚拟dns0网卡来访问你的dns 授权server
我的命令: server端: sudo iodined -P passwd -f -DD 10.0.0.100 abc.com client端(直连模式,-r表示使用xxx.abc.com的xxx来转 ...
- poj--3159--Candies(简单差分约束)
Candies Time Limit: 1500MS Memory Limit: 131072K Total Submissions: 26888 Accepted: 7398 Descrip ...
- Visual Studio2013下Magick++配置方法
声明:本文系作者原创,如需转载请保持文章完整并注明出处(http://blog.csdn.net/u010281174/article/details/52224829). ImageMagick是一 ...