jquery mobile 移动web(2)
button 按钮 data-role="button" 将超链接变成button。 具有icon 图标的button 组件。 提供了18常用的图标 data-icon ="" 1.arrow-1左箭头 2.arrow-r 右箭头 3.arrow-u 上箭头 4.arrow-d 下箭头 5.delete 删除 6.plus 加号 7.minus 减号 8.check 对号 9.gear 齿轮 10.refresh 刷新 11.forward 前进 12.back 返回 13.grid 网格 14.stat 星星 15.alert 提示 16.info 信息 17.home 主页 18.search 查找
图标的位置 data-iconpos="" left right top bottom 通过 设置 data-iconpos="notext" 可以创建一个没有文字,只有icon 图标的按钮。 自定义图标按钮。 例如:data-icon="myapp-email" myapp-email 就是自定义的图标名称,根据规范编写css 样式 样式名称为.ui-icon-myapp-email 并在改样式中把图标设置为背景。 data-inline="" 属性值为true button 按钮的按钮的宽度会自动适应按钮文本内容和图标组合的长度。 <a href="#" data-role="button" data-icon="home" data-inline="true">home</a> 具有分组功能的buttonn按钮 在按钮的最外层增加一个div 并设置 data-role 属性值为 controlgroup。
<div data-role="controlgroup">
<a data-role="button"></a>
<a data-role="button"></a>
</div>
data-type="horizontal" 将垂直的按钮变成水平分布。
data-rel="back" jQuery Mobile 会忽略a 元素的href属性,并模拟出类似浏览器后退按钮。
多按钮的Footer 工具栏。 footer 工具栏和header工具栏在布局上有一些区别。在footer工具栏中添加的按钮会自动给哦设置成inline 模式,并自动适应文本内容的宽度。 实现一组按钮的方法 在最外层设置一个div 设置data-role 属性值为controlgroup 然后在设置data-type 属性值为 horizontal,说明该按钮时水平排列的。 导航条工具栏。
<footer data-role="header">
<nav data-role="navbar">
<ul>
<li>
<a href="#" class="ui-btn-active" data-icon="home" data-iconpos="top">主页</a>
</li>
<li>
<a href="#" data-icon="search" data-iconpos="top">查找</a>
</li>
<li>
<a href="#" data-icon="info" data-iconpos="top">主页</a>
</li>
</ul>
</nav>
</footer>
定义fixed 工具栏
<header data-role="header" data-position="fixed">
<h1>固定位置工具栏</h1>
</header>
全屏模式工具栏 在页面视图内的header 或footer 区域设置为 data-position 属性值为fixed,然后在页面或视图的div 元素上设置data-fullscreen 属性为true 页面或试图采用全屏模式。
内容区域格式布局。
网格布局。 代码如下:
<div class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" data-theme="c" value="reset">
</div>
<div class="ui-block-b">
<input type="reset" data-theme="b" value="submit">
</div>
</div>
ui-grid-a 两列 ui-grid-b 三列 ui-grid-c 四列 ui-grid-d 五列
三列网格布局如下:
<div class="ui-grid-b">
<div class="ui-block-a">
<input type="reset" data-theme="a" value="a">
</div>
<div class="ui-block-b">
<input type="reset" data-theme="b" value="b">
</div>
<div class="ui-block-c">
<input type="reset" data-theme="c" value="c">
</div>
</div>
多列以此类推。
- 详解JavaScript跨域问题
- OpenStack Magnum及Liberty新功能简介
- JDK10要来了:下一代 Java 有哪些新特性?
- 是时候忘掉finalize方法了
- 学会一个JVM插件:使用HSDIS反汇编JIT生成的代码
- ONOS 实战分享(一):项目建立、调试到热部署
- 自己动手系列-延迟队列
- OVS中Action源码分析&自定义Action
- 读懂一行Full GC日志(回复JVM内存分配担保机制一文中 Mr/Mrs Xxx 在留言区提出的问题)
- 总结了一些指针易出错的常见问题(四)
- 当你在浏览器中输入Google.com并且按下回车之后发生了什么?
- 总结了一些指针易出错的常见问题(三)
- C++/C头文件 .h和 .c
- 史上最清晰的红黑树讲解(下)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 流水的NLP铁打的NER:命名实体识别实践与探索
- Spring Boot入门系列(十七)Mybatis创建自定义mapper 实现多表关联查询!
- 让你笑的七个linux命令
- GPU并行计算之向量和
- ShardingJdbc分库分表实战案例解析(下)
- 分布式链路追踪Skywalking Skywalking 存储客户端设计
- Kubernetes 的新武器:层级命名空间
- 手撕distributed ram类型同步FIFO
- 解决PIL透明的图片放在新图片上报错
- Dissonance 使用(一)
- Dissonance 使用(三)
- 从代码角度看各类子域名收集工具
- Shiro-550 PoC 编写日记
- k8s代码走读---client-go编程交互基础
- 故障恢复:一次底层超融合故障导致的异常处理