使用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 相关文章推荐
use jscript Create a SQL Server database
Jun 16 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
原生JS实现拖拽功能
Dec 16 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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
Apache设置虚拟WEB
2006/10/09 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
JavaScript 异步调用
2017/10/25 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python编程中的异常处理教程
2015/08/21 Python
Python常用算法学习基础教程
2017/04/13 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Django中的Model操作表的实现
2018/07/24 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
在pytorch中查看可训练参数的例子
2019/08/18 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
银行求职信范文
2014/05/26 职场文书
农村文化建设标语
2014/10/07 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
夫妻吵架保证书
2015/05/08 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang