jQuery Mobile 中创建按钮
在 jQuery Mobile 中创建按钮
jQuery Mobile 中的按钮可通过三种方法创建:
- 使用 <button> 元素
- 使用 <input> 元素
- 使用 data-role="button" 的 <a> 元素
<button>
<button>按钮</button>
<input>
<input type="button" value="按钮">
<a>
<a href="#" data-role="button"
>按钮</a>
提示:jQuery Mobile 中的按钮会自动获得样式,这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 <a> 元素来创建页面之间的链接,而 <input> 或 <button> 元素用于表单提交。
导航按钮
如需通过按钮来链接页面,请使用 data-role="button" 的 <a> 元素:
实例:
<a href="#pagetwo" data-role="button">转到页面二</a>
行内按钮
默认情况下,按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容,或者如果您需要两个或多个按钮并排显示,请添加 data-inline="true":
实例:
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>
组合按钮
jQuery Mobile 提供了对按钮进行组合的简单方法。
请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用,以规定水平或垂直地组合按钮:
实例:
<divdata-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 值):
实例:
a href="#" data-role="button" data-rel="back">返回</a>
更多用于按钮的 data-* 属性
jQuery Mobile 中创建按钮的更多相关文章
- 03.Jquery Mobile中的按钮
一. 基础按钮 1.设置链接的data-role,使其变成按钮. <a href="index.html" data-role="button">L ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- jQuery Mobile (中)
jQuery Mobile (中) 前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一 ...
- jQuery Mobile中jQuery.mobile.changePage方法使用详解
jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...
- jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
- jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTM ...
- 【初探移动前端开发04】jQuery Mobile (中)
前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...
- jquery.mobile 中 collapsible-set collapsible listview 共同布局问题
最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左 ...
- 在 JQuery Mobile 中实现瀑布流图库布局
先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...
随机推荐
- PHP5.6.15连接Sql Server 2008配置方案
php5.6的如果想连接Sql Server 2008数据库,需要手动配置扩展和安装一个驱动. 下载SQL Server Driver for PHP的扩展包,64位系统的官方不支持,找到一个非官方的 ...
- mysqldump的使用
mysqldump按导入:mysqldump -u用户名 -p密码 -h主机 数据库 < 路径eg:mysql -uroot -p1234 db1 < c:\a.txtmysqldump导 ...
- 在CentOS或RHEL防火墙上开启端口
转载自:https://linux.cn/article-4243-1.html 如果希望在服务器上提供服务,诸如CentOS或RHEL的企业级Linux发行版包含内置的强大防火墙,它们默认的防火墙规 ...
- Effective objective-c 2.0阅读笔记
这本书非常的好,看完后,感触挺深,总结纪录一下,针对ios开发的备忘: 注:分类和原著有些不同,自己总结学习用的,仅供参考. 系统篇: 了解oc起源:继承c,由Smalltalk演化而来.动态语言 ...
- PowerDesigner 逆向中 Name和Comment互换
在使用PowerDesigner对数据库进行概念模型和物理模型设计时,一般在NAME或Comment中写中文,在Code中写英文.Name用来显 示,Code在代码中使用,但Comment中的文字会保 ...
- 针对bootstrap内联单选框input与文字不能居中对齐的解决办法
1.html代码 <div > <label class="checkbox-inline first-label"> <input type=&qu ...
- {Reshipt}{文白}{资治通鉴}
this article came from 360doc ====================================================================== ...
- python day 1--python初始
笔者:QQ: 360212316 Python初识 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本 ...
- 13 Balls Problem
今天讨论的是称球问题. No.3 13 balls problem You are given 13 balls. The odd ball may be either heavier or ligh ...
- RedHat6安装gcc
RedHat RHEL 6.0安装gcc的方法 最近在折腾RedHat6.0 ,全是命令,号称比windows安全的Linux,没有界面,也不知道所谓的专家们如何比的,一个界面做的非常好的Window ...