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   只要图标不要文字

时间: 2024-10-10 07:44:15

JqueryMobile学习记录一的相关文章

jQuery Moblile Demos学习记录Theming、Button、Icons图标,脑子真的不好使。

jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论 本文来源于www.ifyao.com禁止转载!www.ifyao.com 一CSS Framework块 Theming 是一个整体了解默认主题和内置的A-E主题各个效果.待解决问题,自定义主题,下边是一个知识点. http://www.w3cschool.cc/jquerymobile/jquerymobile-them

Python学习记录-2016-12-17

今日学习记录 模块: import os#导入os模块 import sys#导入sys模块 os.system("df -h")#执行df -h命令 cmd_res = os.popen("df -h").read()#将命令的返回结果赋值给cmd_res,如果不加入.read()会显示命令的返回加过在内存的位置 print(sys.path)#显示系统变量路径,一般个人模块位于site-packages下,系统模块位于lib下 print(sys.argu[2]

Objc基础学习记录5

NSMutableString类继承的NSString类. NSMutableString是动态的字符串. 1.appendingString 方式: 向字符串尾部添加一个字符串. 2.appendingFormat:可以添加多个类型的字符串. int,chat float,double等 3.stringWithString 创建字符串, 4.rangeOfString 返回str1在另一个字符串中的位置. 5.NSMakeRange(0,3) 字符串0位到3位. 6.deleteCharac

Windows API 编程学习记录&lt;二&gt;

恩,开始写Windows API编程第二节吧. 上次介绍了几个关于Windows API编程最基本的概念,但是如果只是看这些概念,估计还是对Windows API不是很了解.这节我们就使用Windows API 让大家来了解下Windows API的用法. 第一个介绍的Windows API 当然是最经典的MessageBox,这个API 的作用就是在电脑上显示一个对话框,我们先来看看这个API的定义吧: int WINAPI MessageBox(HWND hWnd, LPCTSTR lpTe

Windows API 编程学习记录&lt;三&gt;

恩,开始写API编程的第三节,其实马上要考试了,但是不把这节写完,心里总感觉不舒服啊.写完赶紧去复习啊       在前两节中,我们介绍了Windows API 编程的一些基本概念和一个最基本API函数 MessageBox的使用,在这节中,我们就来正式编写一个Windows的窗口程序. 在具体编写代码之前,我们必须先要了解一下API 编写窗口程序具体的三个基本步骤:             1. 注册窗口类:             2.创建窗口:             3.显示窗口: 恩,

Python学习记录day6

Python学习记录day6 学习 python Python学习记录day6 1.反射 2.常用模块 2.1 sys 2.2 os 2.3 hashlib 2.3 re 1.反射 反射:利用字符串的形式去对象(默认)中操作(寻找)成员 cat commons.py #!/usr/bin/env python#_*_coding:utf-8_*_''' * Created on 2016/12/3 21:54. * @author: Chinge_Yang.''' def login(): pr

Python学习记录-2016-11-29

今日学习记录: 心灵鸡汤: 要有合适自己的目标,一个目标一个目标实现,切忌好高骛远: 最好的投资就是投资自己: 实现梦想 学习,学习,再学习: Talk is cheap. 从本身而言,余三十而立之年,从事测试行业7七年有余,一年半华为外包路由器,两年无线wifi测试,一年半网管软件测试,一年自动化测试经理,推行公司自动化测试进程,从开始的TCL,到现在的python,工欲善其事必先利其器,所以自己来学习,总体我认为我的目标是一直前进的,不断变化的,但是方向并没有大的错误,有些累,所以近期有些懈

程序的机械级表示学习记录

程序的机械级表示学习记录 X86的三代寻址方式 DOS时代的平坦模式,不区分用户空间和内核空间,很不安全. 8086的分段模式. IA32的带保护模式的平坦模式. 对于机械级编程的两种重要抽象 ISA:机械级程序的格式和行为,定义为指令集体系结构,它定义了处理器状态.指令的格式,以及每条指令对状态的影响. 虚拟地址:机器级程序使用的存储器地址,提供的存储器模型看上去是一个非常大的数组.存储器系统的实际实现是将多个硬件存储器和操作系统软件组合起来的. 在GCC中获得汇编代码与反汇编 获得汇编代码:

python 系统地学习记录

由头: python值得一学. 尝试一下写学习记录,看看效果. 1.记录一些不熟悉或者重要的知识点. 2.记录一些遇到的问题,标签 Question. 书:python基础教程(第2版) Chapter 1:基础知识 本章的内容熟悉即可. 比较重要的是字符串,单双引号转义,str,repr... Time 1.5 h  2015.8.31 23:09 版权声明:本文为博主原创文章,未经博主允许不得转载.