JqueryMobile学习记录一
安装
做页面之前首先引用三个文件：
<link href="/Scripts/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
因为JqueryMobile必须jquery的基础上才能使用，所以要先引用jquery.js，再引用JqueryMobile.js
布局
定义样式，效果之类的，都是通过data-xx来实现的，首先介绍data-role：
<body>
<div data-role="page"> <div data-role="header">
<h1>欢迎访问我的主页</h1>
</div> <div data-role="content">
<p>我是一名移动开发者！</p>
</div> <div data-role="footer">
<h1>页脚文本</h1>
</div> </div>
</body>
data-role的一些取值
page：整个页面，所有的元素都要在这个容器中
header：页面上方的工具栏，如标题、搜索框
content：页面内容
footer：页面底部的工具栏
页面跳转
JqueryMobile中的页面跳转：
定义两个div data-role="page"，分别加上不同的id
然后用a href="#id" 实现跳转
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">转到页面二</a>
</div>
</div> <div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>
如果希望以对话框的形式跳转
给a标签加上 data-rel="dialog"
过渡效果
通过个a标签加一个data-transition属性来实现，不写是默认淡出淡入
fade 默认。淡出淡入
flip 从后向前翻动到下一页
flow 抛出当前页面，引入下一页
slide 从右向左滑动到下一页
.....具体百度
如果希望slide从左向右滑动（相反的方向）, 再给a标签加一个属性：data-direction="reverse"
创建按钮
- 使用 <button> 元素
- 使用 <input> 元素
- 使用 <a data-role="button"></a>元素
推荐使用<a data-role="button"></a>来创建页面之间的链接
<input> 或 <button> 元素用于表单提交
行内按钮
按钮默认会占据整行的宽度，如果希望多个按钮并排显示，需要给按钮添加属性data-inline="true" (行内按钮)
组合按钮
给父级div加 data-role="controlgroup" ， 并且添加data-type="horizontal | vertical"的其中一个值
<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
后退按钮
给按钮添加属性 data-rel="back" 会成为后退按钮并忽略href属性。
图标按钮
给按钮添加属性 data-icon 会成为图标按钮，其取值为：
arrow-l 左箭头
delte 删除
search 搜索
...具体百度
同时图标的位置可以设置为上下左右，默认是左
通过属性data-iconpos设置，其取值有4个：
top 上
bottom 下
left 左
left 右
notext 只要图标不要文字
JqueryMobile学习记录一的更多相关文章
- jQuery Moblile Demos学习记录Theming、Button、Icons图标，脑子真的不好使。
jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论 本文来源于www.i ...
- Quartz 学习记录1
原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...
- Java 静态内部类与非静态内部类 学习记录.
目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...
- Apache Shiro 学习记录4
今天看了教程的第三章...是关于授权的......和以前一样.....自己也研究了下....我觉得看那篇教程怎么说呢.....总体上是为数不多的精品教程了吧....但是有些地方确实是讲的太少了.... ...
- UWP学习记录12-应用到应用的通信
UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...
- UWP学习记录11-设计和UI
UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以 ...
- UWP学习记录10-设计和UI之控件和模式7
UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. ...
- UWP学习记录9-设计和UI之控件和模式6
UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...
- UWP学习记录8-设计和UI之控件和模式5
UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...
随机推荐
- Android初级教程IP拨号器初识广播接受者
需求:输入ip号码并且保存在本地,监听打电话广播,如果电话号码以0开头,则加上ip区号拨打. 首先定义一个页面布局: <LinearLayout xmlns:android="http ...
- Cocos2D iOS之旅:如何写一个敲地鼠游戏(一):高清屏显示和UIKit
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...
- SQL 2012 Always On 为 MSCRMSqlClrLogin SQL 登录名创建非对称密钥时报语法错误
根据实施手册中的下图的SQL在为MSCRMSqlClrLogin 创建非对称秘钥时报语法错误,具体的错误在就path那,调了多次还是报错,索性就把SQL拆开执行. 先执行这条 SELECT * FRO ...
- 【嵌入式开发】ARM 芯片简介 (ARM芯片类型 | ARM处理器工作模式 | ARM 寄存器 | ARM 寻址)
: 12MHz 晶振 对应 405 ~ 532 MHz 处理速度; -- : 16K 指令缓存, 16K 数据缓存; -- : 32KB 指令缓存, 32KB 数据缓存; (3) 内存接口对比 : 提 ...
- SpriteBuilder实现2D精灵光影明暗反射效果(一)
其实不用3D建模,用2D的图像就可以模拟3D场景中光照反射的效果. 这里我们不得不提到一个normalMap(法线图)的概念,请各位童鞋自己度娘吧,简单来说它可以使得2D表面生成一定细节程度的光照方向 ...
- iOS积分抽奖Demo，可以人为控制不同奖项的得奖率
最近公司让写一个转盘积分抽奖的样式,所以把创建过程中的心得记录一下,给大家分享 首先创建了相关的图片转盘,指针图片,然后就是考虑转盘如何旋转的问题,我是通过给指针图片添加一个动画效果,从而实现旋转效果 ...
- UNIX环境高级编程——无名管道和有名管道
一.进程间通信 每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进程之间要交换数据必须通过内核,在内核中开辟一块缓冲区,进程1把数据从用户空间拷到内核缓冲区,进程2 ...
- 从JDK源码角度看java并发的公平性
JAVA为简化开发者开发提供了很多并发的工具,包括各种同步器,有了JDK我们只要学会简单使用类API即可.但这并不意味着不需要探索其具体的实现机制,本文从JDK源码角度简单讲讲并发时线程竞争的公平性. ...
- React Native控件之Listview
ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. ListView更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,ListView并不立即渲染 ...
- Java Web 高性能开发，第 2 部分: 前端的高性能
Web 发展的速度让许多人叹为观止,层出不穷的组件.技术,只需要合理的组合.恰当的设置,就可以让 Web 程序性能不断飞跃.Web 的思想是通用的,它们也可以运用到 Java Web.这一系列的文章, ...