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

新增評論




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






NET Magazine國際中文電子雜誌

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

月分類Month List