浙江省高等学校教师教育理论培训

微信搜索“毛凌志岗前心得”小程序

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  12653 随笔 :: 2 文章 :: 617 评论 :: 608万 阅读

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.可折叠内容也可嵌套,不过最好不要超过两级的嵌套。

1
2
3
4
5
6
7
8
<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"联合起来一起用是用一行区分不同的列表

 

posted on   lexus  阅读(305)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
历史上的今天:
2012-12-04 个性化离线实时分析系统pora
2012-12-04 crontab 每月执行一次怎么写? - Linux系统管理 - ChinaUnix.net -
2012-12-04 刘思喆@贝吉塔行星
2012-12-04 First steps in text mining with R
2012-12-04 RDataMining.com: R and Data Mining
2012-12-04 RDataMining.com: R and Data Mining
2012-12-04 Text Analysis
点击右上角即可分享
微信分享提示