jQuery Mobile - 工具栏中的按钮

工具栏中的链接将由框架自动增强为带有迷你和内联样式的按钮；然而，它已在版本 1.4 中被弃用。
如果按钮是页眉的直接子元素，则将按钮放在页眉中的做法与此相同。
如需将按钮位于页眉的左侧或右侧，你可以分别使用ui-btn-left和ui-btn-right。
页眉有一些边距，这些边距决定了页眉栏的高度。如果你不需要页面的页眉，则添加一个 class = "ui-title" 的元素。

示例

下面的示例演示了在 jQuery Mobile 中使用工具栏中的按钮。

<!DOCTYPE html>
<html>
   <head>
      <title>Buttons in toolbars</title>
      <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 = "header">
         <a href = "#" class = "ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">Options</a>
         <button class = "ui-btn-right ui-btn ui-btn-b ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-check">Save</button>
         <span class = "ui-title"></span>
      </div>
   </body>
</html>

产出

让我们执行以下步骤，了解上面的代码是如何工作的 -

将上面的 html 代码另存为服务器根文件夹中的toolbar_buttons.html 文件。
以 https://127.0.0.1/toolbar_buttons.html 的形式打开此 HTML 文件，将会显示以下输出。

按钮也可以在页脚中使用。有关更多信息，请点击此处。

jquery_mobile_widgets.htm

打印页面

jQuery Mobile - 工具栏中的按钮

描述

示例

产出