jQuery Mobile - 表单按钮
jQuery Mobile 支持可根据您的需要自定义的按钮样式。 <input> 元素用于对表单中的按钮进行编码。 以下是用于修改按钮样式的属性。
| 序号 | 属性 | 值 | 描述 |
|---|---|---|---|
| 1 | data-corners | true/false | 设置按钮的角。 |
| 2 | data-icon | Different icons | 在按钮上设置不同的图标。 |
| 3 | data-iconpos | left/right/bottom/ top/notext | 设置按钮上图标的位置。 |
| 4 | data-inline | true/false | 将按钮设置为内联。 |
| 5 | data-mini | true/false | 将按钮设置为小。 |
| 6 | data-shadow | true/false | 设置按钮的阴影。 |
示例
以下示例演示了 jQuery Mobile 中表单按钮的使用。
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page">
<div data-role = "header">
<h2>Form Button</h2>
</div>
<div data-role = "main" class = "ui-content">
<form method = "post" action = "jquery_mobile/demo.php">
<label for = "fname">First Name</label>
<input type = "text" name = "fname">
<label for = "lname">Last Name</label>
<input type = "text" name = "lname">
<input type = "submit" value = "Submit Button" data-inline = "true"
data-corner = "true">
<input type = "reset" value = "Reset Button" data-inline = "true"
data-corner = "true">
</form>
</div>
</div>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 form_buttons.html 文件。
将此 HTML 文件打开为 http://localhost/form_buttons.html，将显示以下输出。
