【文章內(nèi)容簡(jiǎn)介】 valueField:39。id39。, textField:39。text39。 })。 } function setValue(){ $(39。cc39。).bobox(39。setValue39。,39。239。)。 } function getValue(){ var val = $(39。cc39。).bobox(39。getValue39。)。 alert(val)。 } function disable(){ $(39。cc39。).bobox(39。disable39。)。 } function enable(){ $(39。cc39。).bobox(39。enable39。)。 } $( function() { $(39。cc39。).bobox( { width:150, listWidth:150, listHeight:100, //valuefield:39。value39。, //textField:39。text39。, //url:39。39。, editable:false })。 })。 /script /head body h1ComboBox/h1 div style=marginbottom: 10px。a href= onclick=loadData()loadData/a a href= onclick=setValue()setValue/a a href= onclick=getValue()getValue/a a href= onclick=disable()disable/a a href= onclick=enable()enable/a/div spanOptions: /span select id=cc name=dept required=true option value===請(qǐng)選擇 ==/option option value=0蘋果 /option option value=1香蕉 /option jquery easyui中文培訓(xùn)文檔 9 option value=2鴨梨 /option option value=3西瓜 /option option value=4芒果 /option /select /body /html ： [{ id:1, text:text1 },{ id:2, text:text2 },{ id:3, text:text3, selected:true },{ id:4, text:text4 },{ id:5, text:text5 }] 效果圖 參數(shù) jquery easyui中文培訓(xùn)文檔 10 屬性名 類型 描述 默認(rèn)值 width 數(shù)字 組件的寬度 auto listWidth 數(shù)字 下拉列表的寬度 null listHeight 數(shù)字 下拉列表的高度 null valueField 字符串 基礎(chǔ)數(shù)據(jù)值名稱綁定到這個(gè)組合框 value textField 字符串 基礎(chǔ)數(shù)據(jù)的字段的名稱綁定到這個(gè)組合框 text editable 布爾 定義是否可以直接到文本域中鍵入文本 true url 字符串 加載列表數(shù)據(jù)的遠(yuǎn)程 URL null 事件 事 件名 參數(shù) 描述 onLoadSuccess none 當(dāng)遠(yuǎn)程數(shù)據(jù)成功加載時(shí)觸發(fā) onLoadError none 當(dāng)遠(yuǎn)程數(shù)據(jù)加載失敗時(shí)觸發(fā) onSelect record 當(dāng)用戶選擇了一個(gè)列表項(xiàng)時(shí)觸發(fā) onChange newValue, oldValue 當(dāng)文本域字段的值改變時(shí)觸發(fā) 方法 方法名 參數(shù) 描述 select value 選擇下拉列表中的一項(xiàng) setValue param 設(shè)定指定值到文本域，參數(shù)可以是一個(gè)字符串，也可以是一個(gè) Javascript對(duì)象，如果是對(duì)象，必須包含兩個(gè)屬 性各對(duì)應(yīng) valueField 和 TextField 屬性。 getValue none 獲取字段值 reload url 請(qǐng)求遠(yuǎn)程列表數(shù)據(jù) . 4 Dialog（對(duì)話框） 實(shí)例 代碼 html head meta equiv=ContentType content=text/html。 charset=gb2312 titlejQuery EasyUI/title link rel=stylesheet type=text/css href=../themes/default/ link rel=stylesheet type=text/css href=../themes/ script $(function(){ jquery easyui中文培訓(xùn)文檔 11 $(39。dd39。).dialog({ title:39。對(duì)話框 39。, collapsible:true, minimizable:true, maximizable:true, resizable:true, toolbar:[{ text:39。Add39。, iconCls:39。iconadd39。, handler:function(){ alert(39。add39。)。 } },39。39。,{ text:39。Save39。, iconCls:39。iconsave39。, handler:function(){ alert(39。save39。)。 } }], buttons:[{ text:39。Ok39。, iconCls:39。iconok39。, handler:function(){ alert(39。ok39。)。 } },{ text:39。Cancel39。, handler:function(){ $(39。dd39。).dialog(39。close39。)。 } }] })。 })。 function open1(){ $(39。dd39。).dialog(39。open39。)。 } function close1(){ $(39。dd39。).dialog(39。close39。)。 } /script /head body h1Dialog/h1 jquery easyui中文培訓(xùn)文檔 12 div style=marginbottom: 10px。a href= onclick=open1()open1/a a href= onclick=close1()close1/a/div div id=dd icon=iconsave style=padding: 5px。 width: 400px。 height: 200px。 pdialog content./p pdialog content./p pdialog content./p pdialog content./p pdialog content./p pdialog content./p pdialog content./p pdialog content./p /div /body /html 效果圖 參數(shù) 屬性名 類型 描述 默認(rèn)值 title 字符串 對(duì)話框的標(biāo)題文本 New Dialog collapsible 布爾 定義是否顯示可折疊按鈕 false minimizable 布爾 定義是否顯示最小化按鈕 false maximizable 布爾 定義是否顯示最大化按鈕 false resizable 布爾 定義對(duì)話框是否可編輯大小 false toolbar 數(shù)組 對(duì)話框上的工具條，每個(gè)工具條包括 : text, iconCls, disabled, handler etc. null buttons 數(shù)組 對(duì)話框底部的按鈕，每個(gè)按鈕包括 : text, jquery easyui中文培訓(xùn)文檔 13 iconCls, handler etc. null 事件 Dialog的事件和窗口 (Window)的事件相同 。 方法 Dialog的函數(shù)方法和窗口 (Window)的相同 。 5 Messager（提示框） 實(shí)例 代碼 !DOCTYPE html PUBLIC //W3C//DTD HTML Transitional//EN html head meta equiv=ContentType content=text/html。 charset=gb2312 titlejQuery EasyUI/title link rel=stylesheet type=text/css href=../themes/default/ link rel=stylesheet type=text/css href=../themes/ script function show1(){ $.({ title:39。My Title39。, msg:39。Message will be closed after 4 seconds.39。, showType:39。show39。 })。 } function show2(){ $.({ title:39。My Title39。, msg:39。Message will be closed after 5 seconds.39。, timeout:5000, showType:39。slide39。 })。 jquery easyui中文培訓(xùn)文檔 14 } function show3(){ $.({ title:39。My Title39。, msg:39。Message never be closed.39。, timeout:0, showType:39。fade39。 })。 } function alert1(){ $.(39。My Title39。,39。Here is a message!39。)。 } function alert2(){ $.(39。My Title39。,39。Here is a error message!39。,39。error39。)。 } function alert3(){ $.(39。My Title39。,39。Here is a info message!39。,39。info39。)。 } function alert4(){ $.(39。My Title39。,39。Here is a question message!39。,39。question39。)。 } function alert5(){ $.(39。My Title39。,39。Here is a warning message!39。,39。warning39。)。 } function confirm1(){ $.(39。My Title39。, 39。Are you confirm this?39。, function(r){ if (r){ alert(39。confirmed:39。+r)。 = 39。 } })。 } function prompt1(){ $.(39。My Title39。, 39。Please type something39。, function(r){ if (r){ alert(39。you type:39。+r)。 } })。 jquery easyui中文培訓(xùn)文檔