编程 Javascript

jquery Moblie入门—hello world的示例代码学习

Posted in Javascript onJanuary 08, 2013

1、需要运行JQuery Mobile 移动应用页面，需要下载JQuery Mobile 3个相关插件文件（有多版本），jquery.mobile-1.2.0.min.css、jquery-1.8.3.min.js、jquery.mobile-1.2.0.min.js，JQuery Mobile官网地址：http://jquerymobile.com
2、将插件文件加载到页面中，注意它们的加载顺序，语句如：

<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> 
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> 
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

3、Hello World的示例代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta name="viewport" content="width=device-width,initial-scale=1"/> //设置页面的宽度与移动设备的屏幕宽度相同 
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> 
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> 
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
</HEAD> 
<BODY> 
<div id="page1" data-role="page"> 
<div data-role="header"><h1>JQuery Moblie</h1></div> 
<div data-role="content" class="content"><p>Hello World!</p></div> 
<div data-role="footer"><h1>工作室版权所有</h1></div> 
</div> 
</BODY> 
</HTML>

4、由于JQuery Mobile 已经全面支持HTML5结构，因此，<body>主体元素代码也可以修改为：

<BODY> 
<section id="page1" data-role="page"> 
<header data-role="header"><h1>JQuery Moblie</h1></header> 
<div data-role="content" class="content"><p>Hello World!</p></div> 
<footer data-role="footer"><h1>工作室版权所有</h1></footer> 
</section> 
</BODY>

5、为了更好地在PC端浏览JQuery Mobile 页面在移动终端的执行效果，可以下载Opera移动模拟器，下载地址：http://cn.opera.com/，预览效果图：
jquery Moblie入门—hello world的示例代码学习

jquery Moblie入门—hello world的示例代码学习

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript event 事件解析

Jan 31 Javascript

浅谈javascript的原型继承

Jul 25 Javascript

JavaScript判断textarea值是否为空并给出相应提示

Sep 04 Javascript

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

May 12 Javascript

jQuery实现的精美平滑二级下拉菜单效果代码

Mar 28 Javascript

JS中的eval 为什么加括号

Apr 13 Javascript

js实现纯前端的图片预览

Apr 27 Javascript

微信小程序参数传递实例代码

Mar 20 Javascript

关于Stream和Buffer的相互转换详解

Jul 26 Javascript

vue2.0 使用element-ui里的upload组件实现图片预览效果方法

Sep 04 Javascript

js canvas实现写字动画效果

Nov 30 Javascript

浅入深出Vue之自动化路由

Aug 06 Javascript

jquery Mobile入门—多页面切换示例学习

Jan 08 #Javascript

javascript 系统文件夹文件操作及参数介绍

Jan 08 #Javascript

12款经典的白富美型—jquery图片轮播插件—前端开发必备

Jan 08 #Javascript

滚动图片效果 jquery实现回旋滚动效果

Jan 08 #Javascript

打豆豆小游戏用javascript编写的[打豆豆]小游戏

Jan 08 #Javascript

jQuery.buildFragment使用方法及思路分析

Jan 07 #Javascript

js新闻滚动 js如何实现新闻滚动效果

Jan 07 #Javascript

You might like

咖啡界又出新概念，无需咖啡豆的分子咖啡

2021/03/03 咖啡文化

php版微信自定义回复功能示例

2016/12/05 PHP

PHP两种实现无级递归分类的方法

2017/03/02 PHP

Laravel学习教程之View模块详解

2017/09/18 PHP

Laravel5.1框架注册中间件的三种场景详解

2019/07/09 PHP

Mootools 1.2教程设置和获取样式表属性

2009/09/15 Javascript

js事件监听器用法实例详解

2015/06/01 Javascript

JavaScript中setMonth()方法的使用详解

2015/06/11 Javascript

javascript实现起伏的水波背景效果

2016/05/16 Javascript

vue2.0 axios前后端数据处理实例代码

2017/06/30 Javascript

promise处理多个相互依赖的异步请求(实例讲解)

2017/08/03 Javascript

详解使用React进行组件库开发

2018/02/06 Javascript

详解webpack编译速度提升之DllPlugin

2019/02/05 Javascript

vue 解决移动端弹出键盘导致页面fixed布局错乱的问题

2019/11/06 Javascript

基于vue3.0.1beta搭建仿京东的电商H5项目

2020/05/06 Javascript

[05:29]2014DOTA2国际邀请赛赛后专访：LGDNewbee顺利过关

2014/07/13 DOTA

python中将字典转换成其json字符串

2014/07/16 Python

Python中使用PDB库调试程序

2015/04/05 Python

在Python中操作字典之setdefault()方法的使用

2015/05/21 Python

python中requests小技巧

2017/05/10 Python

Python字典中的键映射多个值的方法(列表或者集合)

2018/10/17 Python

Python3的介绍、安装和命令行的认识(推荐)

2018/10/20 Python

python3使用QQ邮箱发送邮件

2020/05/20 Python

Python的控制结构之For、While、If循环问题

2020/06/30 Python

安装python依赖包psycopg2来调用postgresql的操作

2021/01/01 Python

什么是smarty? Smarty的优点是什么？

2013/08/11 面试题

武汉瑞得软件笔试题

2015/10/27 面试题

大学活动策划书范文

2014/01/10 职场文书

寄语十八大感言

2014/02/07 职场文书

《走一步再走一步》教学反思

2014/02/15 职场文书

高中班主任评语大全

2014/04/25 职场文书

工厂门卫的岗位职责

2014/07/27 职场文书

英语课前三分钟演讲稿

2014/08/19 职场文书

服务行业标语口号

2015/12/26 职场文书

开学第一周日记（三篇范文）

2019/08/23 职场文书

python控制台打印log输出重复的解决方法

2021/05/14 Python