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 相关文章推荐
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
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
使用adodb lite解决问题
2006/12/31 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python格式化日期时间操作示例
2018/06/28 Python
python list格式数据excel导出方法
2018/10/31 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
农场厂长岗位职责
2013/12/28 职场文书
小学生演讲稿
2014/01/12 职场文书
会计求职信
2014/05/29 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
收入证明范本
2015/06/12 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android