作爲後臺系統常用的jquery超強插件
設置屬性方式:
(1)在html控件屬性中設置
(2)在js調用控件方法時以JSON格式傳入
設置事件
在屬性或調用控件方法時傳入的JSON對象中添加“事件名:回調函數”
設置方法
$("[使用選擇器選中控件]").控件名("控件方法名",[參數列表]);
resizable
可以調整大小的控件
data-options:提供JSON參數數據
屬性的格式要求:
屬性名值對內部用冒號分隔 屬性名值對之間用逗號分隔而不是分號
boolean類型不能加引號 string類型必須加引號
像素數如果是數值類型不能加px這樣的單位
linkbutton 具有很多樣式的按鈕控件
iconCls:'icon-add'
iconCls:'icon-edit'
iconCls:'icon-ok'
iconCls:'icon-cancel'
iconCls:'icon-save'
iconCls:'icon-search'
iconCls:'icon-remove'
iconCls:'icon-reload'
iconAlign:'right'
options方法
enable方法
disable方法
panel
是一個面板控件
如果想要指定panel的位置除了使用top、left屬性外還要需要通過panel方法獲取panel對象設置絕對定位屬性才能生效$("#id").panel("panel").css("position","absolute");
panel的主要常規屬性
寬度:width
高度:height
圖標:iconCls
是否可摺疊:collapsible
是否可最小化:minimizable
是否可最大化:maximizable
是否可關閉:closable
是否初始摺疊:collapsed
是否初始最小化:minimized
是否初始最大化:maximized
是否初始關閉:closed
是否有邊框:border
面板內容:content
是否自適應寬度:fit 如果是false代表不自動充滿父容器 true代表自動充滿父容器
自定義工具欄:使用tools屬性
加載遠程數據
href屬性設置遠程數據來源地址
refresh重新加載遠程內容
loadingMessage屬性設置等待期間顯示的文本
事件
加載遠程數據時觸發:onLoad
打開面板時觸發:onOpen
常用方法
返回面板屬性對象:options
移動面板:move
爲面板設置標題:setTitle
下面介紹三種彈窗組件:
(1)messager
alert框 confirm框 prompt框 右下角彈框
(2)window
窗口標題 窗口是否顯示 窗口是否顯示四個按鈕 窗口是否可以關閉 窗口是否可以拖動 窗口是否可以改變大小 窗口是否模態化
窗口方法 Window繼承自Panel 和Panel的區別
(1)Panel初始狀態沒有4個按鈕,而Window支持
(2)Panel不支持模態窗口,Window支持
(3)Panel不支持拖動,而Window支持
(3)dialog
(1)在頂部添加按鈕:toolbar屬性
(2)在底部添加按鈕:buttons屬性
progressbar
(1)獲取進度條當前值:getValue方法
(2)設置進度條當前值:setValue方法
(3)重設進度條長度:resize方法
※每隔一秒執行一次指定函數
window.setInterval(指定函數,1000);
tabs
(1)屬性
fit:設置爲true時,選項卡的大小將鋪滿它所在的容器。
tabPosition:選項卡位置。可用值:'top','bottom','left','right'。
tools:工具欄添加在選項卡面板頭的左側或右側。
toolPosition:工具欄位置。可用值:'left','right'。
tabWidth:標籤條的寬度。
tabHeight:標籤條的高度。
(2)事件
onSelect:選中時觸發
onLoad:在ajax選項卡面板加載完遠程數據的時候觸發。
(3)方法
getTab:獲取指定選項卡面板,'which'參數可以是選項卡面板的標題或者索引。
exists:表明指定的面板是否存在,'which'參數可以是選項卡面板的標題或索引。
select:選擇一個選項卡面板,'which'參數可以是選項卡面板的標題或者索引。
add:添加一個新選項卡面板,選項參數是一個配置對象,查看選項卡面板屬性的更多細節。
getSelected獲取選擇的選項卡面板 此時獲取到的是panel控件
form
(1)表單驗證
瀏覽器端驗證 validateType
必填項
Email格式
字符串長度
遠程驗證
(2)表單提交 是ajax方法 不會同步跳轉頁面 需要自己寫頁面跳轉
(3)表單回顯 load
datagrid
(1)靜態表格 <table>標籤 用datagrid方法加載這個表格
列寬自適應
是否單選
分頁支持
(2)動態獲取數據表格
(3)增刪改查操作