jqueryMobile 按钮
在 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 值):
ui-btn-b | 修改按钮颜色为黑色,字体为白色(默认为灰色背景,黑色字体)。 |
ui-corner-all | 为按钮添加圆角 |
ui-mini | 制作小按钮 |
ui-shadow | 为按钮添加阴影 |
默认情况下 <input> 按钮有圆角及阴影效果。 <a> 和 <button> 元素没有。
jqueryMobile 按钮相关推荐
- jQueryMobile新版中导航栏按钮消失的解决方法
最近将jQueryMobile的库更新到最新版后,发现以前用 jQueryMobile 写的一些东西, header 导航栏上的"后退"按钮统统不见了.这个功能挺贴心的,可以自动为 ...
- JqueryMobile链接一个页面,而链接页面中图片需刷新才显示的问题
当在first.html中,有个链接如:<a href="second.html" data-role="button" id="submit& ...
- 小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航
一.页眉 1.添加页眉和页脚 <div data-role="header"><h1>第 1 页</h1></div> <di ...
- 10个你必须知道的jQueryMobile代码片段
原创文章,转载请注明: 转载自http://www.yiiyaa.net/ 本文链接地址:http://www.yiiyaa.net/1426 0.jQuery Mobile生命周期函数必须在 jQu ...
- 22、(转载)jQueryMobile 知识点总结
本文转自:http://www.cnblogs.com/jxyedu HTML5技术生态介绍 H5的现状与未来 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准 ...
- jquerymobile局部渲染的各种刷新
在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染. 在jquerymobile实现listview局部渲染的方法: Java代码 function queryP ...
- CodeGen按钮循环
CodeGen按钮循环 按钮循环是一个模板文件构造,它允许您迭代CodeGen拥有的按钮信息集合. 在按钮循环中处理的按钮的定义可以来自两个位置之一. 如果基于UI工具箱输入窗口定义进行处理,则默认情 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:禁用按钮
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
- 给同一个按钮添加单双击事件
1.单双击事件的添加. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha ...
最新文章
- nodejs中的异步流程序控制nsync
- Pytorch学习 - Task5 PyTorch卷积层原理和使用
- Java Socket编程详解
- JMG | 基因PRKG2的变异导致骨骼表型异常
- 工作中常用知识点、工具总结
- 简述const修饰符在类中的用法
- 上粱正,下粱不歪——网吧母盘制作流程(转)
- Could not install from “tippy.js\dist\tippy.css“ as it does not contain a package.json file.
- D - Sleepy Game
- Excel中ROUND、ROUNDUP、ROUNDDOWN函数详解
- 自成一派的风格楷体字体
- java毕业设计教学平台mybatis+源码+调试部署+系统+数据库+lw
- 策略模式与工厂模式的区别
- 使用API函数 GetACP 获取Windows系统当前代码页(字符编码)
- 什么是CSS特异性及其工作方式?
- 无法启动计算机丢失s7EPAAPI,200smart编程软件无法启动提示s7epaapi.dll丢失。-工业支持中心-西门子中国...
- 超融合架构 — Hyper Converged Infrastructure
- dod刷服务器文件,编辑修改
- AS:另一个程序正在使用此文件,进程无法访问。
- 概率图与随机过程:概率统计基本概念与人工智能应用之间的桥梁
热门文章
- python3爬虫框架scrapy_带你深入浅出python爬虫框架scrapy(三)
- 国内七大免费网络硬盘横向评测
- 【Linux】虚拟机安装Intel Clear Linux桌面版
- windows下安装Cygwin详细教程
- Javaweb---EL
- iMeta | 张彦琼/许海玉/周雪忠联合开发基于SoFDA病-证-方关联的本体表征、富集分析和相似度计算评价...
- 【python】 根据身份证号计算患者真实年龄 完整版
- 大二下期英语学期总结
- render 函数理解
- ProcessHacker