承蒙老师的启发，开始学习jQueryMobile知识。Write less,Do More.做手机web界面，绝对给力。
首先到http://jquerymobile.com/网站下载相应类库，如jquery.mobile-1.0a4.1.zip，jquery-ui-1.8.11.custom.zip。
根据官网上要求，引入相应文件。如图1,代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="jquery/jquery.mobile-1.0a4.1.min.css" />
<script src="jquery/jquery-1.5.1.min.js"></script>
<script src="jquery/jquery-ui-1.8.11.custom.min.js"></script>
<script src="jquery/jquery.mobile-1.0a4.1.min.js"></script>
<title>JQueryMobile</title>
</head>
<body>
<div data-role="page"id="home">
<div data-role="header">
<h1>WJGilmore, LLC</h1>
</div>
<div data-role="content">
<strong>Easy PHP Websiteswiththe Zend Framework</strong><br/>
<p>
<em>Easy PHP Websiteswiththe Zend Framework</em>isthe ultimate
introductiontothe popular Zend Framework, covering practical topics
including Doctrine, Zend_Db, Zend_Test, automated deployment,andmuch
more!
</p>
</div>
<div data-role="footer">
<h1>Copyright ©2010W.J. Gilmore, LLC</h1>
</div>
</body>
</html>
jQuery真的很强大啊，通过data-role 属性将可以为我们布局界面。
我是通过Opera Mobile for Windows 模拟器 ，模拟手机浏览器效果。如图2
![]()
![]()
- 大小: 33.8 KB
- 大小: 52.3 KB
分享到：
相关推荐
本书分为4篇，*篇是移动开发入门篇，介绍了jQuery Mobile、HTML 5和移动开发的一些基础知识，以及如何搭建开发环境；第二篇是jQuery Mobile基础篇，介绍了jQuery Mobile中对话框、工具栏、按钮、表单、布局和插件的...
1. **环境搭建**： - 在文档的 `<head>` 部分引入必要的资源： - `viewport` 元信息确保页面能够适配不同设备屏幕。 - 从 CDN 引入 JQuery 和 JQuery Mobile 的 CSS 及 JS 文件。 - 确保使用的 JQuery 版本至少...
- **标签：“jQueryMobile”** - **关键词提取**：jQuery Mobile作为标签，明确了本书的重点技术领域和工具选择。 - **关联性**：jQuery Mobile是构建响应式移动Web应用的强大框架，这直接关联到书籍的主题。 ###...
通过掌握这些技巧，开发者可以提高在jQuery Mobile环境下的开发效率，创建出更加用户友好和功能丰富的移动应用。同时，不断学习和实践新的技术和最佳实践，可以使jQuery Mobile应用保持与时俱进，满足不断变化的移动...
#### 四、开发环境搭建 为了开始使用 jQuery Mobile 进行开发，首先需要准备以下工具和资源： - **文本编辑器**：推荐使用 Sublime Text、Atom 或 Visual Studio Code。 - **jQuery Mobile 库**：可以从官方网站下载...
1. **环境搭建**： - 首先，确保你的项目中包含了jQuery和jQuery Mobile的库文件。 - 引入jQuery库，然后引入jQuery Mobile的CSS和JS文件。 2. **基本页面结构**： - 使用`<div data-role="page">`来创建一个...
2. **开发环境搭建**：接下来，作者可能会指导读者如何设置开发环境，包括安装必要的工具如文本编辑器、浏览器等，并确保jQuery Mobile库正确加载到项目中。 3. **核心概念和组件**：书中详细解释了jQuery Mobile中...
- **概念理解**: 为了快速搭建一个jQuery Mobile项目，了解其基本的HTML结构至关重要。 - **实践操作**: - 在HTML文档中包含必要的元信息，如`<meta name="viewport">`，确保页面能在不同设备上正确显示。 - ...
1. **环境搭建**：首先安装必要的开发工具，如文本编辑器、浏览器等，并确保网络连接正常。 2. **创建项目结构**：根据需求规划项目目录结构，例如将CSS、JS文件单独存放。 3. **引入jQuery Mobile**：通过CDN链接...
本文将详细介绍如何在Android环境下配置jQueryMobile，让你能够一步步地搭建开发环境。 **1. 基础开发理解** 在JavaEE开发中，我们需要： 1. 安装JDK作为开发环境，确保Java程序的编译和运行。 2. 选择一个开发...
PhoneGap+jQueryMobile开发Android应用实例，搭建开发环境
Node.js和jQuery Mobile是两种非常不同的技术，但它们在Web开发领域中都扮演着重要的角色。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程，实现了全栈开发的...
搭建基本环境 首先，你需要在 HTML 文件中引入 jQuery 和 jQuery Mobile 的库。通常，我们会在 `<head>` 标签内添加以下代码来加载必要的资源： ```html <!DOCTYPE html> , initial-scale=1"> ...
【App_Project：Node和jQuery Mobile App】 在当前的数字化时代，构建移动应用程序是企业与用户交互的重要手段。"App_Project"是一个使用Node.js后端技术和jQuery Mobile前端框架创建的项目，旨在提供一个高效的、...