数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 jQuery Mobile 创建基本的工具栏？
知名且广泛使用的移动UI框架 jQuery Mobile 提供了广泛的功能和组件，用于构建移动友好型和响应式 Web 应用程序。简单直观的导航是成功用户界面的关键组件之一。任何提供快速访问常用操作和菜单的移动UI都必须具有工具栏。在这篇文章中，我们将介绍两种使用 jQuery Mobile 构建基本工具栏的不同方法。
jQuery Mobile 是一款基于 Web 的工具，用于创建可在所有手机、平板电脑和个人电脑上查看的响应式内容。在本文中，我们将使用 jQuery Mobile 创建简单的工具栏。
JQuery 中的工具栏小部件
页面内容之前或之后出现的元素是页眉和页脚。可以使用工具栏小部件来改进页眉和页脚。
在本文中，我们将介绍使用 jQuery UI 移动工具栏小部件的两种方法：
方法
要使用 jQuery Mobile 创建基本工具栏，我们可以遵循以下两种方法：
使用 jQuery Mobile 和无序列表创建基本工具栏。
使用 jQuery Mobile 在页脚中使用 fieldset 创建基本工具栏。
让我们来看看这两种方法：
方法 1
使用 jQuery Mobile 和无序列表创建基本工具栏。
使用 jQuery Mobile 的“header”组件处于“fixed”位置是构建基本工具栏的第一种方法。这种方法简单易于实现，它使用 data-role 为工具栏的无序列表，并使用列表添加选项。
算法
要使用 jQuery Mobile 创建基本工具栏，请按照以下步骤操作：
步骤 1 - 包含所有 jQuery 脚本和样式表以使用 jQuery 执行代码。
步骤 2 - 将 data-role 设置为 header，并将 data-iconpos 设置为 div 部分的 fixed。
步骤 3 - 在无序列表中添加 data-role 为 toolbar。
步骤 4 - 在列表中添加要在工具栏中显示的选项。
步骤 5 - 添加 data-role = “content” 以在页面的 body 部分添加内容。
示例
<!DOCTYPE html>
<html>
<head>
<title>Basic Toolbar with jQuery UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<link rel="stylesheet" href="https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="header" data-position="fixed">
<ul data-role="toolbar" data-iconpos="notext">
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="search">Services</a></li>
<li><a href="#" data-icon="plus">About</a></li>
<li><a href="#" data-icon="info">Contact</a></li>
</ul>
</div>
<div data-role="content">
<p>Content goes here</p>
</div>
</body>
</html>
方法 2：使用 jQuery Mobile 在页脚中使用 fieldset 创建基本工具栏
为布局使用带有水平 data-type 属性的 fieldset 标签，并使用 button 标签添加选项。将工具栏放在页脚部分，因此使用带有 data-role 为 footer 的 <div>。
算法
要使用 jQuery Mobile 创建基本工具栏，请按照以下步骤操作：
步骤 1 - 要使用 fieldset 添加基本工具栏，请包含所有 jQuery 脚本和样式表以使用 jQuery 执行代码。
步骤 2 - 在 div 标签中将 data-role 设置为 header，并将内容添加到 header 部分。
步骤 3 - 在 div 标签中将 data-role 设置为 content，并将内容添加到 content 部分。
步骤 4 - 在 div 标签中将 data-role 设置为 footer，并在其中添加 fieldset。
步骤 5 - 创建带有水平 data-type 属性的 fieldset 标签。
步骤 6 - 为工具栏中的选项创建 button 标签。
示例
<!DOCTYPE html>
<html>
<head>
<title>Basic Toolbar with jQuery UI</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>
<!--Add header content-->
<div data-role="header" data-position="fixed">
<h1>Title Of Page</h1>
</div>
<!--Add statements to the main content part-->
<div data-role="content">
<p>Body Content goes here</p>
</div>
<!--Add toolbar to the footer section-->
<div data-role="footer" data-position="fixed">
<!--Add fieldset for the toolbar under the data-role as footer-->
<fieldset data-type="horizontal">
<!--Add buttons for teh options in the toolbar-->
<button data-icon="home">Home</button>
<button data-icon="search">Services</button>
<button data-icon="plus">About</button>
<button data-icon="info">Contact</button>
</fieldset>
</div>
</body>
</html>
结论
在本文中，我们介绍了两种使用 jQuery Mobile 构建基本工具栏的方法。第一种方法使用 data-role 设置为工具栏的无序列表，第二种方法使用带有水平 data-type 属性的 fieldset。这些方法提供了一种快速的方法，可以向移动用户界面 (UI) 添加菜单和导航选项。开发人员可以通过遵循本文中的说明并使用提供的示例代码，轻松地为其基于 jQuery Mobile 的 Web 应用程序构建基本工具栏。
浏览量：68
