编程 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获得CheckBoxList选中的数量

Oct 27 Javascript

js 实现日期灵活格式化的小例子

Jul 14 Javascript

JavaScript实现图片DIV竖向滑动的方法

Apr 25 Javascript

深入学习JavaScript对象

Oct 13 Javascript

JS中的二叉树遍历详解

Mar 18 Javascript

JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

Nov 01 Javascript

ionic中列表项增加和删除的实现方法

Jan 22 Javascript

浅谈ajax在jquery中的请求和servlet中的响应

Jan 22 jQuery

angular5 子组件监听父组件传入值的变化方法

Sep 30 Javascript

Vue 实现前端权限控制的示例代码

Jul 09 Javascript

如何在postman测试用例中实现断言过程解析

Jul 09 Javascript

js实现缓动动画

Nov 25 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

《神奇女侠：血脉》神力女超人大战犯罪公司

2020/04/09 欧美动漫

php调用dll的实例操作动画与代码分享

2012/08/14 PHP

关于使用coreseek并为其做分页的介绍

2013/06/21 PHP

PHP实现小偷程序实例

2016/10/31 PHP

PHP date()格式MySQL中插入datetime方法

2019/01/29 PHP

一些mootools的学习资源

2010/02/07 Javascript

js获取图片大小的函数代码

2011/09/20 Javascript

jquery ajax 简单范例(界面+后台)

2013/11/19 Javascript

javascript分页代码实例分享(js分页)

2013/12/13 Javascript

js报$ is not a function 的问题的解决方法

2014/01/20 Javascript

举例讲解Node.js中的Writable对象

2015/07/29 Javascript

JavaScript文档碎片操作实例分析

2015/12/12 Javascript

AngularJS实践之使用NgModelController进行数据绑定

2016/10/08 Javascript

浅析javascript中的Event事件

2016/12/09 Javascript

Javascript 使用ajax与C#获取文件大小实例详解

2017/01/13 Javascript

原生JS实现自定义滚动条效果

2020/10/27 Javascript

基于Bootstrap实现城市三级联动

2017/11/23 Javascript

JavaScript两种计时器的实例讲解

2019/01/31 Javascript

[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来

2018/08/17 DOTA

python函数形参用法实例分析

2015/08/04 Python

深入解析Python编程中super关键字的用法

2016/06/24 Python

python利用正则表达式搜索单词示例代码

2017/09/24 Python

python绘制热力图heatmap

2020/03/23 Python

python flask搭建web应用教程

2019/11/19 Python

Python实现定时监测网站运行状态的示例代码

2020/09/30 Python

Goodee官方商店：迷你投影仪

2021/03/15 全球购物

临床医师专业个人自我评价

2014/01/08 职场文书

科学发展观演讲稿

2014/09/11 职场文书

优秀共青团员事迹材料

2014/12/25 职场文书

退税申请报告怎么写

2015/05/18 职场文书

学前班教学反思

2016/02/24 职场文书

乡镇团代会开幕词

2016/03/04 职场文书

优秀创业计划书分享

2019/07/19 职场文书

正确使用MySQL INSERT INTO语句

2021/05/26 MySQL

MySQL深度分页(千万级数据量如何快速分页)

2021/07/25 MySQL

python中的random模块和相关函数详解

2022/04/22 Python