jQuery Mobile教程:对按钮进行自动增强设计

本文我们来通过对比按鈕自动增强前后的html代码，直观地让大家来深度认识一下jQuery Mobile中如何对按钮进行自动增强设计的！
 
1、先看链接按钮：

我们在页面编写的代码：

<a data-theme="a" data-role="button">我是链接按钮</a>	   

我们来看一下经过自动增强后的：

<a data-theme="a" data-role="button" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a" data-shadow="true" data-wrapperels="span"> 		<span class="ui-btn-inner ui-btn-corner-all"> 			<span class="ui-btn-text">我是链接按钮</span> 		</span> 	</a> 

图示：

2、再看一下真正的按钮：

我们在页面编写的代码：

<button>button</button> 

我们再来看一下经过自动增强后的：

//省去div的一些与本文主题无关的一些自定义属性等 	<div class="ui-btn ui-shadow ui-btn-corner-all ui-btn-block"> 		<span class="ui-btn-inner ui-btn-corner-all"> 			<span class="ui-btn-text">button</span> 		</span> 		<button class="ui-btn-hidden">button</button> 	</div> 

图示：

下面我们来看看几个jquery.mobile-1.1.0.css的内部样式细节

1、ui-btn

//#1743 .ui-btn{ 	display:block; 	text-align:center; 	cursor:pointer; 	position:relative; 	margin:.5em 5px; 	padding:0; } 

2、ui-btn-inner

//#701 .ui-btn-inner{ 	border-top:1px solid #fff; 	border-color:rgba(255,255,255,.3); }  //#1745 .ui-btn-inner{ 	padding:.6em 20px; 	min-width:.75em; 	display:block; 	text-overflow:ellipsis;    //做了溢出处理哦！ 	overflow:hidden; 	white-space:nowrap; 	position:relative; 	zoom:1; } 

说明：
1、注意单位设置，因为考虑移动场景，尽量使用em这些单位 2、做了溢出的处理，但是需要支持text-overflow:ellipsis

3、ui-btn-text

//#1759 .ui-btn-text{ 	position:relative; 	width:100%; 	z-index:1; } 

4、ui-btn-hidden

//#1746 .ui-btn input, .ui-btn button{ 	z-index:2; } //#1802 .ui-btn-hidden{ 	position:absolute; 	top:0; 	left:0; 	width:100%; 	height:100%; 	-webkit-appearance:button; 	opacity:.1; 	filter:Alpha(Opacity=.0001); 	cursor:pointer; 	background:#fff; 	background:rgba(255,255,255,0); 	font-size:1px; 	border:none; 	text-indent:-9999px; }	 

说明：
1、采用绝对定位 + opacity + z-index(比ui-btn-text的1要高，设置为2) 2、使用了-webkit-appearance:button 3、border:none的设置 4、文字采用text-indent:-9999px这种老手段

5、ui-btn-corner-all

//#977 .ui-btn-corner-all{ 	-moz-border-radius:1em; 	-webkit-border-radius:1em; 	border-radius:1em; } //#1000 .ui-btn-corner-all{ 	-moz-background-clip:padding-box; 	-webkit-background-clip:padding-box; 	background-clip:padding-box; } 

说明
1、有关border-radius可以查看这里

2、有关background-clip可以查看这里

还记得前面我们说的内联链接按钮吗？

给a设置一个data-inline="true"

	<a data-role="button" data-inline="true">内联链接按钮</a> 

图示：

我们看到区别就是多了一个样式规则ui-btn-inline，我们来看一下源码：

//#1747 .ui-btn-inline{ 	display:inline-block; } 

还记得前面我们说的图标按钮吗？

给a设置一个data-icon="home"

	<a data-role="button" data-icon="home">主页图标按钮</a> 

图示：

我们看到有两个变化
1、a部分加了一个规则ui-btn-icon-left
2、最内层的span多了一个同级节点

//#1761 .ui-btn-icon-left .ui-btn-inner{ 	padding-left:40px; }  /*******以此类推就知道其他3个位置的规则如下 start*********/  //#1762 .ui-btn-icon-right .ui-btn-inner{ 	padding-right:40px; }  //#1763 .ui-btn-icon-top .ui-btn-inner{ 	padding-top:40px; }  //#1764 .ui-btn-icon-bottom .ui-btn-inner{ 	padding-bottom:40px; }  /*******以此类推就知道其他3个位置的规则如下 end*********/  //#1121 .ui-icon{ 	width:18px; 	height:18px; }  //#1779 .ui-btn-icon-left .ui-btn-inner .ui-icon{ 	position:absolute; 	top:50%; 	margin-top:-9px; }  //#1781 .ui-btn-icon-left .ui-icon{ 	left:10px; } 	 //#794 .ui-icon{ 	background:#666; 	background:rgba(0,0,0,.4); 	background-image:url(images/icon-18-white.png); 	background-repeat:no-repeat; 	-moz-border-radius:9px; 	-webkit-border-radius:9px; 	border-radius:9px; }  //#885 .ui-icon-home{ 	background-position:-576px 50%; } 

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索button
， ui
， 按钮
， 链接
， position
， 自动
px
jquery官网、jquery api、jquery下载、jquery教程、jquery ajax，以便于您获取更多的相关知识。