小强的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(超文本标记语言) ...
随机推荐
- BZOJ1503: [NOI2004]郁闷的出纳员（Splay）
Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的 工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经 ...
- Python 之Numpy应用
NumPy 数据类型 numpy 支持的数据类型比 Python 内置的类型要多很多,基本上可以和 C 语言的数据类型对应上,其中部分类型对应为 Python 内置的类型.下表列举了常用 NumPy ...
- JavaScript推断undefined的技巧
两种方法: 处理变量为undefined的情况: v = v||null; //假设v为undefined,则其值变为null 双感叹号:!!,把null/undifined/0转换为bolle ...
- Quick Sort Algorithm
快速排序算法实现代码: //============================================================================ // Name : ...
- JSON序列化和解析
1.JSON.stringfy()用于将 JavaScript 值转换为 JSON 字符串 2.JSON.parse()用于将一个 JSON 字符串转换为 JavaScript 对象. 3.JSON. ...
- Python数据结构同Json类型数据相互转换的用法
在做Python接口自动化的时候,经常要用到Python数据结构同Json类型数据相互转换来供我们做进一步的验证提供数据,在此做个记录和总结 Python数据结构同Json类型数据相互转换的函数有:j ...
- sampleviewer add menu item error 'assert'
可以跟踪到 mfc提供的源代码内部,(注:如果打开了mfc源代码,设置了断点,但是跟不进去,那就需要更新PDB文件,具体网上搜)打开 wincore.cpp文件(D:\Program Files\Mi ...
- Anaconda的安装
Windows下Anaconda的安装和简单使用 Anaconda is a completely free Python distribution (including for commercial ...
- Day2：数据运算
一.算数运算 如: #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan print(10%2) #求模(取模) # 0 ...
- 模拟登录QQ推断是否须要验证码
老生常谈的问题了,在模拟登录之前,推断是否须要验证码: https://ssl.ptlogin2.qq.com/check? uin=QQ号码&appid=1003903&js_ver ...