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的浏览器上会被隐藏的元素

1.jquery mobile的首页不能增加后退按钮，http://stackoverflow.com/questions/13662696/data-add-back-btn-true-doesnt-work

2.跳转页面后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"联合起来一起用是用一行区分不同的列表