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>
多列以此类推。
- 云本机应用程序成熟度的模型
- 如何利用ETW(Event Tracing for Windows)记录日志
- 如何利用ETW(Event Tracing for Windows)记录日志
- 如何利用ETW(Event Tracing for Windows)记录日志
- ASP.NET MVC以ValueProvider为核心的值提供系统: DictionaryValueProvider
- ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)
- .NET Core的文件系统[2]:FileProvider是个什么东西?
- Python多线程怎样优雅的响应中断异常
- .NET Core的文件系统[3]:由PhysicalFileProvider构建的物理文件系统
- .NET Core的文件系统[4]:由EmbeddedFileProvider构建的内嵌(资源)文件系统
- 学习July博文总结——支持向量机(SVM)的深入理解(下)
- 在gridview和datagrid里设置列宽
- ASP.NET MVC的Model元数据与Model模板:将”ListControl”引入ASP.NET MVC
- .NET Core的文件系统[5]:扩展文件系统构建一个简易版“云盘”
- 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 数组属性和方法