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

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

样式链接按钮

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

<a href="https://www.jb51.net/index.html" data-role="button">Link button</a>

2015124153838583.jpg (822×91)

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

2015124153901623.jpg (822×87)

迷你版 data-mini="true"

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

<a href="https://www.jb51.net/index.html" data-role="button" data-mini="true">Link button</a>

2015124153922546.jpg (819×86)


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

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

<a href="https://www.jb51.net/index.html" data-role="button" data-icon="delete">Delete</a>

2015124154035547.jpg (818×91)

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

2015124154055360.jpg (818×66)

图标样式列表

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"

2015124154124821.gif (402×1862)

图标定位 data-iconpos

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

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

2015124154228083.jpg (826×421)

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

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

<a href="https://www.jb51.net/index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

2015124154254718.jpg (826×66)

迷你和内联

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

2015124154336075.jpg (823×88)

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzzyd.html