jQuery Mobile的初识与使用
来源:互联网 发布:网络新词及解释 编辑:程序博客网 时间:2024/06/05 22:50
1.什么是jQuery Mobile:
jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mobile给主流移动平台带来了jQuery核心库。使用它不需要安装任何东西,只需要将*.js和*.css文件直接包含到web项目中即可使用。
2.jQuery Mobile事件
jQuery Mobile提供了专门针对移动端浏览器的事件,这些事件和在手机软件开发所要监听的事件类似。
触摸事件--当用户触摸屏幕时触发
滑动时间--当用户滑动屏幕时触发
定位时间--当设备水平或垂直翻转时触发(横竖屏切换)
页面时间--当页面显示、隐藏、创建、加载或未加载时触发(类似生命周期的方法)
3.jQuery Mobile下载
如果我们使用jQuery Mobile,那就需要到其官方网站下载相关资源文件。其官网是jquerymobile.com。 当我们下载时,可选择自定义下载,这样可以减少项目引入的资源文件,减少消耗。当然 也可全部下载。最后将解压出来的文件复制进自己的web项目中即可使用。
4.jQuery Mobile的使用
(1)在头文件中引入我们需要的文件
<link rel="stylesheet" type="text/css"href="script/lib/jquery.mobile-1.4.5.css"><script type="text/javascript" charset="utf-8" src="script/lib/jquery.min.js"></script><script type="text/javascript" charset="utf-8" src="script/lib/jquery.mobile-1.4.5.min.js"></script>
(2)引入meta标签,让我们来视屏我们屏幕宽高来进行适配。
(3)在body中放入我们的page: 一个div标签。其data-role="page"。
<div data-role="page"></div>(4)最后,在这个page中,我们的页面将分为三个部分。我们需要建立3个div分别指定为头部,内容部分,尾部。
<div data-role="page"> <div data-role="header" data-position="fixed" > <h3>我是头部</h3> </div> <div role="main"></div> <p>我是内容</p> <div data-role="footer" data-position="fixed"><h4>我是尾部</h4></div></div>效果如图:
- jQuery Mobile的初识与使用
- Jquery Mobile 初识
- 初识jquery mobile
- 初识jquery mobile
- jQuery Mobile的简单使用
- jquery mobile radio的使用
- jQuery Mobile和jQuery的使用简记
- jquery mobile学习教程之初识Jquery mobile 一
- jquery mobile的页面与对话框
- 使用mobile jquery的跳转刷新问题
- Jquery Mobile 插件 iscroll的使用
- jquery mobile 选项page的使用
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 09 jQuery Mobile 页面与对话框
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 15 jQuery Mobile 与响应式
- mobile zeptojs与jquery
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 表单上
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— 02 jQuery Mobile 基础
- java 中super 的用法及意义
- 关于oracle的em界面打开后,在命令行查看status状态却起不来
- Android技术--WebView基本使用
- 数组不能通过toString方法转为字符串
- jQuery fontIconPicker 使用
- jQuery Mobile的初识与使用
- 未能加载文件或程序集Newtonsoft.Json, Version=4.5.0.0...
- HTTP协议详解(真的很经典)
- 重学C++ (四) 语句
- ArcSDE空间数据库中SDE用户使用探讨
- ReactNative之开发Mac环境配置
- c#控件说明
- 枚举类
- Educational Codeforces Round 5-A. Comparing Two Long Integers(模拟)