jQuery UI –Menu Widget簡介

by vivid 25. 二月 2015 02:25

.NET Magazine國際中文電子雜誌

者:許薰尹
稿:張智凱
文章編號:N150215702
出刊日期:2015/2/25
開發工具:Visual Studio 2013 Ultimate Update 4
版本:.NET Framework 4.5.5x

每個網站都需要有一個導覽的架構,讓使用者能夠很容易地瀏覽網站中的內容。jQuery UI Menu Widget可以讓你在網頁之中定義一個區塊,稱之為選單,使用多個超連結,搭配佈景主題,讓使用者利用滑鼠或是鍵盤來瀏覽網站中的內容。

選單(Menu)是由許多的選單項目(MenuItem)組成,當你點選其中一個選單項目,就會導向網站的其它網頁,以下是jQuery UI 基本的選單範例。

clip_image002

圖 1:基本的選單。

選單之中也可以包含子選單,這樣就會形成巢狀式的選單,參考以下巢狀式選單的範例:

clip_image004

圖 2:巢狀式選單。

設計基本選單

好的網站導覽系統,可以正確且迅速地引導使用者,連結到想看的網頁,也容易讓搜尋引擎收錄,以提高提高搜尋引擎排名(Search Engine Ranking)。jQuery UI的 Menu Widget可以讓你為網站建立出一個好的導覽系統。

在HTML中設計jQuery UI選單時,通常會使用<ul>或<ol>項目當做是容器標籤,在<li>項目中,使用<a>標籤來建立選單項目,每個選單項目,要有一個標題文字,一個基本的選單範例如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
  <ul id = "myMenu">
    <li> <a href="#"> MenuItem1 </a> </li>
    <li> <a href="#"> MenuItem2 </a> </li>
    <li> <a href="#"> MenuItem3 </a> </li>
    <li> <a href="#"> MenuItem4 </a> </li>
    <li> <a href="#"> MenuItem5 </a> </li>
  </ul>
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery-ui.min.js"> </script>
  <script>
    $(function() {
      $("#myMenu").menu();
    });
  </script>
</body>
</html>

我們只需要在jQuery Ready事件中,叫用.menu()方法,就可以將<ul>項目擴充成jQuery UI的選單。這個範例的執行結果如圖1,jQuery會將<ul>清單方塊,轉換成一個選單,當滑鼠移動到選單項目上時,將會自動套用jQuery UI的樣式,變更滑鼠所在的選單項目之背景顏色。預設選單的寬度會與置放選單的容器標籤一致,以本例來說就是瀏覽器視窗的寬度,因此範例中額外套用「ui-menu」樣式,設定選單的寬度為150px。

你也可以將<ul>標籤換成<ol>,如以下範例,將得到一樣的執行結果:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
  <ol id = "myMenu">
    <li> <a href="#"> MenuItem1 </a> </li>
    <li> <a href="#"> MenuItem2 </a> </li>
    <li> <a href="#"> MenuItem3 </a> </li>
    <li> <a href="#"> MenuItem4 </a> </li>
    <li> <a href="#"> MenuItem5 </a> </li>
  </ol>
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery-ui.min.js"> </script>
  <script>
    $(function() {
      $("#myMenu").menu();
    });
  </script>
</body>
</html>

 

實際上不是只有<ol>、<ul>標籤可以擴充成jQuery UI的選單,只要是標籤具有父子階層關係,且可以搭配超連結進行導向的HTML標籤都可以擴充成jQuery UI的選單,例如以下範例程式碼,則是使用<div>標籤來設計選單。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
  <div id = "myMenu">
    <div> <a href="#"> MenuItem1 </a> </div>
    <div> <a href="#"> MenuItem2 </a> </div>
    <div> <a href="#"> MenuItem3 </a> </div>
    <div> <a href="#"> MenuItem4 </a> </div>
    <div> <a href="#"> MenuItem5 </a> </div>
  </div>
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery-ui.min.js"> </script>
  <script>
    $(function() {
      $("#myMenu").menu();
    });
  </script>
</body>
</html>

 

引用必要JavaScript

前面的範例中直接引用了jquery-ui.min.js檔案,這個檔案中引用了jQuery UI的所有功能。若網站中只需引用到Menu Widget,你可以引用必要的JavaScript檔案就好。以這個範例來說,你需要在網頁之中引用jquery-2.0.3.min.js、jquery.ui.core.js 、jquery.ui.widget.js、jquery.ui.position.js與jquery.ui.menu.js檔案來建立選單,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
  <ul id="myMenu">
    <li> <a href="#"> MenuItem1 </a> </li>
    <li> <a href="#"> MenuItem2 </a> </li>
    <li> <a href="#"> MenuItem3 </a> </li>
    <li> <a href="#"> MenuItem4 </a> </li>
    <li> <a href="#"> MenuItem5 </a> </li>
  </ul>
 
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery.ui.core.js"></script>
  <script src="Scripts/jquery.ui.widget.js"></script>
  <script src="Scripts/jquery.ui.position.js"></script>
  <script src="Scripts/jquery.ui.menu.js"></script>
  <script>
    $(function() {
      $("#myMenu").menu();
    });
  </script>
</body>
</html>

 

jQuery UI中所有Widget都需要用到jquery.ui.core.js 與jquery.ui.widget.js檔案,而jquery.ui.position.js則是用來做子選單定位用的,而jquery.ui.menu.js則是Menu Widget核心的程式不可省。

 

巢狀式選單

選單中的選單項目可以再包含一個子選單,以形成巢狀式選單,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
 
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
 
  <ul id="myMenu">
    <li> <a href="#"> MenuItem1 </a> </li>
    <li> <a href="#"> MenuItem2 </a> </li>
    <li> <a href="#"> MenuItem3 </a> </li>
    <li>
      <a href="#">
        MenuItem4
      </a>
      <ul id="subMenu4">
        <li> <a href="#"> MenuItem 4-1 </a> </li>
        <li> <a href="#"> MenuItem 4-2 </a> </li>
        <li> <a href="#"> MenuItem 4-3 </a> </li>
        <li> <a href="#"> MenuItem 4-4 </a> </li>
        <li> <a href="#"> MenuItem 4-5 </a> </li>
      </ul>
    </li>
    <li> <a href="#"> MenuItem5 </a> </li>
  </ul>
 
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery-ui.min.js"> </script>
  <script>
    $(function() {
      $("#myMenu").menu();
    });
  </script>
</body>
</html>
 

這個範例的執行結果則如圖2。

選單樣式

jQuery UI為選單設計許多樣式,請參考下表:

Class

說明

ui-menu

選單的外部容器。

ui-widget

所有widget的外部容器,用來設字型、字型大小等等。

ui-widget-content

設定選單內容的樣式,如外框、背景

ui-corner-all

選單的四個邊角

ui-menu-icons

顯示有子選單的圖示

選單中的選項(<li>項目)可以設定以下樣式:

Class

說明

ui-state-disabled

套用透明度,當選單失效時使用

ui-menu-item

選單項目容器,可用來設定margin、padding等等

ui-menu-divider

選單分隔項目

<li>項目中的<a>項目可以設定以下樣式:

Class

說明

ui-state-focus

<a>取得焦點時套用

ui-icon

設定選單項目圖示

 

設定選單圖示

jQuery UI內建許多圖示,你可以參考http://api.jqueryui.com/theming/icons/來為選單項目加上圖示,我們需要在<a>標籤之前,加上一個<span>標籤,並套用「ui-icon」樣式,與想要使用的圖示樣示(如ui-icon-pencil),參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
 
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 200px;
    }
    .ui-widget {
      font-size: 1em;
    }
  </style>
</head>
<body>
 
  <ul id="myMenu">
    <li> <a href="#"><span class="ui-icon ui-icon-zoomin"></span> MenuItem1 </a> </li>
    <li> <a href="#"> <span class="ui-icon ui-icon-pencil"></span> MenuItem2 </a> </li>
    <li> <a href="#"><span class="ui-icon ui-icon-calendar"></span>  MenuItem3 </a> </li>
    <li>
   
      <a href="#">
        MenuItem4
      </a>
      <ul id="subMenu4">
        <li> <a href="#"> <span class="ui-icon     ui-icon-wrench"></span> MenuItem 4-1 </a> </li>
        <li> <a href="#"> <span class="ui-icon ui-icon-gear"></span> MenuItem 4-2 </a> </li>
        <li> <a href="#"> <span class="ui-icon ui-icon-disk"></span> MenuItem 4-3 </a> </li>
        <li> <a href="#"> <span class="ui-icon ui-icon-home"></span> MenuItem 4-4 </a> </li>
        <li> <a href="#"> <span class="ui-icon     ui-icon-unlocked"></span> MenuItem 4-5 </a> </li>
      </ul>
    <li> <a href="#"> <span class="ui-icon     ui-icon-print"></span> MenuItem5 </a> </li>
  </ul>
 
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery.ui.core.js"></script>
  <script src="Scripts/jquery.ui.widget.js"></script>
  <script src="Scripts/jquery.ui.position.js"></script>
  <script src="Scripts/jquery.ui.menu.js"></script>
  <script>
    $(function() {
      $("#myMenu").menu();
    });
  </script>
</body>
</html>

 

此範例的執行結果如下圖:

clip_image006

圖 3:設定選單圖示。

如果想要變更開啟子選單的圖示,可以在叫用.menu()方法時,設定icons屬性,指定submenu使用的圖示,如以下程式碼:

 

<script>
  $(function() {
    $("#myMenu").menu({ icons: { submenu: "ui-icon-triangle-1-e" } });
  });
</script>

此範例的執行結果如下圖:

clip_image008

圖 4:設定開啟子選單的圖示。

想要變更開啟子選單的圖示的座標位置,你可以設定ui-menu-icon樣示,為其指定margin:

 

.ui-menu-icon { margin: 5px; }

則執行結果如下圖,開啟子選單的圖示的位置會出現在選單項目的中間:

clip_image010

圖 5:設定開啟子選單的圖示位置。

設定選單分隔線(Menu Divider)

選單項目很多時,有時容易眼花撩亂,適當地為選單項目分組,可以讓操作上更為直覺。你可以採用幾種方式來設計選單分隔線,第一種方法是在選單中給一個空白的<li>項目。第二種做法是在<li>項目套用「class="ui-menu-divider"」樣式,最後一種做法,給一個「<li>-</li>」項目,參考以下範例程式碼:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
 
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 200px;
    }
    .ui-widget {
      font-size: 1em;
    }
   .ui-menu-icon { margin: 5px; }
  </style>
</head>
<body>
 
  <ul id="myMenu">
    <li> <a href="#"><span class="ui-icon ui-icon-zoomin"></span> MenuItem1 </a> </li>
    <li> <a href="#"> <span class="ui-icon     ui-icon-pencil"></span> MenuItem2 </a> </li>
    <li></li>
    <li> <a href="#"><span class="ui-icon ui-icon-calendar"></span>  MenuItem3 </a> </li>
    <li class="ui-menu-divider"></li>
    <li>   
      <a href="#">
        MenuItem4
      </a>
      <ul id="subMenu4">
        <li> <a href="#"> <span class="ui-icon     ui-icon-wrench"></span> MenuItem 4-1 </a> </li>
        <li> <a href="#"> <span class="ui-icon ui-icon-gear"></span> MenuItem 4-2 </a> </li>
        <li> <a href="#"> <span class="ui-icon ui-icon-disk"></span> MenuItem 4-3 </a> </li>
        <li> <a href="#"> <span class="ui-icon ui-icon-home"></span> MenuItem 4-4 </a> </li>
        <li>-</li>
        <li> <a href="#"> <span class="ui-icon     ui-icon-unlocked"></span> MenuItem 4-5 </a> </li>
      </ul>
    <li> <a href="#"> <span class="ui-icon     ui-icon-print"></span> MenuItem5 </a> </li>
  </ul>
 
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery.ui.core.js"></script>
  <script src="Scripts/jquery.ui.widget.js"></script>
  <script src="Scripts/jquery.ui.position.js"></script>
  <script src="Scripts/jquery.ui.menu.js"></script>
  <script>
    $(function() {
      $("#myMenu").menu({ icons: { submenu: "ui-icon-triangle-1-e" } });
    });
  </script>
</body>
</html>

 

此範例的執行結果如下圖:

clip_image012

圖 6:設定分隔線。

動態使選單有效或失效

有時因權限的關係我們想要控制使用者無法執行某些選單項目,你可以利用程式碼動態使選單有效或失效。做法很簡單,只要動態為代表選單項目的<li>項目套用「ui-state-disabled」樣式使選項失效;動態移除「ui-state-disabled」樣式的套用,就可以使選項有效,參考以下範例程式碼,為兩個按鈕註冊Click事件,在Click事件發生時,動態使選單有效或失效:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
 
     .ui-menu .ui-state-disabled {
        margin:0 0;
      }
  </style>
</head>
<body>
 
 
  <ul id="myMenu">
    <li> <a href="#"> MenuItem1 </a> </li>
    <li id="menuItem2"> <a href="#"> MenuItem2 </a> </li>
    <li> <a href="#"> MenuItem3 </a> </li>
    <li> <a href="#"> MenuItem4 </a> </li>
    <li> <a href="#"> MenuItem5 </a> </li>
  </ul>
 
  <br/>
  <input id="btnEnable" type="button" value="Enable" />
  <input id="btnDisable" type="button" value="Disable" />
 
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery.ui.core.js"></script>
  <script src="Scripts/jquery.ui.widget.js"></script>
  <script src="Scripts/jquery.ui.position.js"></script>
  <script src="Scripts/jquery.ui.menu.js"></script>
  <script>
    $(function() {
      $("#myMenu").menu();     
 
      $("#btnEnable").click(function() {
        $("#menuItem2").removeClass("ui-state-disabled");
      });
 
      $("#btnDisable").click(function() {
        $("#menuItem2").addClass("ui-state-disabled ui-menu-item");
      });
 
    });
  </script>
</body>
</html>

 

clip_image014

圖 7:使選單有效或失效。

動態新增、移除選單項目

你可以透過程式碼動態新增、移除選單項目,參考以下範例程式碼,註冊兩個按鈕Click事件,在Click事件發生時,利用jQuery 動態新增Menuitem6,以及移除選單中第一個選單項目:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
 
 
  <ul id="myMenu">
    <li> <a href="#"> MenuItem1 </a> </li>
    <li> <a href="#"> MenuItem2 </a> </li>
    <li> <a href="#"> MenuItem3 </a> </li>
    <li> <a href="#"> MenuItem4 </a> </li>
    <li> <a href="#"> MenuItem5 </a> </li>
  </ul>
 
  <br/>
  <input id="btnAdd" type="button" value="Add" />
  <input id="btnRemove" type="button" value="Remove" />
 
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery.ui.core.js"></script>
  <script src="Scripts/jquery.ui.widget.js"></script>
  <script src="Scripts/jquery.ui.position.js"></script>
  <script src="Scripts/jquery.ui.menu.js"></script>
  <script>
    $(function() {
      $("#myMenu").menu();       
     
    
 
      $("#btnAdd").click(function() {
        $("<li><a href='#'>MenuItem6</a></li>").appendTo("#myMenu");
        $("#myMenu").menu("refresh");
      });
 
      $("#btnRemove").click(function() {
        $("#myMenu li:first-child()").remove();
        $("#myMenu").menu("refresh");
      });
 
    });
  </script>
</body>
</html>

 

需特別注意的是,動態新增選單項目之後,你需要叫用Menu Widget的refresh方法,來更新選單的外觀,套用選單的樣式。

選單事件

選單中的項目被選取時,會觸發選單的select事件,因此你可以利用select事件來得知使用者點選哪一個選單的項目,以做對應的處理,參考以下範例程式碼,在select事件中利用callback函式的ui參數取得被點選的項目,為其套用「selected」樣式,變更選取項目的背景顏色,並將選到的選單項目的文字顯示在<div>標籤之中:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
  <ul id="myMenu">
    <li> <a href="#"> MenuItem1 </a> </li>
    <li> <a href="#"> MenuItem2 </a> </li>
    <li> <a href="#"> MenuItem3 </a> </li>
    <li> <a href="#"> MenuItem4 </a> </li>
    <li> <a href="#"> MenuItem5 </a> </li>
  </ul>
 
  <br />
  <div id="result"></div>
 
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery.ui.core.js"></script>
  <script src="Scripts/jquery.ui.widget.js"></script>
  <script src="Scripts/jquery.ui.position.js"></script>
  <script src="Scripts/jquery.ui.menu.js"></script>
  <script>
    $(function() {
      $("#myMenu").menu({
        select: function(event, ui) {
          $('.selected', this).removeClass('selected');
          ui.item.addClass('selected');
          $("#result").text("你選到了: " + ui.item.text());
        }
      });
    });
  </script>
</body>
</html>

此範例的執行結果如下圖:

 

clip_image016

圖 8:選單select事件。

Focus與blur事件

最後我們再看看看focus與blur事件。focus事件事在滑鼠移動到選單項目上方時觸發,而blur則是滑鼠移移出選單項目之外時觸發。以下範例程式碼在focus事件發生時,將選單項目上的文字顯示在<div>標籤之中;在blur事件發生時,則將<div>標籤之中的文字設為空白:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> </title>
  <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
  <style>
    .ui-menu {
      width: 150px;
    }
  </style>
</head>
<body>
 
 
  <ul id="myMenu">
    <li> <a href="#"> MenuItem1 </a> </li>
    <li> <a href="#"> MenuItem2 </a> </li>
    <li> <a href="#"> MenuItem3 </a> </li>
    <li> <a href="#"> MenuItem4 </a> </li>
    <li> <a href="#"> MenuItem5 </a> </li>
  </ul>
 
  <br/>
  <div id="result"></div>
 
  <script src="Scripts/jquery-2.0.3.min.js"> </script>
  <script src="Scripts/jquery.ui.core.js"></script>
  <script src="Scripts/jquery.ui.widget.js"></script>
  <script src="Scripts/jquery.ui.position.js"></script>
  <script src="Scripts/jquery.ui.menu.js"></script>
  <script>
    $(function() {
      $("#myMenu").menu({      
        focus: function(event, ui) {
          $("#result").text(ui.item.text());
        },
        blur: function(event, ui) {
          $("#result").text("");
        }
      });
    });
  </script>
</body>
</html>

此範例的執行結果如下:

clip_image018

圖 9:使用focus與blur事件。

Tags:

.NET Magazine國際中文電子雜誌 | jQuery UI | 許薰尹Vivid Hsu

評論 (1) -

SiYhldD1J4Rm
SiYhldD1J4Rm United States
2020/11/27 上午 01:27:49 #

576444 410695Correct humans speeches should seat as nicely as memorialize around the groom and bride. Beginer sound system around rowdy locations ought to always not forget currently the glowing leadership of a speaking, which is one�s boat. greatest man speeches brother 557168

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List