jQuery Mobile 如何创建不同的主题按钮

一种名为jQuery Mobile的高级移动框架使开发人员能够轻松构建针对移动设备进行优化的应用程序和网页。该框架生成具有各种主题的按钮的能力只是其众多优势之一。

我们必须按照预定义的步骤来在我们的代码中实现jquery主题按钮。以下步骤解释了将主题按钮添加到任何网页的整个过程。

示例1

在这里，我们将使用jQuery移动库添加多个不同类型的样式按钮。通过使用Jquery移动的特殊库，按钮将以不同的主题显示在屏幕上。

步骤

步骤1： 下载并安装jQuery Mobile。

步骤2： 在脚本部分包含jquery库。

步骤3： 现在创建不同的主题按钮。首先使用jQuery移动添加一个基本按钮。

步骤4： 使用jQuery Mobile类“ui−btn”创建不同的主题按钮。由于jQuery Mobile为按钮提供了不同的主题，例如默认按钮a，蓝色按钮b，绿色按钮c，红色按钮d，黄色按钮e和橙色按钮f。

步骤5： 您还可以使用相同的库创建自定义按钮。为此，请使用“ui−btn−custom”类创建自定义主题按钮。

步骤6： 添加CSS样式以使按钮在页面上均匀排列。

示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Mobile Button Themes</title>
    <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.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
<a href="https://www.tutorialspoint.com/index.htm" class="ui-btn" style="border-color: blue;  width: 150px; margin-left:45%">Basic Button</a>
<a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-008CBA" style="background-color: blue;  color: white; width: 150px; margin-left:45%">Blue Button</a>
<a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-e" style="background-color: Green;  color: white; width: 150px;margin-left:45%">Green Button</a>
<a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-b" style="background-color: Red;  color: white; width: 150px;margin-left:45%">Red Button</a>
<a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-b" style="background-color: Yellow;  color: white; width: 150px;margin-left:45%">Yellow Button</a>
<a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-s" style="background-color: Orange;  color: white; width: 150px;margin-left:45%">Orange Button</a>
<a href="https://www.tutorialspoint.com/index.htm" class="ui-btn ui-btn-custom" style="background-color:#008CBA ;  color: white; width: 150px;margin-left:45%">Custom Button</a>
</body>
</html>