如何使用jQuery Mobile创建Bars图标

概述

Bars图标在小屏幕中用作导航栏的线条。在桌面模式下，屏幕上以完整视图显示导航栏和导航项，但在导航栏的响应式布局中，屏幕上只显示线条。因此，通过将data-role属性定义为 “bars” 并赋予任何元素即可使用jQuery mobile构建Bars图标。bars是一个预定义的data-role属性。也可以使用简单的jQuery实现，但是jQuery mobile提供了在网页上显示图标的响应式方式。

jQuery Mobile内容交付网络（CDN）链接

将这些CDN链接添加到HTML文档的head标签中，并将script标签添加到body标签的末尾。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

语法

使用button标签或者anchor标签可以创建一个菜单图标。

<a data-role="button" data-icon="bars">Bars
<button data-icon="bars">Bars</button>

算法

步骤1 − 在文本编辑器中创建一个HTML文件，并将HTML范例添加到文件中

步骤2 − 现在将jQuery CDN链接添加到头标签和尾标签中。CDN链接如上所示。

步骤3 − 现在使用<button>标签创建一个HTML按钮。

步骤4 − 在按钮上添加data−icon属性，并将data−icon的值设置为 “bars” 。

步骤5 − 成功创建了bars图标。

示例

所以在这个示例中，我们使用HTML按钮标签创建了一个bars图标。默认的bars图标显示为带有默认白色的按钮。

<html>
<head>
<title>bars icon using jQuery mobile</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

</head>
<body>
    <h3 style="text-align: center;color: green;">tutorialspoint.com</h3>
    <strong>
        <p style="text-align: center;">(Bars icon using jQuery mobile)</p>
    </strong>
    <button href="index.html" data-icon="bars"
        style="width: 50%;margin: auto;margin-top: 2rem;">Bars</button>
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</body>
</html>

算法

步骤1 - 在文本编辑器中创建一个HTML文件，并将HTML样板添加到文件中。

步骤2 - 现在添加jQuery CDN链接到head标签和body标签的最后。CDN链接如上所述。

步骤3 - 使用标签创建一个HTML锚元素，并将data-role属性添加到其中，值为button。

步骤4 - 将data-icon属性添加到锚元素中，并将data-icon的值设为“bars”。

步骤5 - 将data-theme属性添加到锚元素中，并将data-theme的值设为“b”，表示为黑色。

步骤6 - 将data-theme属性添加到锚元素中，并将data-theme的值设为“b”，表示为黑色。

示例

在这个示例中，我们将使用锚点标签创建一个锚元素，并添加data-role属性，并将值设置为按钮。在这个示例中，我们将通过添加data-theme值“b”在黑色主题中创建bars图标。

<html>
<head>
<title>bars icon using jQuery mobile dark theme</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
</head>
<body>
    <h3 style="text-align: center;color: green;">tutorialspoint.com</h3>
    <strong>
        <p style="text-align: center;">(Bars icon using jQuery mobile dark theme)</p>
    </strong>
    <a href="index.html" data-role="button" data-icon="bars" data-theme="b"
        style="width: 50%;margin: auto;margin-top: 2rem;">Bars</a>
<script src="http://code.jquery.com/jquery-1.11.1.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
    </script>
</body>
</html>

结论

由于我们使用了data icon属性来制作图标，所以这两个示例的共同之处在于这两个元素都是通过默认或data role属性制作的按钮。 data icon属性通常与button标签一起使用。