当前位置：首页 > news >正文

jQuery Mobile 实例

news 2025/10/26 10:05:47

jQuery Mobile 实例

引言

jQuery Mobile 是一个基于 jQuery 的移动开发框架，它为开发者提供了一套简单易用的 API 和丰富的 UI 组件，使得开发移动端网页变得更加高效。本文将通过一些实例来展示 jQuery Mobile 的基本用法和功能。

一、jQuery Mobile 简介

jQuery Mobile 是一个开源的移动端网页开发框架，它基于 jQuery、jQuery UI 和 HTML5 技术。它提供了一套丰富的 UI 组件，如按钮、列表、表单、页面切换等，以及一套响应式设计，使得开发者可以轻松地创建出适应不同屏幕尺寸的移动端网页。

二、jQuery Mobile 实例一：按钮

以下是一个简单的按钮实例，展示了如何使用 jQuery Mobile 创建一个按钮：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>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><div data-role="page"><div data-role="header"><h1>jQuery Mobile 按钮实例</h1></div><div data-role="content"><button id="myButton">点击我</button></div><script>$(document).ready(function(){$("#myButton").click(function(){alert("按钮被点击了！");});});</script></div>
</body>
</html>

在这个例子中，我们创建了一个简单的按钮，并为它添加了一个点击事件，当按钮被点击时，会弹出一个提示框。

三、jQuery Mobile 实例二：列表

以下是一个列表实例，展示了如何使用 jQuery Mobile 创建一个可折叠的列表：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>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><div data-role="page"><div data-role="header"><h1>jQuery Mobile 列表实例</h1></div><div data-role="content"><ul data-role="listview" data-inset="true"><li data-role="list-divider">分类一</li><li><a href="#">列表项1</a></li><li><a href="#">列表项2</a></li><li data-role="list-divider">分类二</li><li><a href="#">列表项3</a></li><li><a href="#">列表项4</a></li></ul></div></div>
</body>
</html>

在这个例子中，我们创建了一个可折叠的列表，列表项被分为两个分类，每个分类之间有一个分隔线。

四、jQuery Mobile 实例三：表单

以下是一个表单实例，展示了如何使用 jQuery Mobile 创建一个简单的表单：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>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><div data-role="page"><div data-role="header"><h1>jQuery Mobile 表单实例</h1></div><div data-role="content"><form><label for="name">姓名：</label><input type="text" name="name" id="name" data-inline="true"><label for="email">邮箱：</label><input type="email" name="email" id="email" data-inline="true"><input type="submit" value="提交"></form></div></div>
</body>
</html>

在这个例子中，我们创建了一个简单的表单，包括姓名和邮箱两个输入框，以及一个提交按钮。

五、jQuery Mobile 实例四：页面切换

以下是一个页面切换实例，展示了如何使用 jQuery Mobile 创建多个页面，并在它们之间进行切换：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>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><div data-role="page" id="page1"><div data-role="header"><h1>页面1</h1></div><div data-role="content"><a href="#page2" data-transition="slide">跳转到页面2</a></div></div><div data-role="page" id="page2"><div data-role="header"><h1>页面2</h1></div><div data-role="content"><a href="#page1" data-transition="slide">跳转到页面1</a></div></div>
</body>
</html>

在这个例子中，我们创建了两个页面，并通过链接在不同的页面之间进行切换。