欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery?UI菜單部件Menu?Widget

 更新時(shí)間:2022年06月02日 11:15:15   作者:springsnow  
這篇文章介紹了jQuery?UI菜單部件Menu?Widget,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

帶有鼠標(biāo)和鍵盤交互的用于導(dǎo)航的可主題化菜單。

實(shí)例

一個(gè)簡(jiǎn)單的 jQuery UI 菜單(Menu)。

代碼

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3-1</a></li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
      <li><a href="#">Item 3-4</a></li>
      <li><a href="#">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>
 
<script>
$( "#menu" ).menu();
</script>

菜單可以用任何有效的標(biāo)記創(chuàng)建,只要元素有嚴(yán)格的父/子關(guān)系且每個(gè)條目都有一個(gè)錨。最常用的元素是無(wú)序列表ul:

如果使用一個(gè)非 <ul>/<li> 的結(jié)構(gòu),為菜單和菜單條目使用相同的元素,請(qǐng)使用 menus 選項(xiàng)來(lái)區(qū)分兩個(gè)元素,例如 menus: "div.menuElement"。

可通過(guò)向元素添加 ui-state-disabled class 來(lái)禁用任何菜單條目。

二、圖標(biāo)

為了向菜單添加圖標(biāo),請(qǐng)?jiān)跇?biāo)記中包含圖標(biāo):

<ul id="menu">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
</ul>

菜單(Menu)會(huì)自動(dòng)向無(wú)圖標(biāo)的條目添加必要的內(nèi)邊距。

三、分隔符

分隔符元素可通過(guò)包含未鏈接的菜單條目來(lái)創(chuàng)建,菜單條目只能是空格/破折號(hào):

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li>-</li>
  <li><a href="#">Item 2</a></li>
</ul>

四、鍵盤交互

  • ENTER/SPACE:調(diào)用獲得焦點(diǎn)的菜單項(xiàng)的動(dòng)作,可能會(huì)打開(kāi)一個(gè)子菜單。
  • UP:移動(dòng)教導(dǎo)到上一個(gè)菜單項(xiàng)。
  • DOWN:移動(dòng)教導(dǎo)到下一個(gè)菜單項(xiàng)。
  • RIGHT:如果可用,則打開(kāi)子菜單。
  • LEFT:關(guān)閉當(dāng)前子菜單,移動(dòng)焦點(diǎn)到父菜單項(xiàng)。如果焦點(diǎn)不在子菜單上,則不進(jìn)行任何操作。
  • ESCAPE:關(guān)閉當(dāng)前子菜單,移動(dòng)焦點(diǎn)到父菜單項(xiàng)。如果焦點(diǎn)不在子菜單上,則不進(jìn)行任何操作。

輸入一個(gè)字母,移動(dòng)焦點(diǎn)到以該字母開(kāi)頭的第一個(gè)條目。重復(fù)相同的字符會(huì)循環(huán)顯示匹配的條目。在一個(gè)時(shí)間內(nèi)輸入更多的字符則匹配所輸入的字符。

禁用項(xiàng)可獲得鍵盤焦點(diǎn),但是不允許任何交互。

五、主題化

菜單部件(Menu Widget)使用 jQuery UI CSS 框架 來(lái)定義它的外觀和感觀的樣式。如果需要使用菜單指定的樣式,則可以使用下面的 CSS class 名稱:

  • ui-menu:菜單的外層容器。如果菜單包含圖標(biāo),該元素會(huì)另外帶有一個(gè) ui-menu-icons class。
  • ui-menu-item:?jiǎn)蝹€(gè)菜單項(xiàng)的容器。
  • ui-menu-icon:通過(guò) icons 選項(xiàng)進(jìn)行子菜單圖標(biāo)設(shè)置。
  • ui-menu-divider:菜單項(xiàng)之間的分隔符元素。

六、快速導(dǎo)航

1、Options

  • disabled:如果設(shè)置為 true,則禁用該 menu(菜單)。
  • icons:標(biāo)題要使用的圖標(biāo),與 jQuery UI CSS 框架提供的圖標(biāo)(Icons) 匹配。設(shè)置為 false 則不顯示圖標(biāo)。
  • menus:作為menu(菜單)容器的元素的選擇器, 包括子菜單。
  • position:標(biāo)識(shí)建議菜單的位置與相關(guān)的 input 元素有關(guān)系。of 選項(xiàng)默認(rèn)為 input 元素,但是您可以指定另一個(gè)定位元素。
  • role:自定義用于菜單和菜單項(xiàng)的ARIA roles(注:關(guān)于ARIA roles)。 在默認(rèn)情況下菜單項(xiàng)使用"menuitem"。 設(shè)置role選項(xiàng)為了使"listbox"使用"option"作為菜單項(xiàng)。 如果設(shè)置為null, 沒(méi)有roles將被設(shè)置,如果菜單是由被保持焦點(diǎn)另一個(gè)元件控制時(shí)候,非常有用。

2、Methods

  • blur():從菜單中刪除焦點(diǎn), 重置任何激活樣式 和 觸發(fā)菜單的 blur 事件。
  • collapse():關(guān)閉當(dāng)前活動(dòng)的子菜單。
  • collapseAll():關(guān)閉全部打開(kāi)的子菜單。
  • destroy():完全移除 menu 功能. 這將使元素返回到之前的初始化狀態(tài).
  • disable():禁用 menu.
  • enable():?jiǎn)⒂?menu.
  • expand():打開(kāi)當(dāng)前活動(dòng)項(xiàng)目下的子菜單下,如果有的話。
  • focus():激活一個(gè)特定的菜單項(xiàng), 首先,如果打開(kāi)存在的任何子菜單,并觸發(fā)菜單的focus事件。
  • isFirstItem():返回一個(gè)布爾值,說(shuō)明當(dāng)前活動(dòng)項(xiàng)目是否菜單的第一項(xiàng)。
  • isLastItem():返回一個(gè)布爾值,說(shuō)明當(dāng)前活動(dòng)項(xiàng)目是否菜單的最后一項(xiàng)。
  • next():移動(dòng)激活狀態(tài)到下一個(gè)菜單項(xiàng)。
  • nextPage():移動(dòng)激活狀態(tài)到第一個(gè)菜單項(xiàng)下的可滾動(dòng)菜單的底部,或最后一個(gè)項(xiàng)目,如果不可滾動(dòng)。
  • option():
  • previous():移動(dòng)激活狀態(tài)到上一個(gè)菜單項(xiàng)。
  • previousPage():移動(dòng)激活狀態(tài)到第一個(gè)菜單項(xiàng)下的可滾動(dòng)菜單的頂部,或第一一個(gè)項(xiàng)目,如果不可滾動(dòng)。
  • refresh():初始化還沒(méi)有被初始化的子菜單和菜單項(xiàng)。 新的菜單項(xiàng), 包括子菜單可以被添加到菜單 或 所有的菜單的內(nèi)容可以被替換 然后使用refresh()方法初始化。
  • select():選擇當(dāng)前活動(dòng)的菜單項(xiàng), 折疊所有子菜單 并觸發(fā)菜單中的 select 事件。
  • widget():返回一個(gè)包含 button 的 jQuery 對(duì)象。

3、Events

  • blur( event, ui ):當(dāng)menu失去焦點(diǎn)時(shí)觸發(fā)這個(gè)事件。
  • create( event, ui ):當(dāng)創(chuàng)建 menu 時(shí)觸發(fā)。
  • focus( event, ui ):當(dāng)一個(gè)菜單獲得焦點(diǎn)或當(dāng)任意一個(gè)菜單項(xiàng)被激活時(shí)觸發(fā)這個(gè)事件。
  • select( event, ui ):當(dāng)被選中的時(shí)候觸發(fā)該事件。

到此這篇關(guān)于jQuery UI菜單部件Menu Widget的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論