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的示例代码学习
Javascript 相关文章推荐
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 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
PHP入门学习笔记之一
2010/10/12 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
jquery中通过父级查找进行定位示例
2013/06/28 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
浅谈Python的异常处理
2016/06/19 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
python opencv实现图像配准与比较
2021/02/09 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
银行委托书范本
2014/04/04 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
工商局调档介绍信
2015/10/22 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL