jquery mobile app案例
时间: 2023-04-25 14:03:13 浏览: 194
jQuery Mobile是一个基于jQuery的JavaScript库,用于开发移动设备上的网页应用。它具有跨平台和跨浏览器的能力,可以让您使用统一的代码开发多种类型的移动设备。jQuery Mobile提供了丰富的UI组件,如导航栏、按钮、列表、表单等,可以帮助开发者快速构建出美观的移动应用。
一个简单的jQuery Mobile应用示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Mobile App</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Mobile App</h1>
</div>
<div data-role="main" class="ui-content">
<p>Welcome to my mobile app!</p>
<a href="#about" class="ui-btn">About</a>
</div>
<div data-role="footer">
<h1>Copyright © 2022</h1>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About</h1>
</div>
<div data-role="main" class="ui-content">
<p>This is a simple mobile app built with jQuery Mobile.</p>
</div>
</div>
</body>
</html>
```
在这个例子中,我们使用了jQuery Mobile提供的data-role属性来定义页面的各个部分,如header、main、footer等。我们还使用了jQuery Mobile提供的UI组件,如按钮、导航栏等。
阅读全文