第16章知問前端按鈕UI

學習要點：

1.使用 button 按鈕

2.修改 button 樣式

3.button()方法的屬性

4.button('action', param)

5.單選、複選按鈕

按鈕（button），可以給生硬的原生按鈕或者文字提供更多豐富多彩的外觀。它不單單可以設定按鈕或文字，還可以設定單選按鈕和多選按鈕。

一．使用 button 按鈕

使用 button 按鈕 ui 的時候，不一定必須是 input 按鈕形式，普通的文字也可以設定成button 按鈕。

$('#search_button').button();

二．修改 button 樣式

在彈出的 button 對話方塊中，在火狐瀏覽器中開啟 firebug 或者右擊->檢視元素。這樣，我們可以看看 button 的樣式，根據樣式進行修改。我們為了和**主題符合，對 dialog 的標題背景進行修改。

//無須修改 ui 裡的 css，直接用 style.css 替代掉 .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active

注意：其他修改方案類似。

三．button()方法的屬性

按鈕方法有兩種形式：1.button(options)，options 是以物件鍵值對的形式傳參，每個鍵值對表示乙個選項；2.button('action', param)，action 是操作對話方塊方法的字串，param 則是 options 的某個選項。

label : '查詢',

text : false,

});注意：對於 button 的事件方法，只有乙個：create，當建立 button 時呼叫。

四．button('action', param)

button('action', param)方法能設定和獲取按鈕。action 表示指定操作的方式。

//禁用按鈕
$('#search_button').button('disable');

//啟用按鈕
$('#search_button').button('enable');

//刪除按鈕
$('#search_button').button('destroy');

//更新按鈕，重新整理按鈕
$('#search_button').button('refresh');

//得到 button 的 jquery 物件
$('#search_button').button('widget');

//得到 button 的 options 值
alert($('#search_button').button('option', 'label'));

//設定 button 的 options 值
$('#search_button').button('option', 'label', '搜尋');

注意：對於 ui 上自帶的按鈕，比如 dialog 上的，我們可以通過 firebug 查詢得到 jquery物件。

$('#reg').parent().find('button').eq(1).button('disable');

五．單選框、核取方塊

button 按鈕不但可以設定普通的按鈕，對於單選框、核取方塊同樣有效。

//html 單選框男女

//jquery 單選框
$('#reg input[type=radio]').button();

//jquery 單選框改
$('#reg').buttonset(); //html部分做成一行即可

//html 核取方塊紅綠

黃橙

//jquery 核取方塊
$('#reg input[type=radio]').button();

//jquery 核取方塊改
$('#reg').buttonset();

第16章知問前端按鈕UI

第16章 Debug Shell指令碼

第16章檔案服務

第16章網路程式設計

第16章 知問前端 按鈕UI

第16章 Debug Shell指令碼

第16章 檔案服務

第16章 網路程式設計

相關推薦

第16章知問前端按鈕UI

第16章檔案服務

第16章網路程式設計