创建按钮
- 使用
<button>元素 - 使用
<input>元素 - 使用
data-role="button"的<a>元素，<a href="#" data-role="button">按钮</a>
推荐使用 data-role="button" 的 <a> 元素来创建页面之间的链接，而 <input> 或 <button> 元素用于表单提交。
data-* | 描述
- | :-: | -:
data-inline="true" | 使元素形成行内按钮，<a href="#" data-role="button" data-inline="true">按钮</a>
data-role="controlgroup 与 data-type="horizontal / vertical | 规定水平或垂直地组合按钮
data-rel="back" | 后退按钮
data-corners | true / false，规定按钮是否有圆角
data-mini | true / false，规定是否是小型按钮
data-shadow | true / false，规定按钮是否有阴影
组合按钮
data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮；
默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角。
后退按钮
如需创建后退按钮，请使用 data-rel="back" 属性（会忽略锚的 href 值）
实践
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Resource-type" content="Document"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>button</title>
<link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<style>
.line{height:0;border-top:1px solid #2ad;margin:20px 0;}
</style>
</head>
<body>
<button>button</button>
<input type="button" value="input"/>
<a href="#" data-role="button">a</a>
<div class="line"></div>
<!--行内按钮 data-inline="true"-->
<a href="#" data-role="button" data-inline="true">行内按钮</a>
<div class="line"></div>
<!--组合按钮-->
<!--水平组合按钮-->
<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
<!--垂直组合按钮-->
<div data-role="controlgroup" data-type="vertical">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
<div class="line"></div>
<!--后退按钮-->
<a href="#" data-role="button" data-rel="back">返回</a>
<div class="line"></div>
<!--data-* 属性-->
<!--是否有圆角-->
<a href="#" data-role="button" data-corners="false">没有圆角的按钮</a>
<!--小型按钮-->
<a href="#" data-role="button" data-mini="true">小型按钮</a>
<!--没有阴影的按钮-->
<a href="#" data-role="button" data-shadow="false">没有阴影的按钮</a>
</body>
</html>
网友评论