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 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue实现打印功能的两种方法
Sep 07 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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
解析thinkphp中的导入文件标签
2013/06/20 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python numpy数组复制使用实例解析
2020/01/10 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
财产公证书格式
2014/04/10 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
代办委托书怎么写
2014/08/01 职场文书
质量月活动总结
2014/08/26 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript