在 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" 一同使用,以规定水平或垂直地组合按钮:

实例:

<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 值):

实例:

a href="#" data-role="button" data-rel="back">返回</a>

  

更多用于按钮的 data-* 属性


jQuery Mobile 中创建按钮的更多相关文章

  1. 03.Jquery Mobile中的按钮

    一. 基础按钮 1.设置链接的data-role,使其变成按钮. <a href="index.html" data-role="button">L ...

  2. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  3. jQuery Mobile (中)

    jQuery Mobile (中) 前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一 ...

  4. jQuery Mobile中jQuery.mobile.changePage方法使用详解

    jQuery.mobile.changePage方法用的还是很多的.作为一个老手,有必要对jQuery mobile中实用方法做一些总结.系列文章请看jQuery Mobile专栏.jquery.mo ...

  5. jQuery Mobile中的页面加载与跳转机制

    第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...

  6. jQuery Mobile 是创建移动 web 应用程序的框架。

    jQuery Mobile jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTM ...

  7. 【初探移动前端开发04】jQuery Mobile (中)

    前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...

  8. jquery.mobile 中 collapsible-set collapsible listview 共同布局问题

    最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左 ...

  9. 在 JQuery Mobile 中实现瀑布流图库布局

    先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...

随机推荐

  1. 洛谷P3370 【模板】字符串哈希

    P3370 [模板]字符串哈希 143通过 483提交 题目提供者HansBug 标签 难度普及- 提交  讨论  题解 最新讨论 看不出来,这题哪里是哈希了- 题目描述 如题,给定N个字符串(第i个 ...

  2. 好的sql

    select count(2) from vw_pmcthtdj A WHERE a.HTBL_ID not in (select jg.jgjs_htid from PMCTJGJS jg wher ...

  3. vs2010 sql server 2008数据库管理界面安装

    http://jingyan.baidu.com/article/1e5468f928e106484961b7b0.html

  4. 两种open()函数

    C语言中文件操作函数中,open()有两种形式: 一种形式是有两个参数open2: 另一种形式是有三个参数open3: 共有的参数有两个,第一个是"被打开文件的路径",第二个是&q ...

  5. .NET 工具类ObjectDumper 打印对象

    // Comes from the LINQ samples provided by Microsoft //Copyright (C) Microsoft Corporation. All righ ...

  6. Jquery day01

    day01: 基础--选择器.属性和CSS.文档处理 day02: 高级--筛选.事件.效果.ajax jQuery介绍 JS类库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用 ...

  7. iOS中如何切换到发短信、打电话、发邮件

    我们在做APP的时候,难免会遇到需要调用短信,电话等程序的时候.如美团. 当然,这些都只是一些简单的方法就可以实现,但是时间久了也会淡忘,所以想写这边博客.一是为了再捡起来复习一下,另一个相当于留个备 ...

  8. php工作笔记2-php编码效率

    1.尽量静态化: 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍.当然了,这个测试方法需要在十万级以上次执行,效果才明显.其实静态方法和非静态方法的效率 ...

  9. Key/Value存储系统etcd的特性

    etcd 是一个高可用的Key/Value存储系统,和其他KV存储系统不同的是,它的灵感来自于 ZooKeeper 和 Doozer,主要用于分享配置和服务发现.利用 etcd 的特性,应用程序可以在 ...

  10. Python 之Ajax

    1.使用Ajax在后台传递参数的示例 要使用Ajax传递参数,需要使用jquery,使用jquery需要注意以下几点. 1.建立static的目录,将jquery导入 2.在项目s13day18_dj ...