jQuery Mobile的使用方法
安装: <link rel="stylesheet" href="下载到本地的文件目录.min.css" media="screen" title="no title">这个是jQuery Mobile库,下载网址:jquerymobile.com
<script src="./js/jquery-1.12.4.min.js"></script>这个是jQuery的库,下载网址:jquery.com/download
<script src="./js/jquery.mobile-1.4.5.min.js"></script>这个是jQuery Mobile库,下载网址:jquerymobile.com
Demo:需要引入meta, 为了使我们的网站适应移动设备屏幕尺寸. 并设置不要让页面缩放, 让他以1:1的比例.
<meta name="viewport" content="width=device-width,initial-scale=1">
在body标签内写:
<div data-role='page'>
<div data-role="header">……</div>
<div role="main">……</div>
<div data-role="footer">……</div>
</div>
注意:
data-role参数表:
page:页面容器,其内部的mobile元素将会继承这个容器上所设置的属性
header:页面标题容器,这个容器内部可以包含文字、返回按钮、功能按钮等元素
footer:页面页脚容器,这个容器内部也可以包含文字、返回按钮、功能按钮等元素
content:页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素
controlgroup:将几个元素设置成一组,一般是几个相同的元素类型
fieldcontain:区域包裹容器,用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
navbar:功能导航容器,通俗的讲就是工具条
listview:列表展示容器,类似手机中联系人列表的展示方式
list-divider:列表展示容器的表头,用来展示一组列表的标题,内部不可包含链接
button:按钮,将链接和普通按钮的样式设置成为jQueryMobile的风格
none:阻止框架对元素进行渲染,使元素以html原生的状态显示,主要用于form元素。
显示顶部和底部:在顶部和底部分别加入下面的属性, 就可以让跟着页面跑的顶部和底部固定下来.
data-position="fixed"
页,主题及布局
页面切换: 当我们页面进行跳转的时候, 需要加上动画效果, 下面就会jQeruy mobile提交的效果.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none
这里面fade代表的是淡入淡出;filp是翻转的意思;pop是从中心渐显展开;slide是从右侧向左滑入页面;slideup是从底部向上滑入;slidedown是从上向下滑入;
对话框:如果需要使用对话框属性, 可能在链接中增加下面属性就能将页面变成对话框.
data-rel="dialog"
button按钮的添加:使用data-role=“button”,或者利用函数:$(选择器).button();
参考代码:(三种方法)
<button type="button" name="button">按钮</button>
<input type="button" value="按钮">
<a href="链接地址" data-role="button">按钮</a>
有时候,你想把一组按钮放进一个单独的容器内,使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内,然后给该容器添加 data-role=“controlgroup” 属性.
<div data-role="controlgroup">
<a href="链接地址" data-role="button">Yes</a>
<a href="链接地址" data-role="button">No</a>
<a href="链接地址" data-role="button">Maybe</a>
</div>
默认情况下,组按钮表现为垂直列表,如果给容器添加 data-type=“horizontal” 的属性,则可以转换为水平按钮的列表,按钮会横向一个挨着一个地水平排列,并设置只有足够大以适应内容的宽度.
<div data-role="controlgroup" data-type="horizontal">
<a href="链接地址" data-role="button">Yes</a>
<a href="链接地址" data-role="button">No</a>
<a href="链接地址" data-role="button">Maybe</a>
</div>
jQuery Mobile的使用方法的更多相关文章
- jquery mobile 请求数据方法执行时显示加载中提示框
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
- jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...
- jQuery Mobile中$.mobile.buttonMarkup方法使用具体解释
近期在群里遇到多数网友提到$.mobile.buttonMarkup()方法的使用. 我这里就列了一下api的使用说明,以后大家看博客就能解决这个问题.如有不对的地方,请留言指出! jQuery Mo ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录
使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...
- jquery mobile 方法收集.
1.在列表项和按钮上禁用文本截断 如果你的列表项或者按钮上是一个很长的文本,它将会被jQuery Mobile自动截断,要禁用这个截断设置,需要在CSS选择器上添加属性"white- ...
- jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法 分类: phonegap html5 2012- ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- jquery.mobile手机网页简要
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
随机推荐
- mysql和php的内存问题
最近给一个客户把他以前的数据转换到PHPSMC里去,因为他的数据太大出现一些问题,首先出现的是php内存问题,刚导时空白,我就在该也面的头部加上 error_reporting(E_ALL);打印所有 ...
- TreeGrid
TreeGrid是树形表格,为了展示成树形,比数据表格主要增加了以下两点: 1.表格属性中设置 idField.treeField 两个属性:idField 表示用于区分上下级的主键,treeFiel ...
- 流程管理软件(BPM)功能简介
易协流程管理系统实现将人为控制的业务活动,通过信息化手段实现系统控制,降低人为控制管理的风险以及促进企业的各项决策方针的顺利实施. 系统目标: 实现管理的规范化.制度化.程序化: 帮助企业将内控制度流 ...
- Elasticsearch 搜索引擎
简介: Elasticsearch 是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据.它可以用于全文搜索,结构化搜索以及分析. 分布式实时文件存储,并将每一个字段都 ...
- ADB Not Responding - Android Studio
问题描述: 最近安装了Android Studio v1.0,运行的时候老是这个错误 解决方案: 网上有人说是已经有adb的进程在运行,可是打开任务管理器,找不到对应的adb 进程. 无奈之下,想到a ...
- jsp出现getOutputStream() has already been called for this response异常的原因和解决方法
jsp出现getOutputStream() has already been called for this response异常的原因和解决方法 在tomcat5下jsp中出现此错误一般都是在js ...
- 全文搜索技术—Solr
1. 学习计划 1. Solr的安装及配置 a) Solr整合tomcat b) Solr后台管理功能介绍 c) 配置中文分析器 2. 使用Solr的后台管理索引库 a) ...
- css水平居中,竖直居中技巧(二)
css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- 解剖Nginx·自动脚本篇(1)解析配置选项脚本 auto/options
在安装Nginx之前(即运行make脚本之前),首先是进行安装的配置准备,包括环境检查及生成文件.这些工作是由自动脚本完成的.和绝大多数软件一样,Nginx的自动脚本的入口,同样是名为configur ...
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...