jquery mobile -role
jquery mobile -role - cc_jony - 博客园
jquery mobile -role
data-page 页面
data-header 页面的头部
data-content 页面的内容
data-footer 页面的页脚
data-navbar 定义一个导航条,一般位于header中
data-button 渲染为一个可视化的按钮
data-controlgroup 渲染一个组件
data-collapsible-set 一组可折叠的内容面板
data-filedcontain 用于表单-域的容器
data-listview 由多项内容组成的列表
data-dialog 对话页面
slider 用于布尔值的可视化滑块
data-nojs 在兼容jquery mobile的浏览器上会被隐藏的元素
.jquery mobile的首页不能增加后退按钮,http://stackoverflow.com/questions/13662696/data-add-back-btn-true-doesnt-work
.跳转页面后js失效可能是没有添加下面的某一项:一:data-rel="external" 二:target="_blank" 三:data-ajax=“fasle”
3.添加logo:在header中,在h1中使用img标签比较好<h1><img src=""/></h1>
4.导航栏(navbar) 导航栏只是一个容器,通常为一个div元素,内容为一个包含各个导航链接的无序列表。导航栏上被选中的元素用ui-btn-active标识(class="ui-btn-active")。使用固定页脚的导航栏时,要在选中项上加上两个类:class="ui-btn-active ui-state-persist".
5.可折叠内容,:<div data-role="collapsible" data-collapsed="false"><h2></h2><p></p></div>打开折叠块的内容; <div data-role="collapsible" data-collapsed="true">是收缩折叠区的内容。在折叠容器中没有定义hX元素,则内容将处于打开状态且不能收起,如果定义多个hX元素,则第一个会被当做标题,其他的将被渲染为内部的内容。
6.可折叠内容也可嵌套,不过最好不要超过两级的嵌套。
<div data-role="collapsible" data-collapsed="true">
<h2> 一级嵌套</h2>
<div data-role="collapsible">
<h3>二级嵌套 </h3>
<p>hsajdoajdpajfapjspjadfpasjfpasjfjsaiojfsalshalsjlalsjf ajajsf;sjaf ajsfjafls
</p>
</div>
</div>7.手风琴部件, <div data-role="collapsible-set">放一些可折叠的标题和内容</div> 当打开其中一个折叠项时,其它折叠项将关闭。
8.类ui-grid-a表示两列,ui-grid-b表示三列,ui-grid-c表示四列,ui-grid-d表示五列。用来布局网格,采用平铺排版。
9.按钮,1:使用button元素,2:使用会被渲染为按钮的input元素,包括type="button",type="submit",type="reset" 以及type="image" ,3:任何带有data-role="button"的a元素。给id=btn的标签添加跳转属性$("#btn").attr('href', 'http://www.baidu.com/');<a href="" id="btn" data-role="button" data-inline="true"> <img src="../img/1.jpg" alt="Alternate Text" /></a>
<a href="http://www.baidu.com/" onclick="location='http://www.google.cn/';alert(location.href);">去百度</a>
<a href="#" onclick="location='http://www.google.com.hk/';alert(location.href);">去谷歌</a>10.内联按钮,data-inline="true"
11.分组按钮
12.data-role="list-divider" 和 data-role="listview"联合起来一起用是用一行区分不同的列表
jquery mobile -role的更多相关文章
- Jquery Mobile开发以及Js对象动态绑定
动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...
- jquery mobile 实现自定义confirm确认框效果
类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js if(confirm('确定删除吗?')) { //执行代码 } 这种效果比较丑,使用jquery m ...
- jQuery Mobile的基本使用
本人是软件开发的初学者,总结了一点点日常所学,记录在此,主要目的是鼓励自己坚持学习,怕有一天忘记了,还能复习曾经学过的知识点. 如有大神路过为我指点迷津,纠正改错更是感激不尽,但请不要喷我这个菜鸟!谢 ...
- Jquery Mobile 小结
第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...
- jQuery Mobile页面返回无需重新get
最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个 ...
- 使用jQuery Mobile的注意事项(译)
翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...
- (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明
(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...
- jQuery Mobile + HTML5
最近项目需要,需要构建一个适合手持设备访问的站点,作者从网上查阅了一些资料,本文就是基于此而来. 首先下载jQuery Mobile http://jquerymobile.com/,选择稳定版即可. ...
- jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明
近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...
随机推荐
- 在web page中使鼠标右击失效的几种方法
这里主要介绍两种方法,一种是使用js来处理,还有一种是在html属性中设置. 方法一:js 1: <script language="javascript"> docu ...
- ceph增加osd流程
假如需要新增一个主机名:osd4 ip:192.168.0.110的OSD1.在osd4创建挂载目录及放置配置文件的目录 ssh 192.168.0.110 (这里是从mon主机ssh到osd4主机) ...
- css 基础(一)
一.css样式表的分类 首先介绍一下css中的样式表 a.外部样式表 将需要的样式放在单独的外部文件中,需要使用是直接调用,通常放在.css文件中.例如:/*以下部分是放在(my.css)自定义名 ...
- Automatic Preferred Max Layout Width is not available on iOS versions prior to 8.0
今天在真机调试低版本系统的时候出现如题类似Layout Max Width在ios 8 之前不适用的问题, 初步估计是autolayout 所导致的 查找资料解决方法如下: 将label下Preffe ...
- STL中deque
以下学习一下STL中另一种序列容器——deque. deque表示double-ended queue,即双向队列,deque是通过作为动态数组的方式实现的,这样可以在两端插入元素.因此,deque可 ...
- AFNetworking 保存Cookie Session 和 Webview 共享Cookie
1, 请求并携带SessionId, 代码如下: //当请求成共后调用如下代码, 保存Cookie NSArray *cookies = [[NSHTTPCookieStorage sharedHTT ...
- linux下find命令-atime,-ctime,-mtime真正含义
linux下的-atime,-ctime,-mtime含义我们经常会在论坛或者群里面被问到,在linux或者unix下如何查看某文件的创建日期?经常又会有人说用find命令加选项-ctime,其实这里 ...
- 基于visual Studio2013解决算法导论之017查找第n小元素
题目 查找第n小元素 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> ...
- 【翻译自mos文章】当指定asm disk 为FRA时,11.2.0.3的dbua hang住
当指定asm disk 为FRA时.11.2.0.3的dbua hang住 来源于: 11.2.0.3 DBUA Hangs While Specifying ASM Disk To FRA (文档 ...
- mysql的基础操作
查看数据库 获取服务器上的数据库列表通常很有用.执行show databases;命令就可以搞定. mysql> show databases; 创建数据库 mysql> create d ...