easyui系列之表單一Textbox,tagbox,Calendar（2）

表單在我們的開發過程非常的常見，easyUI給我們提供了非常方便快捷的表單開發工具，使用熟練可以大大的提高后台開發速度，非常有必要熟練掌握。

1、Textbox-文本框

擴展自$.fn.validatebox.defaults，使用$.fn.textbox.defaults重寫默認值對象。

TextBox(文本框)是一個增強的輸入字段組件， 它允許用戶非常簡單的創建一組表單。它是一個用於構建其他組合控件的基礎組件，如：combo，databox、spinner等

通過標簽創建文本框。

 <input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">

使用Javascript創建文本框。

<input id="tb" type="text" style="width:300px">

  $('#tb').textbox({
           buttonText:'Search',
           iconCls:'icon-man',
           iconAlign:'left'
  })

屬性

label->string,selector:文本框標簽

$('#email').textbox({
           label: 'Email:'
           labelPosition: 'top',
           prompt: 'Ent'
     });

icons->array:在文本框刪貢獻是圖標。每一項都有以下屬性：
iconCls：類型string，圖標的class名稱；
disabled：類型boolean，指明是否禁用該圖標；
handler：類型function，用於處理點擊該圖標以后的動作。

　　　　　　　　　　　　　　　　$('#tb').textbox({
                                icons: [{
                                    iconCls:'icon-add',
                                handler: function(e){
                                    $(e.data.target).textbox('setValue', 'Something added!');
                                }
                                },{
                                    iconCls:'icon-remove',
                                    handler: function(e){
                                    $(e.data.target).textbox('clear');
                                }
                                }]
                            })

事件

事件擴展自validatebox，以下是新增的文本框事件。

 

方法

方法擴展自validatebox，以下是新增的文本框方法。

 options->none：返回屬性對象

 textbox->none：返回文本框對象

 var t = $('#tt');
     t.textbox('textbox').bind('keydown', function(e){
     if (e.keyCode == 13){    // 當按下回車鍵時接受輸入的值。
     t.textbox('setValue', $(this).val());
     }
  });

readonly->mode:啟用/禁用只讀模式。

$('#tb').textbox('readonly');        // 啟用只讀模式
$('#tb').textbox('readonly',true);    // 啟用只讀模式
$('#tb').textbox('readonly',false);    // 禁用只讀模式

2、tagbox-標簽框

擴展自$.fn.combobox.defaults，使用$.fn.tagbox.defaults重寫默認值對象。（該組件自1.5.1版開始可用）

TagBox(標簽框)擴展自combobox， 他包含combobox的所有功能。TagBox允許用戶將輸入內容顯示在標簽框中，而不是顯示在輸入框中。

通過標簽創建文本框。

 <input class="easyui-tagbox" value="Apple, Orange" label="Add a tag" style="width:100%">

使用Javascript創建文本框。

 <input id="tb" type="text" style="width:300px">

$('#tb').tagbox({
       label:'Add a tag',
       value:['Apple', 'Orange']
    })

屬性

標簽框屬性擴展自 combobox (標簽框)，

hasDownArrow-》boolean：定義是否顯示向下的箭頭

tagFormatter-》function(value,row)：該格式化器用於格式化返回值。

$('#tb').tagbox({
        tagFormatter: function(value,row){
        var opts = $(this).tagbox('options');
        return row ? row[opts.textField] : value;
       }
   });

tagStyler-》function(value,row)：該格式化器用於格式化標簽樣式，返回自定義標簽樣式字符串。

$('#tb').tagbox({
        tagStyler: function(value){
        if (value == 3){
           return 'background:#ffd7d7;color:#c65353';
        } else if (value == 4){
           return 'background:#b8eecf;color:#45872c';
        }
      }
  });

事件

事件擴展自 combobox

3、Calendar-日歷

通過 $.fn.calendar.defaults 重寫默認的 defaults。

日歷（calendar）顯示允許用戶選擇日期的一個月份日歷，並允許移動到上一月和下一頁。默認情況下，每星期的第一天設置為星期日。這可以通過設置 'firstDay' 屬性的值來改變。

 從標記創建日歷（calendar）。

<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>

javascript創建日歷

<div id="cc" style="width:180px;height:180px;"></div>

$('#cc').calendar({
    current:new Date()
});

屬性

事件

onSelect-》date：當用戶選擇一個日期時觸發。

$('#cc').calendar({
    onSelect: function(date){
        alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
    }
});

方法