使用jQuery在移动页面上添加按钮和给按钮添加图标


Posted in Javascript onDecember 04, 2015

创建按钮 data-role=button
给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。

样式链接按钮

在一个网页的主要内容块,你可以样式的任何锚链接为按钮添加 data-role="button" 属性。该框架将加强与标记和类的链接方式链接按钮。例如,这个标记:

<a href="index.html" data-role="button">Link button</a>

使用jQuery在移动页面上添加按钮和给按钮添加图标

注:风格像按钮链接都相同的视觉选择的按钮下面的真正形成,但也有一些重要的差异。基于链接的按钮,按钮是插件,不仅使用基本的button标记插件生成按钮的风格,所以窗体按钮方法(启用,禁用,刷新)不支持。如果你需要禁用基于链接的按钮(或元素),它可能申请伤残等级的UI残疾人自己用java script实现相同的效果。

使用jQuery在移动页面上添加按钮和给按钮添加图标

迷你版 data-mini="true"

一个更紧凑的版本,在工具栏和紧空间是有用的,添加 data-mini="true" 属性的按钮来创建一个迷你版。

<a href="index.html" data-role="button" data-mini="true">Link button</a>

使用jQuery在移动页面上添加按钮和给按钮添加图标

给按钮添加图标 data-icon
jQuery Mobile框架包括一组选定的图标移动应用程序通常需要。尽量减少下载大小,jQuery Mobile包含一个单一的白色图标的精灵,和自动添加一个半透明的黑圈背后的图标来确保它有任何背景颜色对比度好。

一个图标,可以通过添加一个对锚杆指定要显示的图标数据图标属性添加到一个按钮。例如,下面的标记:

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

使用jQuery在移动页面上添加按钮和给按钮添加图标

迷你版 添加 data-mini="true" 属性

使用jQuery在移动页面上添加按钮和给按钮添加图标

图标样式列表

jQuery Mobile 自带很多按钮小图标,如下图所示:

左箭头:data-icon="arrow-l"
右箭头:data-icon="arrow-r"
上箭头:data-icon="arrow-u"
下箭头:data-icon="arrow-d"
删除:data-icon="delete"
添加:data-icon="Plus"
减少:data-icon="minus"
检查:data-icon="Check"
齿轮:data-icon="gear"
前进:data-icon="Forward"
后退:data-icon="Back"
网格:data-icon="Grid"
五角:data-icon="Star"
警告:data-icon="Alert"
信息:data-icon="info"
首页:data-icon="home"
搜索:data-icon="Search"

使用jQuery在移动页面上添加按钮和给按钮添加图标

图标定位 data-iconpos

默认情况下,所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos 属性来设置图标的右上方(top)、底部(bottom)、右侧(right)、左侧(left)的文本。例如,标记:

<font color=#0000ff><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

使用jQuery在移动页面上添加按钮和给按钮添加图标

隐藏图片上的文字 data-iconpos="notext"

你也可以创建一个图标按钮,设置 data-iconpos="notext"。按钮插件将隐藏的文字在屏幕上,但把它作为给屏幕阅读器和设备支持工具提示上下文链接标题属性。例如,data-iconpos="right",data-iconpos="notext":

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

使用jQuery在移动页面上添加按钮和给按钮添加图标

迷你和内联

迷你和内联属性可以被添加到产生更紧凑的按钮

使用jQuery在移动页面上添加按钮和给按钮添加图标

自定义图标 data-icon="自定义值"

使用自定义图标,需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类,它的前缀是ui-icon- ,后面的是data-icon值。假如:有一个按钮 data-icon 属性的值为 myapp-email,即 data-icon=“ myapp-email”。那么生产的CSS类是:ui-icon-myapp-email。

然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性,请创建一个白色18x18像素的PNG-8图标,并且保存为Alpha透明度。

.ui-icon-myapp-email {
 background-image: url( "app-icon-email.png" );
}

这将创建标准分辨率的图标,但许多设备都有非常高的分辨率的显示器,就像iPhone 4的视网膜显示器。添加一个高清图标,创建一个图标,36X36像素(18像素大小完全相同的两倍),并添加第二个规则使用WebKit分钟装置像素比例:2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
 .ui-icon-myapp-email {
  background-image: url( "app-icon-email-highres.png" );
  background-size: 18px 18px;
 }
 ...more HD icon rules go here...
}
Javascript 相关文章推荐
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 #Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 #Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 #Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 #Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 #Javascript
详解JavaScript逻辑And运算符
Dec 04 #Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 #Javascript
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
给多个地址发邮件的类
2006/10/09 PHP
php类
2006/11/27 PHP
浅析php header 跳转
2013/06/17 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
售后客服工作职责
2014/06/16 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书