jquery mobile 移动web(1)
轻量级框架jQuery Mobile
所需文件
<link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mobile-1.1.2.css"/>
<script type="text/javascript" src="jquery.mobile-1.1.2/jquery-1.6.4.js"></script> jquery 应放在 mobile 上面。
<script type="text/javascript" src="jquery.mobile-1.1.2/jquery.mobile-1.1.2.js"></script>
dataset自定义属性,要求前缀必须带有“data-”字符,“data-”后面允许使用任何值,它允许开发人员将这类属性添加到HTML标签中,
充当元素的私有数据存储区域,不允许元素的原有功能,也不会影响布局。
jQuery Mobile 使用的自定义属性。
1.data-role
定义元素在页面中的功能角色,该属性允许定义不同的组件,元素及页面视图。
2.data-title
定义jQueru Mobile 视图页面的标题。
3.data-transition
定义视图切换的动画效果。
4.data-rel
定义具有浮动层效果的视图。
5.data-theme
指定元素或组件内的主体样式风格。
6.data-icon
在元素内增加一个icon 小图标。
7.data-iconpos
定义icon小图标的位置。
8.data-inline
指定按钮根据内容自适应其长度。
9.data-type
定义分组按钮按水平或垂直方向排列。
10.data-rel
定义具有特定功能的元素属性, 例如返回按钮 data-rel="back".
11.data-add-back-btn
指定视图页面自动在页眉左侧添加返回按钮。
12.data-back-btn-text
指定由试图页面自动创建的返回按钮的文本内容。
13.data-position
该属性的作用是实现在滑动屏幕时工具栏的显示或隐藏状态。
14.data-fullscreen
用于自定全屏视图页面。
15.data-native-menu
指定下拉选择功能采用平台内置的选择器。
16.data-placeholder
设置下拉选择功能的占位符。
17.data-inset
实现内嵌列表的功能。
18.data-split-icon
设置列表右侧的图标。
19.data-split-theme
设置列表右侧图片的主题样式风格。
20.data-filter
开启列表过滤搜索功能。
简单配置一个页面
<section data-role="page">
<header data-role="header">页头</header>
<article data-role="content">内容</article>
<footer data-role="footer">页脚</footer>
</section>
改变页面标题的视图
data-title="标题"
视觉切换动画。 data-transition="slide" slide 左右切换 slideup 从下到上 slidedown 从上到下 pop 以弹出的 fade 渐变褪色 flip 翻转飞出。
<section data-role="page" id="firstView">
<header data-role="header">第1个视图</header>
<article data-role="content"><a href="#secondView" data-transition="flip">切换第2个视图</a></article>
<footer data-role="footer">页脚</footer>
</section>
<section data-role="page" id="secondView">
<header data-role="header">第2个视图</header>
<article data-role="content"><a href="#firstView" data-transition="flip">切换第1个视图</a></article>
<footer data-role="footer">页脚</footer>
</section>
页面主题:data-theme = "a"
jquery mobile 移动web(1)的更多相关文章
- JQuery Mobile移动Web应用开发(1): UI开发工具RID介绍
工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. ...
- 利用JQuery Mobile开发web app
什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...
- jquery mobile 移动web
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jQuery Mobile 移动 web 应用程序框架
在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...
- jquery mobile 移动web(6)
jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水 ...
- jquery mobile 移动web(5)
有序列表 <div data-role="content"> <ol data-role="listview" data-theme=&quo ...
- jquery mobile 移动web(2)
button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...
- jquery mobile 移动web(4)
下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div ...
- jquery mobile 移动web(3)
可折叠功能块. div 元素的 data-role 属性设置为 collapsible 代码如下: <div data-role="collapsible"> < ...
随机推荐
- java面试知识
Java基础部分 https://www.cnblogs.com/xiaolovewei/p/9571770.html MySQL部分 https://www.cnblogs.com/xiaolove ...
- 前端之CSS——盒子模型和浮动
一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...
- 如何才能快速入门python3?
一些朋友自学python过程中,发现书也能看懂,书上的玩具代码也能看懂,但为啥自己不能做习题,不能写代码解决问题,自己不能动手写代码? 原因是初学者没有学会计算思维.解决问题的方法.编程思路. 编程思 ...
- js实现瀑布流加载图片效果
今天学习了一个瀑布流加载效果,很多网站都有瀑布流效果,瀑布流就是很多产品显示在网页上,宽相同,高度不同,表现为多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.原理是:1. ...
- 003Linux常用命令
文件操作 01 命令 : list----列出目录信息 命令格式: ls [-选项] [目录] 选项 : -a --all 不忽略以"."开头的隐藏文件 : -d --direc ...
- Myeclipse中进行JUnit单元测试
最近学习了在myeclipse中进行单元测试,写点东西总结总结. JUnit单元测试: 测试对象为一个类中的方法. juint不是javase中的部分,所以必须导入jar包,但是myeclipse自带 ...
- Android—PopupWindow的简单使用
PopupWindow 是一个可以显示在当前 Activity 之上的浮动容器,这个Demo要实现的功能是,点击布局中的两个按钮,进而控制PopupWindow的显示与消失,代码中有详细的注释首先看一 ...
- CodeMirror教程,CodeMirrorAPI中文信息
<html> <head> <link rel="stylesheet" href="codemirror.css"> ...
- 【java开发系列】—— JDOM创建、修改、删除、读取XML文件
有很多中操作XML文件的方法,这里介绍一下JDOM的使用方法和技巧. JDOM下载地址 创建XML文档 XML文件是一种典型的树形文件,每个文档元素都是一个document元素的子节点.而每个子元素都 ...
- 关于java文件名字影响系统配置
测试OAM和OIF单点登录过程中,wlsh.sh中一个命令运行不过.查看一个java文件中有_en标示.修改名称,去掉_en后可以通过.