转自原文 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类型介绍的更多相关文章

  1. jQuery Mobile 1.1八大新特性介绍

    随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用.在众多的 移动HTML5开发框架中,比较著名的是j ...

  2. !!! jquery mobile常用代码

    Jquery MOBILE:  (2014-7-1 发布jquery.mobile 1.4.3版本) <!doctype html> <html> <head> & ...

  3. jquery mobile常用的data-role类型

    data-role参数表: page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header     页面标题容器,这个容器内部可以包含文字.返回按钮.功能按钮等 ...

  4. jquery mobile常用的data-role类型 data-icon data-iconpos

    文章链接: http://blog.csdn.net/cainiaoxiaozhou/article/details/48521241

  5. Jquery Mobile 常用参数

    data-role  属性值: data-role参数表: page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性  header     页面标题容器,这个容器内部 ...

  6. 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 ...

  7. Jquery mobile div常用属性

    组件 页面 jQuery Mobile 应用了 HTML5 标准的特性,在结构化的页面中完整的页面结构分为 header. content.footer 这三个主要区域. 在 body 中插入内容块: ...

  8. jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?

    1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自 ...

  9. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

随机推荐

  1. HDU 4345

    细心点想,就明白了,题目是求和为N的各数的最小公倍数的种数.其实就是求N以内的各素数的不同的组合(包含他们的次方),当然,是不能超过N的.用Dp能解决.和背包差不多. #include <ios ...

  2. POJ 2407

    裸 的求欧拉函数 #include <iostream> #include <cstdio> #include <cstring> #include <alg ...

  3. [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 ...

  4. 高速排序(Java版)

    package com.love.test; import java.util.Scanner; /** * @author huowolf *高速排序实现 *快排是十分优秀的排序算法. *核心:分治 ...

  5. Oracle 中UNDO与REDO的差别具体解释

    一 为了更清楚的看出2者差别,请看下表:                                               UNDO                             ...

  6. CSS初步理解

    近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...

  7. ThinkPHP是什么

    ThinkPHP是什么 ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的.最早诞生于2006年初,2007年元旦正式更名为ThinkPHP,并且遵循Apache2开源协议发布.Th ...

  8. 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来转 ...

  9. poj--3159--Candies(简单差分约束)

    Candies Time Limit: 1500MS   Memory Limit: 131072K Total Submissions: 26888   Accepted: 7398 Descrip ...

  10. Visual Studio2013下Magick++配置方法

    声明:本文系作者原创,如需转载请保持文章完整并注明出处(http://blog.csdn.net/u010281174/article/details/52224829). ImageMagick是一 ...