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)建標(biāo)簽組件
- jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
- Jquery組件easyUi實現(xiàn)選項卡切換示例
- Jquery組件easyUi實現(xiàn)手風(fēng)琴(折疊面板)示例
- Jquery Easyui分割按鈕組件SplitButton使用詳解（17）
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)的彈幕效果,結(jié)合完整實例形式分析了jQuery通過結(jié)合時間函數(shù)控制輸入文字與樣式的漸變實現(xiàn)彈幕效果,需要的朋友可以參考下2017-09-09
jQuery pager.js 插件動態(tài)分頁功能實例分析
這篇文章主要介紹了jQuery pager.js 插件動態(tài)分頁功能,結(jié)合具體實例形式分析了pager.js 插件的定義及使用插件進行分頁操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
jQuery ui實現(xiàn)動感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼
這篇文章主要介紹了jQuery ui實現(xiàn)動感的圓角漸變網(wǎng)站導(dǎo)航菜單效果代碼,涉及jquery插件構(gòu)造圓角圖形及頁面過度效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jquery Easyui Datagrid實現(xiàn)批量操作（編輯，刪除，添加）
本篇文章主要介紹了jquery Easyui Datagrid實現(xiàn)批量操作（編輯，刪除，添加），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02 
jQuery下擴展插件和拓展函數(shù)的寫法（匿名函數(shù)使用的典型例子）
這些年，javascript火起來了，主要歸功于AJAX的推廣應(yīng)用，Web2.0的發(fā)展。。。于是，出現(xiàn)了很多的javascript框架。
2010-10-10 
一些常用的驗證腳本
2010-07-07 
jQuery實現(xiàn)數(shù)字華容道小游戲(實例代碼)
這篇文章主要介紹了jQuery實現(xiàn)數(shù)字華容道小游戲功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01 
jquery 動態(tài)增加,減少input表單的簡單方法(必看)
下面小編就為大家?guī)硪黄猨query 動態(tài)增加,減少input表單的簡單方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10