如何使用jQuery Mobile制作一个图标位置的按钮

  • Post category:jquery

让我来详细讲解如何使用jQuery Mobile制作一个图标位置的按钮。

步骤一:引入jQuery Mobile库和所需样式

在HTML页面中的<head>标签中引用jQuery Mobile库和所需样式,示例代码如下:

<head>
  <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.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

步骤二:创建按钮

使用HTML标签<a><button>创建按钮,示例代码如下:

<a href="#" class="ui-btn ui-btn-icon-left ui-icon-home">Home</a>
<button class="ui-btn ui-btn-icon-notext ui-icon-gear"></button>

以上代码中,ui-btn表示按钮样式,ui-btn-icon-left表示图标放在文字左侧,ui-icon-home表示使用home图标,ui-btn-icon-notext表示图标不显示文字,ui-icon-gear表示使用gear图标。

我们也可以通过data-iconpos属性来设置图标位置,示例代码如下:

<button class="ui-btn ui-btn-icon-notext" data-icon="gear" data-iconpos="notext"></button>

以上代码中,data-icon表示图标名称,data-iconpos表示图标位置。这里的data-iconpos设置为notext表示不显示文字。

示例说明1

一个图标在左侧、文字在右侧的按钮。

<a href="#" class="ui-btn ui-btn-icon-right ui-icon-delete">Delete</a>

以上代码中,ui-btn-icon-right表示图标放在右侧,ui-icon-delete表示使用delete图标。

示例说明2

一个图标在上侧、文字在下侧的按钮。

<a href="#" class="ui-btn ui-btn-icon-top ui-icon-search">Search</a>

以上代码中,ui-btn-icon-top表示图标放在上侧,ui-icon-search表示使用search图标。

至此,如何使用jQuery Mobile制作一个图标位置的按钮的详细攻略就分享完毕了,希望对你有所帮助。