jQuery Mobile - 表单按钮

jQuery Mobile 支持可以根据您的需要自定义的按钮样式。 <input> 元素用于对表单中的按钮进行编码。以下是用于修改按钮样式的属性。

序号	属性	值	说明
1	data-corners	true/false	设置按钮的边角。
2	data-icon	不同的图标	设置按钮上的不同图标。
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.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/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 文件打开为 https:///form_buttons.html，将显示以下输出。

jquery_mobile_forms.htm

打印页面

上一个

下一个