小强的HTML5移动开发之路（44）——JqueryMobile中的按钮
一、链接按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page1" data-fullscreen="true">
<div data-role="content">
<a href="#" data-role="button">链接按钮</a>
</div>
</div>
</body>
</html>
二、表单按钮
<div data-role="page" id="page1" data-fullscreen="true">
<div data-role="content">
<a href="#" data-role="button">链接按钮</a>
<form>
<input type="button" value="表单按钮"/>
<button type="submit">提交按钮</button>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
</form>
</div>
</div>
三、图形按钮
图像按钮1:
<input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>
图像按钮2：
<a href="#"><img src="jquery-mobile/images/icon.png"></a>
四、带图标的按钮
<input type="button" value="带图标的按钮" data-icon="delete"/>
<input type="button" data-icon="delete" data-iconpos="notext"/>
<input type="button" data-icon="alert" data-iconpos="notext"/>
<input type="button" data-icon="arrow-d" data-iconpos="notext"/>
<input type="button" data-icon="arrow-l" data-iconpos="notext"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext"/>
<input type="button" data-icon="arrow-u" data-iconpos="notext"/>
<input type="button" data-icon="back" data-iconpos="notext"/>
<input type="button" data-icon="check" data-iconpos="notext"/>
<input type="button" data-icon="custom" data-iconpos="notext"/>
<input type="button" data-icon="forward" data-iconpos="notext"/>
<input type="button" data-icon="gear" data-iconpos="notext"/>
<input type="button" data-icon="grid" data-iconpos="notext"/>
<input type="button" data-icon="home" data-iconpos="notext"/>
<input type="button" data-icon="info" data-iconpos="notext"/>
<input type="button" data-icon="minus" data-iconpos="notext"/>
<input type="button" data-icon="plus" data-iconpos="notext"/>
<input type="button" data-icon="refresh" data-iconpos="notext"/>
<input type="button" data-icon="search" data-iconpos="notext"/>
<input type="button" data-icon="star" data-iconpos="notext"/>
五、按钮定位
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a>
六、自定义图标按钮
<a href="#" data-role="button" data-icon="custom_icon">自定义图标</a>
.ui-icon-custom_icon{
background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;
background-size:14px 14px;
}
注意：属性命名规则“.ui-icon-<data-icon-value>,如上面的.ui-icon-custom_icon
七、分组按钮
<div data-role="controlgroup" data-type="horizontal" align="center" class="segment-control">
<a href="#" data-role="button" class="ui-control-active">菜单一</a>
<a href="#" data-role="button" class="ui-control-inactive">菜单二</a>
<a href="#" data-role="button" class="ui-control-inactive">菜单三</a>
</div>
八、主题按钮
<a href="#" data-role="button" data-theme="a">A</a>
<a href="#" data-role="button" data-theme="b">B</a>
<a href="#" data-role="button" data-theme="c">C</a>
<a href="#" data-role="button" data-theme="d">D</a>
<a href="#" data-role="button" data-theme="e">E</a>
<a href="#" data-role="button" data-theme="f">F</a>
九、动态按钮
<script type="text/javascript">
$('<a href="#" data-role="button" data-icon="star" id="b1">动态按钮</a>').appendTo("#content").button();
$('<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮</a>').insertAfter("#b1").button();
</script>
还有一种json方式的
$('<a href="#">动态按钮</a>').insertAfter("#a1").button({
'icon':'home',
'inline':true,
'shadow':true,
'theme':'b'
});
上面两种方式都用到了button()插件，button插件具有如下选项：
corners boolean
icon string
iconpos string
iconshadow boolean
initSelector css selector string
inline boolean
shadow boolean
button插件有如下两个方法：
$("#button1").button("enable");
$("#button2").button("disable");
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-icon-custom_icon{
background:url(jquery-mobile/images/icon.png) 50% 50% no-repeat;
background-size:14px 14px;
}
</style>
</head>
<body>
<div data-role="page" id="page1" data-fullscreen="true">
<div data-role="content" class="content" id="content">
<a href="#" data-role="button">链接按钮</a>
<form>
<input type="button" value="表单按钮"/>
<button type="submit">提交按钮</button>
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮"/>
图像按钮1:
<input type="image" src="jquery-mobile/images/icon.png" data-role="none"/>
图像按钮2：
<a href="#"><img src="jquery-mobile/images/icon.png"></a> <input type="button" value="带图标的按钮" data-icon="delete"/>
<input type="button" data-icon="delete" data-iconpos="notext"/>
<input type="button" data-icon="alert" data-iconpos="notext"/>
<input type="button" data-icon="arrow-d" data-iconpos="notext"/>
<input type="button" data-icon="arrow-l" data-iconpos="notext"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext"/>
<input type="button" data-icon="arrow-u" data-iconpos="notext"/>
<input type="button" data-icon="back" data-iconpos="notext"/>
<input type="button" data-icon="check" data-iconpos="notext"/>
<input type="button" data-icon="custom" data-iconpos="notext"/>
<input type="button" data-icon="forward" data-iconpos="notext"/>
<input type="button" data-icon="gear" data-iconpos="notext"/>
<input type="button" data-icon="grid" data-iconpos="notext"/>
<input type="button" data-icon="home" data-iconpos="notext"/>
<input type="button" data-icon="info" data-iconpos="notext"/>
<input type="button" data-icon="minus" data-iconpos="notext"/>
<input type="button" data-icon="plus" data-iconpos="notext"/>
<input type="button" data-icon="refresh" data-iconpos="notext"/>
<input type="button" data-icon="search" data-iconpos="notext"/>
<input type="button" data-icon="star" data-iconpos="notext"/> <a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top">top</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left">left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">right</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom">bottom</a> <a href="#" data-role="button" data-icon="custom_icon">自定义图标</a> <a href="#" data-role="button" data-theme="a">A</a>
<a href="#" data-role="button" data-theme="b">B</a>
<a href="#" data-role="button" data-theme="c">C</a>
<a href="#" data-role="button" data-theme="d">D</a>
<a href="#" data-role="button" data-theme="e" id="a1">E</a>
<a href="#" data-role="button" data-theme="f" id="b1">F</a>
</form>
</div>
</div>
</body>
<script type="text/javascript">
$('<a href="#" data-role="button" data-icon="star" id="b1">动态按钮</a>').appendTo("#content").button();
$('<a href="#" data-role="button" data-icon="delete" id="b2">动态按钮</a>').insertAfter("#b1").button();
$('<a href="#">动态按钮</a>').insertAfter("#a1").button({
'icon':'home',
'inline':true,
'shadow':true,
'theme':'b'
});
</script>
</html>
小强的HTML5移动开发之路（44）——JqueryMobile中的按钮的更多相关文章
- 小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
- 小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- 小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
- 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
- 小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
- 小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
- 小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
- 小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...
随机推荐
- 编译安装PHP-7.2.8
一 下载并软件包 wget http://124.205.69.169/files/A218000006E9730A/cn2.php.net/distributions/php-7.2.8.tar.g ...
- 微信支付v2开发(1) 微信支付URL配置
本文介绍微信支付申请时如何设置授权目录及URL. 在申请微信支付时,第一项就会碰到下图的配置. 下面就对这一设置进行讲解! 一.选择支付类型 目前有两种支付类型 JS API网页支付 Native原生 ...
- 作为一个新人，怎样学习嵌入式Linux？(韦东山）
这篇文章是引用韦老师的部分关于新人怎么学习嵌入式Linux的经验,引用如下: 1.电脑一开机,那些界面是谁显示的?是BIOS,它做什么?一些自检,然后从硬盘上读入windows,并启动它. 类似的, ...
- 深度解析VC中的消息（转发）
http://blog.csdn.net/chenlycly/article/details/7586067 这篇转发的文章总结的比较好,但是没有告诉我为什么ON_MESSAGE的返回值必须是LRES ...
- CSS笔记 - fgm练习 2-9 - 播放列表收缩展开
练习地址: http://www.fgm.cc/learn/lesson2/09.html <style> *{ margin: 0;padding: 0;font-size: 12px; ...
- 6.1、Android硬件访问服务之框架
1.通过前面led点亮的例子,其流程如下 Android app(java)(通过loadLibrary)——>C library(C库做如下事情)——>1.JNI_Onload 2.jn ...
- 移动端 h5 开发相关内容总结——JavaScript 篇
1.改变页面标题的内容 有时候我们开发 h5页面的时候须要动态的去更新title 的名字,这个时候使用 document.title='改动后的名字'; 就行解决我们的问题. 或者使用 //当前fir ...
- AOP技术应用和研究--OOP
1,软件编程技术的发展 软件编程技术与程序设计语言是分不开的.过去的几十年中,程序设计语言对抽象机制的支持程度不断提高:从机器语言到汇编语言,到高级语言,再到面向对象语言.每一种新的程序设计语言的出现 ...
- iOS开发项目实战——Swift实现ScrollView滚动栏功能
手机作为一个小屏设备,须要显示的信息往往无法在一个屏幕上显示,此时就须要使用到滚动栏,当然除了像TableView这样能够自带滚动功能的. 假设一个界面上View较多,那就必须要使用到ScrollVi ...
- 解密Arm中国：全球最具影响力的芯片公司中国布局浮出水面
经济观察报 记者 陈伊凡 沈怡然 李华清 对于Arm与中国合资公司事宜,5月4日下午,Arm授权的代表邮件回复<经济观察报>称:“合资公司目前刚开始运营”,“我们的重点是让这个新的合资公司 ...