jquery mobile 按钮图标

最新推荐文章于 2025-06-03 09:11:20 发布

九天之凤

最新推荐文章于 2025-06-03 09:11:20 发布

阅读量1.9k

点赞数

jquery-mobile 专栏收录该内容

2 篇文章

订阅专栏

本文介绍jQueryMobile框架中的图标使用方法，包括预设图标、图标位置调整、隐藏图标文本及自定义图标等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

图标样式列表

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"

图标定位 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>

隐藏图片上的文字 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>

迷你和内联

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

自定义图标 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...
}

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 85px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 85px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
    .nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
    .nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
    #chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
    #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }
    #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }
    #beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }
    #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }
    #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:90px; min-height:90px;">
	<div data-role="content" > 
    	<div data-role="footer" class="nav-glyphish-example">
    		<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    		<ul>
    			<li><a href="#" id=""chat" data-icon="custom">Chat</a></li>
    			<li><a href="#" id=""email" data-icon="custom">Email</a></li>
    			<li><a href="#" id=""skull" data-icon="custom">Danger</a></li>
    			<li><a href="#" id=""beer" data-icon="custom">Beer</a></li>
    			<li><a href="#" id=""coffee" data-icon="custom">Coffee</a></li>
    		</ul>
    		</div>
    	</div>
	</div>
</div>
</body>
</html>