在 jQuery Mobile 中创建按钮

在 jQuery Mobile 中,按钮可通过三种方式创建:

  • 使用 <button> 元素
  • 使用 <input> 元素
  • 使用带有 data-role="button" 的 <a> 元素
  • 跳转按钮
  • <a href="#pagetwo" data-role="button">访问第二个页面</a>
  • 默认情况下,按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮,或者如果您想要并排显示两个或多个按钮,请添加 data-inline="true"
  • 组合按钮(排列显示)

    jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。

    请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮:

  • <div data-role="controlgroup" data-type="vertical">    按钮的显示方式 垂直
  • <a href="#two" class="ui-btn" data-inline="true">访问第二个页面</a>
  • 如果是垂直方向,不需要data-inline属性
       <a href="#one" class="ui-btn" data-inline="true">访问第1个页面</a>
       <a href="#one" class="ui-btn" data-inline="true">访问第二个页面</a>
        </div>
默认情况下,组合按钮是垂直组合,它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角,以便它们组合在一起的时候创建一个漂亮的外观。

后退按钮

如需创建后退按钮,请使用 data-rel="back" 属性(这会忽略锚的 href 值):

<a href="#" data-role="button" data-rel="back">返回</a>
类名---效果
ui-btn-b 修改按钮颜色为黑色,字体为白色(默认为灰色背景,黑色字体)。
ui-corner-all 为按钮添加圆角
ui-mini 制作小按钮
ui-shadow 为按钮添加阴影
如果你需要使用更多的样式,每个样式类使用空格隔开,如: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"

默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。

jqueryMobile 按钮相关推荐

  1. jQueryMobile新版中导航栏按钮消失的解决方法

    最近将jQueryMobile的库更新到最新版后,发现以前用 jQueryMobile 写的一些东西, header 导航栏上的"后退"按钮统统不见了.这个功能挺贴心的,可以自动为 ...

  2. JqueryMobile链接一个页面,而链接页面中图片需刷新才显示的问题

    当在first.html中,有个链接如:<a href="second.html" data-role="button" id="submit& ...

  3. 小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航

    一.页眉 1.添加页眉和页脚 <div data-role="header"><h1>第 1 页</h1></div> <di ...

  4. 10个你必须知道的jQueryMobile代码片段

    原创文章,转载请注明: 转载自http://www.yiiyaa.net/ 本文链接地址:http://www.yiiyaa.net/1426 0.jQuery Mobile生命周期函数必须在 jQu ...

  5. 22、(转载)jQueryMobile 知识点总结

    本文转自:http://www.cnblogs.com/jxyedu HTML5技术生态介绍 H5的现状与未来 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准 ...

  6. jquerymobile局部渲染的各种刷新

    在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染. 在jquerymobile实现listview局部渲染的方法: Java代码   function queryP ...

  7. CodeGen按钮循环

    CodeGen按钮循环 按钮循环是一个模板文件构造,它允许您迭代CodeGen拥有的按钮信息集合. 在按钮循环中处理的按钮的定义可以来自两个位置之一. 如果基于UI工具箱输入窗口定义进行处理,则默认情 ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:禁用按钮

    <!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...

  9. 给同一个按钮添加单双击事件

    1.单双击事件的添加. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha ...

最新文章

  1. nodejs中的异步流程序控制nsync
  2. Pytorch学习 - Task5 PyTorch卷积层原理和使用
  3. Java Socket编程详解
  4. JMG | 基因PRKG2的变异导致骨骼表型异常
  5. 工作中常用知识点、工具总结
  6. 简述const修饰符在类中的用法
  7. 上粱正,下粱不歪——网吧母盘制作流程(转)
  8. Could not install from “tippy.js\dist\tippy.css“ as it does not contain a package.json file.
  9. D - Sleepy Game
  10. Excel中ROUND、ROUNDUP、ROUNDDOWN函数详解
  11. 自成一派的风格楷体字体
  12. java毕业设计教学平台mybatis+源码+调试部署+系统+数据库+lw
  13. 策略模式与工厂模式的区别
  14. 使用API函数 GetACP 获取Windows系统当前代码页(字符编码)
  15. 什么是CSS特异性及其工作方式?
  16. 无法启动计算机丢失s7EPAAPI,200smart编程软件无法启动提示s7epaapi.dll丢失。-工业支持中心-西门子中国...
  17. 超融合架构 — Hyper Converged Infrastructure
  18. dod刷服务器文件,编辑修改
  19. AS:另一个程序正在使用此文件,进程无法访问。
  20. 概率图与随机过程:概率统计基本概念与人工智能应用之间的桥梁

热门文章

  1. python3爬虫框架scrapy_带你深入浅出python爬虫框架scrapy(三)
  2. 国内七大免费网络硬盘横向评测
  3. 【Linux】虚拟机安装Intel Clear Linux桌面版
  4. windows下安装Cygwin详细教程
  5. Javaweb---EL
  6. iMeta | 张彦琼/许海玉/周雪忠联合开发基于SoFDA病-证-方关联的本体表征、富集分析和相似度计算评价...
  7. 【python】 根据身份证号计算患者真实年龄 完整版
  8. 大二下期英语学期总结
  9. render 函数理解
  10. ProcessHacker