jQuery之按钮组件的深入解析
更新时间:2013年06月19日 16:17:12 作者:
本篇文章是对jQuery中的按钮组件进行了详细的分析介绍,需要的朋友参考下
按钮组件:
$(selector).button([options]);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ButtonIcon</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.widget.js"></script>
<script type="text/javascript" src="JS/jquery.ui.button.js"></script>
<script>
$(document).ready(function(){
$("input,button").button({
icons: {
primary: "ui-icon-locked"
// secondary: "ui-icon-triangle-1-s"
}
});
$("a,div").button({
icons: {
secondary: "ui-icon-triangle-1-s"
}
});
});
</script>
<style>
body{ padding:30px; font-size:9px; }
</style>
</head>
<body>
<input type="button" value="Button 1" />
<input type="submit" value="Submit Button" />
<button>Button 2</button>
<input type="checkbox" id="check1" /><label for="check1">Check 1</label>
<input type="radio" id="radio1" /><label for="radio1">Radio1</label>
<a>Anchor</a>
<div>DIV</div>
</body>
</html>
效果图:
$(selector).button([options]);
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ButtonIcon</title>
<link rel="stylesheet" type="text/css" href="themes/ui-lightness/jquery.ui.all.css"/>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.ui.core.js"></script>
<script type="text/javascript" src="JS/jquery.ui.widget.js"></script>
<script type="text/javascript" src="JS/jquery.ui.button.js"></script>
<script>
$(document).ready(function(){
$("input,button").button({
icons: {
primary: "ui-icon-locked"
// secondary: "ui-icon-triangle-1-s"
}
});
$("a,div").button({
icons: {
secondary: "ui-icon-triangle-1-s"
}
});
});
</script>
<style>
body{ padding:30px; font-size:9px; }
</style>
</head>
<body>
<input type="button" value="Button 1" />
<input type="submit" value="Submit Button" />
<button>Button 2</button>
<input type="checkbox" id="check1" /><label for="check1">Check 1</label>
<input type="radio" id="radio1" /><label for="radio1">Radio1</label>
<a>Anchor</a>
<div>DIV</div>
</body>
</html>
效果图:
相关文章
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
每次当用户在一个文本框输入完数据后,更希望在敲入回车键后,焦点会自动移动到下一个文本框2012-01-01基于jquery的使ListNav兼容中文首字拼音排序的实现代码
jQuery的字母排序插件ListNav不支持中文,比较头疼,最后找到一个取中文首字母的JS函数,再配合ListNav,可以完善支持中文按首字母进行排序。2011-07-07浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
有时候我们需要用resize事件调整浏览器窗口大小,但对框架却不起作用,这里介绍下实现方法,需要的朋友可以参考下2014-05-05javascript中对Attr(dom中属性)的操作示例讲解
这篇文章主要是对javascript中对Attr(dom中属性)的操作进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12
最新评论