jQuery mobile按钮分很多种类,但是很实用,也很省事省力。
我自己学习了jQuery mobile之后自己动手写了一点。
技术拙劣,只为成长。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">页头</div>
<div data-role="content">内容
<div data-role="controlgroup"><!--jq mobile组合按钮垂直分布(默认),horizontal水平, vertical垂直分布-->
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--默认情况时的样子-->
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--水平情况时的样子-->
</div>
<div data-role="controlgroup" data-type="vertical">
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a>
<a href="" data-role="button">123</a><!--水平情况时的样子-->
</div>
<button>按钮(一般用来提交表单)</button>
<input type="button" value="按钮(一般用来提交表单)"/>
<a href="" data-shadow="true" data-role="button">true(有阴影)|false(没有阴影)</a>
<a href="" data-role="button" data-shadow="false" >true(有阴影)|false(没有阴影)</a>
<a href="#" data-role="button" data-shadow="false">123</a>
</div>
<div data-role="footer">页尾</div>
</div>
</body>
</html>