极客笔记如何使用jQuery Mobile创建编辑图标
概述
jQuery mobile提供了许多图标包，我们可以使用data−icon属性中的值来访问它们。由于所有这些图标都用作按钮，所以可以使用基本的HTML按钮来使用data−icon属性。jQuery mobile为网页提供响应式用户界面内容，并使用各种吸引人的图标。除了使用HTML按钮标签外，还可以使用HTML锚标签，并将属性data-role设置为button，这样锚标签就会像按钮一样进行操作，之后我们将使用data icon属性来创建编辑图标。
语法
创建基本HTML按钮和锚标签的语法如下所示。在语法中还包含了一些属性，如data−role、data−icon和data−theme。这些属性用于设置元素的角色、元素中的图标和元素的主题，如暗色或亮色。
<a href="" data-role="" data-icon=""></a>
<button data-icon="" data-theme=""></button>
jQuery Mobile CDN链接
下面是jQuery Mobile的内容传递网络（CDN）链接，在HTML文档的head标签中添加这些链接。
<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>
算法
步骤1 – 在文本编辑器中创建一个HTML文件，并向其中添加HTML样板。
步骤2 – 现在将jQuery Mobile的CDN链接添加到上述HTML文档的head标签中。
步骤3 – 在HTML的body标签内部创建一个HTML锚标记。
<a></a>
步骤4 – 现在为该锚标记添加data-role属性，其值为button，同时还要添加data-icon属性，其值为edit。
<a data-role="button" data-icon="edit"></a>
步骤5 – 使用jQuery Mobile成功创建了编辑图标。
示例
在此示例中，我们将使用jQuery Mobile创建一个编辑图标。为了创建编辑图标，jQuery Mobile提供了一个名为”edit”的值，该值将用作data-icon的键属性的值。
<html>
<head>
<title>Edit icon using jQuery mobile</title>
<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>
</head>
<body>
<h3 style="text-align: center;">jQuery mobile Edit Icon</h3>
<a style="width:1rem;padding: 1rem 0.8rem;text-align: center;margin:auto;margin-top: 2rem;" data-role="button" data-icon="edit"></a>
</body>
</html>
算法
步骤1 – 在文本编辑器中创建一个HTML文件，并向其中添加HTML样板。
步骤2 – 现在将jQuery Mobile的CDN链接添加到上述HTML文档的head标签中。
步骤3 – 在HTML的body标签内部创建一个HTML锚标记。
<a></a>
步骤4 – 现在给它添加一个名为data-role的属性，值为button，同时添加一个名为data-icon的属性，值为edit。
<a data-role="button" data-icon="edit"></a>
步骤5 – 给锚点标签添加一个名为data-theme的属性，并将值设为”b”，代表黑色主题。
<a data-role="button" data-icon="edit" data-theme="b"></a>
步骤6 – 成功地使用jQuery Mobile创建了编辑图标。
示例
在这个例子中，我们将使用jQuery Mobile创建一个带有暗色主题的编辑图标。为此，我们将使用data-icon属性来创建一个jQuery编辑图标，将值设置为“edit”。为了使编辑图标具有暗色主题，我们将向锚点标签添加一个名为data-theme的属性，值为”b”，其中值”b”代表黑色。
<html>
<head>
<titlegt;Edit icon using jQuery mobile</title>
<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>
</head>
<body>
<h3 style="text-align: center;">Dark Theme Edit Icon</h3>
<a style="width:1rem;padding: 1rem 0.8rem;text-align: center;margin:auto;margin-top: 2rem;" data-role="button" data-icon="edit" data-theme="b"></a>
</body>
</html>
结论
正如我们在上面的例子中所看到的，data-icon属性在创建jQuery Mobile图标时起着重要的作用。但是要记住，这个data-icon属性只能与按钮类型的元素一起使用，无论是基本按钮、输入类型按钮还是带有按钮数据角色的锚点标签。应用程序中使用的编辑图标用于执行CRUD操作，即创建（create）、读取（read）、更新（update）和删除（delete）。因此，为了编辑已添加的内容，我们使用编辑图标，向用户指示给定数据可编辑并可由用户进行编辑。