今天下午的天氣感覺格外的氣悶,整個人有一種黏糊糊的感覺,格外的不舒服。加之馬上要放假了了,感覺自己完全坐不住呢(節前綜合症麼)。不過學習還是的繼續的。
原定計劃這篇文章本來應該是關于searchBox的介紹的,不過鑒于easyloader裡面的依賴關系,searchBox依賴于menubutton,menubutton又依賴于menu和linkbutton。于是乎,打算先對easyui元件中的菜單和按鈕進行學習了解。
對于連結按鈕由于前面已經做過相關介紹了,這裡就不再贅述了.參考"EasyUI基礎入門之pagination"即可。
使用$.fn.menu.defaults重載預設值。
菜單通常是用于上下文菜單的。這是基本元件建構其他菜單元件如menubutton、splibutton。它還可以用于導航和執行指令。
菜單項代表的是一個單獨的項目,是顯示在一個菜單裡的。包含如下屬性:
名稱
類型
描述資訊
預設值
id
string
菜單項"id"
text
菜單項名稱
iconCls
一個css類在菜單項右邊顯示一個16*16圖示
href
設定點選菜單項的連結
disable
boolean
定義是否禁止菜單項
false
onclik
function
單擊菜單項函數
到最新版本,菜單具有如下的一些屬性:
描述資訊
zIndex
number
菜單的z-index樣式，從第一個菜單開始遞增(預設值如此大,基本保證了所有菜單項在最上層)
11000000
left
菜單的左邊距
top
菜單的頂邊距
minWidth
菜單的最小寬度
120
hideOnUnhover
當設定為true時,滑鼠退出時自動的隐藏菜單
true
屬性
描述資訊
onShow
none
當一個菜單被顯示的時候觸發。
onHide
當一個菜單被隐藏的時候觸發。
onClick
item
當一個菜單被點選時觸發。下面的例子顯示了如何處理所有菜單項的點選事件:
對菜單的操作都會有一些方法,比如打開"File"菜單,這一操作什麼時候被觸發,了解這些在處理起來會更加的心應手(後期查API也是可以的啦)。
參數
描述資訊
options
傳回菜單的options參數對象
show
pos
在一個特定的位置顯示菜單
hide
隐藏一個菜單
destroy
銷毀一個菜單
getItem
itemEl
獲得菜單項資料并将其傳回,資料包含以下屬性:
target:DOM對象,菜單項目。
id:字元串,配置設定給元素的ID。
text：字元串,菜單項的文本。
href:字元串,超連結的位址。
disabled:boolean,菜單項是否啟用。
onclick:function,點選菜單時将執行的函數。
iconCls:字元串,圖示css類。
下面是一個簡單的例子:
<div id="mm" class="easyui-menu" style="width:120px;">
<div id="m-new">New</div>
<div>
<span>Open</span>
<div style="width:150px;">
<div><b>Word</b>
</div>
<div>Excel</div>
<div>PowerPoint</div>
<div data-options="iconCls:‘icon-save‘">Save</div>
<div class="menu-sep"></div>
<div>Exit</div>
var itemEl = $(‘#m-new‘)[0]; // the menu item element
var item = $(‘#mm‘).menu(‘getItem‘, itemEl);
console.log(item);
console.info(item);
之後我們在打開chrome浏覽器按F12即可看到如下效果:
setText
param
設定特定菜單的文本,‘param‘參數包含2個屬性:
target:DOM對象,将要被設定的菜單項
text:字元串,新的文本值
一個簡單的示例:
$(function () {
var item = $(‘#mm‘).menu(‘findItem‘, ‘Save‘);
$(‘#mm‘).menu(‘setText‘, {
target: item.target,
text: ‘Saving‘
});
原本的菜單項字元串屬性值為"Save",執行上述代碼之後變為了"Saving"這裡就不再貼圖了,可嘗試之。
setIcon
param
設定特定的菜單項的圖示,‘param‘參數包含兩個屬性:
iconCls:新的圖示css類。
一個簡單的例子:
findItem
根據給定的text查找特定的菜單項,與getItem傳回相同的資料。
一個簡單例子:
appenditem
添加一個新的菜單項,參數表示新條目屬性。預設情況下,添加的項目将成為一個頂級菜單項，附加的子菜單。附加的子菜單項,父屬性應該設定為指定父條目元素,已經有字條目。
‘param‘參數包含如下屬性:
parent:待添加新菜單的DOM對象,如果沒有被設定,新菜單項将作為頂級菜單添加。
text:字元串,菜單項文本。
href:字元串,超連結位址。
onclick:字元串或者函數,當使用者點選菜單項時将要被執行的腳本代碼。
iconCls:圖示類。
// append a top menu item
$(‘#mm‘).menu(‘appendItem‘, {
text: ‘New Item‘,
iconCls: ‘icon-ok‘,
onclick: function () {
alert(‘New Item‘)
}
// append a sub menu item
var item = $(‘#mm‘).menu(‘findItem‘, ‘Open‘); // find ‘Open‘ item
parent: item.target, // the parent item element
text: ‘Open Excel‘,
iconCls: ‘icon-excel‘,
alert(‘Open Excel‘)
removeitem
移除指定的菜單項。
enableitem
啟用指定的菜單項。
disableitem
禁用菜單項。
Tips: 上面代碼示例中使用了console.info(console.log),console是控制台列印日志資訊的,主要是用于調試的。這裡也是建立使用console方式來調試(FF,Chrome)。新手一般使用alert進行調試，這樣不僅會是程式中斷執行(如果alert在loop中,呵呵累死你),而且列印的資訊太簡單，并不适合調試。
console可以完美糾正。
1、建立菜單
使用html标簽建立菜單必須對<div>标簽引用‘easyui-menu‘類,每個菜單項都将使用<div>标簽建立。為菜單添加‘iconCls‘屬性可以指定一個顯示在菜單項左側的圖示。對菜單引用‘menu-sep‘類将生成一條菜單分隔線。
使用腳本建立菜單并且監聽‘onClick‘事件。
2、顯示菜單
當一個菜單建立完畢後,預設情況下它是隐藏而不可見的,調用show方法可以顯示菜單
對于菜單的學習基本上也就這樣了,更加詳細的内容和Demo可以去easyui官網了解學習。
有了linkbutton和menu的基礎之後接下來就可以進入到MenuButton的學習中了。菜單按鈕可以說是下拉菜單的一部分，由一個連結按鈕盒菜單組成。這個連結菜單預設将隐藏顯示在菜單内。當使用者點選或滑鼠移動到連結按鈕時,菜單将顯示且允許點選它。
繼承$.fn.linkbutton.defaults,使用$.fn.menubutton重載預設值。
依賴于menu和linkbutton
繼承linkbutton的屬性,也有菜單按鈕的獨有屬性。
描述資訊
plain
設定為true的時候将顯示簡潔效果(連結菜單沒有邊框)
menu
用來建立一個相應菜單的選擇器
null
menuAlign
菜單的對齊方式,從1.3.6開始,可選值為left、right
duration
定義滑鼠劃過按鈕時顯示菜單所需要的時間,機關毫秒(幾秒之後顯示,點選按鈕即可馬上顯示)
100
這些方法繼承至linkbutton,下面的是為splitbutton添加和重寫的。
描述資訊
傳回屬性對行啊
禁用菜單按鈕
enable
啟用菜單按鈕
登出菜單按鈕
1、通常情況下使用html建立按鈕:
2、使用javascript建立:
關于一些demo,這裡就不再做示範了,官網的例子也是比較簡單易懂的啦。
移動到分隔或者點選才下拉的菜單按鈕,分隔按鈕有連結按鈕和菜單組長。菜單按鈕被分為兩部分。當滑鼠移動到分隔符上,一個split會顯示出來。菜單顯示時滑鼠光标位于連結按鈕郵冊部分。
繼承$.fn.linkbutton.defaults,使用$.fn.splitbutton.defaults重載預設值。
依賴于菜單和連結按鈕。
屬性繼承連結按鈕,也有其獨有屬性,獨有屬性和菜單按是一樣的,這裡我就不再展示了,可參考上面菜單按鈕的屬性表。
描述資訊
傳回屬性對象
禁用分隔按鈕。示例:
啟用分隔按鈕
登出分隔按鈕
1、使用标簽建立分隔按鈕:
2、使用腳本建立:
其實,spliteButton的效果和菜單按鈕的效果非常相似,隻是細節上spliteButton隻有點選或者滑鼠移動到分隔符才能下拉菜單。對于其Demo,同樣官方的demo十分簡單易懂,這裡我也就不在示範了。OVER!
![C#.Net 修改桌面背景圖（一）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)