安装

做页面之前首先引用三个文件：

<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学习记录一的更多相关文章

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

    jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论   本文来源于www.i ...

  2. Quartz 学习记录1

    原因 公司有一些批量定时任务可能需要在夜间执行,用的是quartz和spring batch两个框架.quartz是个定时任务框架,spring batch是个批处理框架. 虽然我自己的小玩意儿平时不 ...

  3. Java 静态内部类与非静态内部类 学习记录.

    目的 为什么会有这篇文章呢,是因为我在学习各种框架的时候发现很多框架都用到了这些内部类的小技巧,虽然我平时写代码的时候基本不用,但是看别人代码的话至少要了解基本知识吧,另外到底内部类应该应用在哪些场合 ...

  4. Apache Shiro 学习记录4

    今天看了教程的第三章...是关于授权的......和以前一样.....自己也研究了下....我觉得看那篇教程怎么说呢.....总体上是为数不多的精品教程了吧....但是有些地方确实是讲的太少了.... ...

  5. UWP学习记录12-应用到应用的通信

    UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...

  6. UWP学习记录11-设计和UI

    UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以 ...

  7. UWP学习记录10-设计和UI之控件和模式7

    UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. ...

  8. UWP学习记录9-设计和UI之控件和模式6

    UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...

  9. UWP学习记录8-设计和UI之控件和模式5

    UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日 ...

随机推荐

  1. boost::coroutine 无法显示调用栈

    boost::coroutine 无法显示调用栈(金庆的专栏)一例因 boost::format() 格式化参数个数错误造成的 coredump,因为使用了 boost::coroutine, 无法显 ...

  2. UNIX网络编程——I/O复用：select和poll函数

    我们看到TCP客户同时处理两个输入:标准输入和TCP套接字.我们遇到的问题是就在客户阻塞于(标准输入上)fgets调用,服务器进程会被杀死.服务器TCP虽然正确的给客户TCP发送了一个FIN,但是既然 ...

  3. Hive drop table卡住的问题

    在hive中,show tables,create 等命令能正常执行,删除表drop table x时,会出现卡住的现象. 进入mysql, show variables like 'char%' 可 ...

  4. 一个简易版本的lua debugger实现

    introduction 工欲善其事,必先利其器.lua作为一门动态语言,虽然我已经习惯了使用print来进行代码调试,但是还是有很多童鞋觉得一款好用的调试器能更好的进行lua代码编写.所以在以前接手 ...

  5. Leetcode_13_Roman to Integer

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/41486885 通过本文你可能学到的知识如下: (1)理解本 ...

  6. Java单例模式之饿汉模式与懒汉模式

    单例模式是我们在开发软件的过程中经常用到的23中常用的java模式之一,主要的功能就是保证我们所使用的对象只有一个,这也在一方面减少了出错的可能性,增强了代码的健壮.单例模式一般来说有两种实现的方式, ...

  7. [Java]数组排序-选择排序 冒泡排序 插入排序

    1 选择排序  原理:a 将数组中的每个元素,与第一个元素比较          如果这个元素小于第一个元素, 就将这个         两个元素交换.       b 每轮使用a的规则, 可以选择出 ...

  8. [WinForm]dataGridView导出到EXCEL

    方法一: SaveFileDialog dlg = new SaveFileDialog(); dlg.Filter = "Execl files (*.xls)|*.xls"; ...

  9. 如何成为一名优秀的web前端工程师

    我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师 ...

  10. Python学习笔记 - 切片

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- def fact(n): if n == 1: return 1 return n * fact(n - ...