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的更多相关文章

  1. Jquery Mobile开发以及Js对象动态绑定

    动态创建对象并绑定属性: var instantiate = function (Type, args) { var Constructor = function () { }; Constructo ...

  2. jquery mobile 实现自定义confirm确认框效果

    类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js if(confirm('确定删除吗?')) { //执行代码 } 这种效果比较丑,使用jquery m ...

  3. jQuery Mobile的基本使用

    本人是软件开发的初学者,总结了一点点日常所学,记录在此,主要目的是鼓励自己坚持学习,怕有一天忘记了,还能复习曾经学过的知识点. 如有大神路过为我指点迷津,纠正改错更是感激不尽,但请不要喷我这个菜鸟!谢 ...

  4. Jquery Mobile 小结

    第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...

  5. jQuery Mobile页面返回无需重新get

    最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个 ...

  6. 使用jQuery Mobile的注意事项(译)

    翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...

  7. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  8. jQuery Mobile + HTML5

    最近项目需要,需要构建一个适合手持设备访问的站点,作者从网上查阅了一些资料,本文就是基于此而来. 首先下载jQuery Mobile http://jquerymobile.com/,选择稳定版即可. ...

  9. jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好 ...

随机推荐

  1. 在web page中使鼠标右击失效的几种方法

    这里主要介绍两种方法,一种是使用js来处理,还有一种是在html属性中设置. 方法一:js 1: <script language="javascript"> docu ...

  2. ceph增加osd流程

    假如需要新增一个主机名:osd4 ip:192.168.0.110的OSD1.在osd4创建挂载目录及放置配置文件的目录 ssh 192.168.0.110 (这里是从mon主机ssh到osd4主机) ...

  3. css 基础(一)

    一.css样式表的分类 首先介绍一下css中的样式表  a.外部样式表  将需要的样式放在单独的外部文件中,需要使用是直接调用,通常放在.css文件中.例如:/*以下部分是放在(my.css)自定义名 ...

  4. Automatic Preferred Max Layout Width is not available on iOS versions prior to 8.0

    今天在真机调试低版本系统的时候出现如题类似Layout Max Width在ios 8 之前不适用的问题, 初步估计是autolayout 所导致的 查找资料解决方法如下: 将label下Preffe ...

  5. STL中deque

    以下学习一下STL中另一种序列容器——deque. deque表示double-ended queue,即双向队列,deque是通过作为动态数组的方式实现的,这样可以在两端插入元素.因此,deque可 ...

  6. AFNetworking 保存Cookie Session 和 Webview 共享Cookie

    1, 请求并携带SessionId, 代码如下: //当请求成共后调用如下代码, 保存Cookie NSArray *cookies = [[NSHTTPCookieStorage sharedHTT ...

  7. linux下find命令-atime,-ctime,-mtime真正含义

    linux下的-atime,-ctime,-mtime含义我们经常会在论坛或者群里面被问到,在linux或者unix下如何查看某文件的创建日期?经常又会有人说用find命令加选项-ctime,其实这里 ...

  8. 基于visual Studio2013解决算法导论之017查找第n小元素

     题目 查找第n小元素 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> ...

  9. 【翻译自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 (文档 ...

  10. mysql的基础操作

    查看数据库 获取服务器上的数据库列表通常很有用.执行show databases;命令就可以搞定. mysql> show databases; 创建数据库 mysql> create d ...