jQuery之按鈕組件的深入解析
更新時(shí)間：2013年06月19日 16:17:12 作者：
本篇文章是對(duì)jQuery中的按鈕組件進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
按鈕組件：
$(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]);
復(fù)制代碼 代碼如下:
<!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>
效果圖：
您可能感興趣的文章:
- 純js實(shí)現(xiàn)懸浮按鈕組件
- jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程
- Bootstrap按鈕組件詳解
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
- 如何使用jquery easyui創(chuàng)建標(biāo)簽組件
- jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
- Jquery組件easyUi實(shí)現(xiàn)選項(xiàng)卡切換示例
- Jquery組件easyUi實(shí)現(xiàn)手風(fēng)琴(折疊面板)示例
- Jquery Easyui分割按鈕組件SplitButton使用詳解（17）
相關(guān)文章
ASP.NET jQuery 實(shí)例2 (表單中使用回車在TextBox之間向下移動(dòng))
每次當(dāng)用戶在一個(gè)文本框輸入完數(shù)據(jù)后，更希望在敲入回車鍵后，焦點(diǎn)會(huì)自動(dòng)移動(dòng)到下一個(gè)文本框2012-01-01
jquery datatable后臺(tái)封裝數(shù)據(jù)示例代碼
這篇文章主要介紹了jquery datatable后臺(tái)封裝數(shù)據(jù)的示例代碼,需要的朋友可以參考下2014-08-08
HTML Form 表單里的各種組件，例如文本輸入框，textarea，按鈕等，都可以通過CSS或其它技術(shù)進(jìn)行美化，讓它們看起來(lái)很漂亮了，唯獨(dú)下拉列表選項(xiàng)框(select box),不管你怎么做，它擺在那里總顯得格格不入。2011-08-08
基于jquery的使ListNav兼容中文首字拼音排序的實(shí)現(xiàn)代碼
jQuery的字母排序插件ListNav不支持中文，比較頭疼，最后找到一個(gè)取中文首字母的JS函數(shù)，再配合ListNav，可以完善支持中文按首字母進(jìn)行排序。2011-07-07
jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn) RadioButton做必選校驗(yàn)功能的相關(guān)資料,需要的朋友可以參考下2017-06-06
基于jquery的防止大圖片撐破頁(yè)面的實(shí)現(xiàn)代碼(立即縮放)
這篇文章將根據(jù)此寫一個(gè)應(yīng)用：讓圖片未加載完畢就實(shí)現(xiàn)按比例自適應(yīng)，防止圖片撐破布局（尤其是外鏈圖片）2011-10-10
jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法,涉及jQuery漸變效果及css顯示的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
實(shí)用的Jquery選項(xiàng)卡TAB示例代碼
Jquery選項(xiàng)卡想必大家并不陌生，本文為大家介紹個(gè)比較實(shí)用的jquery TAB選項(xiàng)卡，喜歡的朋友可以學(xué)習(xí)下2013-08-08
瀏覽器窗口大小變化時(shí)使用resize事件對(duì)框架不起作用的解決方法
有時(shí)候我們需要用resize事件調(diào)整瀏覽器窗口大小，但對(duì)框架卻不起作用，這里介紹下實(shí)現(xiàn)方法，需要的朋友可以參考下2014-05-05
javascript中對(duì)Attr(dom中屬性)的操作示例講解
這篇文章主要是對(duì)javascript中對(duì)Attr(dom中屬性)的操作進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來(lái)參考下，希望對(duì)大家有所幫助2013-12-12