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]);
復(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實現(xiàn)懸浮按鈕組件
- jQuery Mobile中的button按鈕組件基礎(chǔ)使用教程
- Bootstrap按鈕組件詳解
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
- 如何使用jquery easyui創(chuàng)建標簽組件
- jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
- Jquery組件easyUi實現(xiàn)選項卡切換示例
- Jquery組件easyUi實現(xiàn)手風琴(折疊面板)示例
- Jquery Easyui分割按鈕組件SplitButton使用詳解(17)
相關(guān)文章
ASP.NET jQuery 實例2 (表單中使用回車在TextBox之間向下移動)
每次當用戶在一個文本框輸入完數(shù)據(jù)后,更希望在敲入回車鍵后,焦點會自動移動到下一個文本框2012-01-01jquery datatable后臺封裝數(shù)據(jù)示例代碼
這篇文章主要介紹了jquery datatable后臺封裝數(shù)據(jù)的示例代碼,需要的朋友可以參考下2014-08-08基于jquery的使ListNav兼容中文首字拼音排序的實現(xiàn)代碼
jQuery的字母排序插件ListNav不支持中文,比較頭疼,最后找到一個取中文首字母的JS函數(shù),再配合ListNav,可以完善支持中文按首字母進行排序。2011-07-07jQuery實現(xiàn) RadioButton做必選校驗功能
這篇文章主要介紹了jQuery實現(xiàn) RadioButton做必選校驗功能的相關(guān)資料,需要的朋友可以參考下2017-06-06基于jquery的防止大圖片撐破頁面的實現(xiàn)代碼(立即縮放)
這篇文章將根據(jù)此寫一個應(yīng)用:讓圖片未加載完畢就實現(xiàn)按比例自適應(yīng),防止圖片撐破布局(尤其是外鏈圖片)2011-10-10瀏覽器窗口大小變化時使用resize事件對框架不起作用的解決方法
有時候我們需要用resize事件調(diào)整瀏覽器窗口大小,但對框架卻不起作用,這里介紹下實現(xiàn)方法,需要的朋友可以參考下2014-05-05javascript中對Attr(dom中屬性)的操作示例講解
這篇文章主要是對javascript中對Attr(dom中屬性)的操作進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12