承蒙老师的启发，开始学习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中对话框、工具栏、按钮、表单、布局和插件的...
PhoneGap+jQueryMobile开发Android应用实例，搭建开发环境
**开发环境的搭建** 1. **下载并安装 JAVA SDK**：JAVA SDK 是开发 Android 应用的基础，提供了编译和运行 Android 应用所需的工具。 2. **下载并安装 Android SDK**：Android SDK 包含了开发 Android 应用所需的...
Node.js和jQuery Mobile是两种非常不同的技术，但它们在Web开发领域中都扮演着重要的角色。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行编程，实现了全栈开发的...
HTML5开发环境搭建需要关注四个重要点：Javascript和Jquery mobile的编辑器、HTML5的各个元素的Inspector、Javascript远程断点debug、移动平台Javascript开发模式。只有这样，我们才能搭建一套完善的基于移动平台的...
搭建基本环境 首先，你需要在 HTML 文件中引入 jQuery 和 jQuery Mobile 的库。通常，我们会在 `<head>` 标签内添加以下代码来加载必要的资源： ```html <!DOCTYPE html> , initial-scale=1"> ...
【App_Project：Node和jQuery Mobile App】 在当前的数字化时代，构建移动应用程序是企业与用户交互的重要手段。"App_Project"是一个使用Node.js后端技术和jQuery Mobile前端框架创建的项目，旨在提供一个高效的、...
基于JQuery Mobile的商场购物Web APP 入口文件：index.html 运行环境：HBuilder,手机模拟器 在本地运行需要搭建本地服务器并创建对应数据库 基于JQuery Mobile语法，使用少量原生JS CSS，并使用php与mySql数据库交互
1. **PhoneGap环境搭建**：首先，我们需要安装PhoneGap的开发环境，包括Node.js、Apache Cordova和对应的平台SDK（如Android SDK或iOS SDK）。接着，使用命令行工具创建一个新的PhoneGap项目，并配置项目的配置文件`...
* jQuery和jQuery Mobile的使用 * Highcharts的使用 * 实时数据的显示 知识点十三：CoAP协议 * CoAP的概念 * CoAP命令行工具的使用 * CoAP Hello World程序的编写 * CoAP数据库查询的实现 本资源提供了一个系统的...
jQueryMobile构建在jQuery基础之上，提供了触摸友好的导航、页面过渡效果和可自定义的主题，使得开发者可以快速地创建一致且吸引人的跨平台移动应用界面。 文件名称"jQueryMoble_a92.org_source"可能表示这是jQuery...
This tutorial describes how you can set up an development environment for building Android...iPhone, Palm, Windows Mobile, Symbian, so you can use the same sources to create apps for multiple platforms).
教程可能讲解了如何搭建ionic环境，使用Angular指令和组件，结合Cordova插件访问设备硬件功能，以及如何发布到不同的应用商店。 总的来说，这份《菜鸟教程网移动端教程PDF》是移动开发初学者的一站式学习资源，涵盖...
总的来说，这个压缩包提供了一套手机Web网站的基础架构，使用HTML和CSS作为基础，结合jQueryMobile或Bootstrap的框架，使得开发者能够快速搭建适应不同移动设备的网站。对于初学者或希望快速创建手机网站的用户来说...
PhoneGap移动开发简单案例中，主要涉及到的技术和工具包括PhoneGap框架、jQuery Mobile库、Android SDK、Java环境、ANT工具、IDEA集成开发环境以及Web开发基础。通过这样的案例，开发者可以快速入门PhoneGap，理解跨...
1. cordova简介 Apache Cordova是...它可以与流行的UI框架，例如：Ionic、jQuery Mobile等相结合使用。 2. cordova开发环境搭建 以android为例，完成开发环境搭建。需要依次下载安装： android SDK Tools Gradle N
【Eclipse】是Java开发的重要集成开发环境（IDE），支持多种语言，包括Java、JavaScript等。Eclipse提供了一整套开发工具，包括代码编辑器、调试器、构建工具等，方便开发者编写、测试和调试代码。 【Tomcat】是...
3. **jQuery Mobile**：集成jQuery Mobile库，简化了移动设备上的用户体验设计。 4. ** Bundling and Minification**：自动合并和压缩CSS、JavaScript文件，提高网站加载速度。 5. **Enhanced Authentication**：...
3. 移动端动态网页开发中要求掌握jQueryMobile。 考试形式为闭卷的上机考试，包括理论考试和实操考试两部分。理论考试包含50道题目，其中单选题30道，多选题15道，判断题5道；实操考试则包含3-5道实践性试题，如...
二、ASP.NET Mobile开发环境搭建 首先，你需要安装Visual Studio，这是微软官方提供的集成开发环境，支持ASP.NET项目创建。确保选择包含ASP.NET和Web开发的版本。然后，安装.NET Framework或.NET Core，根据项目...