jqueryMoblie入门—helloworld的示例代码学习
2023-06-13 09:14:43 时间
1、需要运行JQueryMobile移动应用页面,需要下载JQueryMobile3个相关插件文件(有多版本),jquery.mobile-1.2.0.min.css、jquery-1.8.3.min.js、jquery.mobile-1.2.0.min.js,JQueryMobile官网地址:http://jquerymobile.com
2、将插件文件加载到页面中,注意它们的加载顺序,语句如:
复制代码代码如下:
2、将插件文件加载到页面中,注意它们的加载顺序,语句如:
<linkhref="Css/jquery.mobile-1.2.0.min.css"rel="Stylesheet"type="text/css"/>
<scriptsrc="Js/jquery-1.8.3.min.js"type"text/javascript"></script>
<scriptsrc="Js/jquery.mobile-1.2.0.min.js"type="text/javascript"></script>
3、HelloWorld的示例代码如下:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<metaname="viewport"content="width=device-width,initial-scale=1"/>//设置页面的宽度与移动设备的屏幕宽度相同
<linkhref="Css/jquery.mobile-1.2.0.min.css"rel="Stylesheet"type="text/css"/>
<scriptsrc="Js/jquery-1.8.3.min.js"type"text/javascript"></script>
<scriptsrc="Js/jquery.mobile-1.2.0.min.js"type="text/javascript"></script>
</HEAD>
<BODY>
<divid="page1"data-role="page">
<divdata-role="header"><h1>JQueryMoblie</h1></div>
<divdata-role="content"class="content"><p>HelloWorld!</p></div>
<divdata-role="footer"><h1>工作室版权所有</h1></div>
</div>
</BODY>
</HTML>
4、由于JQueryMobile已经全面支持HTML5结构,因此,<body>主体元素代码也可以修改为:
<BODY>
<sectionid="page1"data-role="page">
<headerdata-role="header"><h1>JQueryMoblie</h1></header>
<divdata-role="content"class="content"><p>HelloWorld!</p></div>
<footerdata-role="footer"><h1>工作室版权所有</h1></footer>
</section>
</BODY>
5、为了更好地在PC端浏览JQueryMobile页面在移动终端的执行效果,可以下载Opera移动模拟器,下载地址:http://cn.opera.com/,预览效果图:
相关文章
- 超详细的80个Python入门实例,代码清晰拿来即用,学习提升必备「建议收藏」
- Spring学习笔记(六)——SpringMVC 概述和入门案例
- 从零学习Jenkins部署SpringBoot项目
- Node.js学习笔记(三)——Node.js开发Web后台服务
- R语言机器学习之构建并操作Task(2)(mlr3包系列)
- 【干货书】深度强化学习Python实战:算法的简洁实现,简化数学,以及TensorFlow和PyTorch的使用
- JAVA入门学习八
- 且用计算机语言怎么表示,如何学习SCL语言?SCL语言编程入门
- Chrome Devtool 学习
- 297个机器学习彩图知识点(2)
- 干货 | 密码学入门学习笔记小结
- [Nature Methods | 论文简读] SVision:一种解决复杂结构变异的深度学习方法
- 【机器学习入门与实践】合集入门必看系列,含数据挖掘项目实战
- 机器学习之特征归一化(normalization)详解大数据
- 开发机器学习应用程序的基本流程
- 深入学习:体验Linux系统之旅(个人用linux系统)
- Redis入门必备:从零开始学习(《redis入门指南》)
- Redis语法入门:学习使用它的基础(redis的语法)
- 安全人员学习笔记——Web中间件之Tomcat篇
- Linux 学习之路:入门指南及基础流程(linux学习流程)
- 编程深入浅出:学习Linux下的套接字编程(linux套接字)
- 快速入门Linux SSH:掌握远程访问技巧(linuxssh学习)
- 零点起飞,揭秘学习Linux的诀窍(零点起飞学linux)
- Linux学习路线:入门到精通PDF完全攻略(linux入门到精通pdf)
- 无基础学习Linux:快速入门和实践(零基础linux教程)
- 学习Linux,掌握基本命令必备!(linux常用基本命令)
- Oracle入门指南学习实现梦想(oracle入门课程)
- 29岁,我开始学习 Oracle(29岁学oracle)
- MySQL 文件上传学习实践(mysql上传文件函数)
- 学习Oracle最佳入门方法(oracle先学些什么)
- 从零开始,学习Oracle数据库(oracle从入门学习)
- 红色学习Redis训练营教学(redis训练营教学)
- Javascript入门学习第二篇js类型
- Python中的自定义函数学习笔记