2019-07-26
使用 jQuery UI 的 Menu 功能
https://jqueryui.com/menu/
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="jQueryUIMenu.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="Scripts/jquery-3.4.1.js"></script> <script type="text/javascript" src="Scripts/jquery-ui-1.12.1.js"></script> <script type="text/javascript"> $(function () { $("#menu").menu(); }); </script> <style type="text/css"> .ui-menu { width: 150px; } </style> </head> <body> <ul id="menu"> <li class="ui-state-disabled"><div>Class Z</div></li> <li><div>Class A</div></li> <li> <div>Class B</div> <ul> <li><div>Book B2</div></li> <li><div>Book B3</div> <ul> <li><div>Book B3A</div></li> <li><div>Book B3B</div></li> </ul> </li> </ul> </li> </ul> </body> </html> |
注意順序，jQuery-UI 的 CSS 要先，jQuery 要在 jQuery-UI 之前
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="Scripts/jquery-3.4.1.js"></script> <script type="text/javascript" src="Scripts/jquery-ui-1.12.1.js"></script> <script type="text/javascript"> $(function () { $("#menu").menu(); }); </script> <style type="text/css"> .ui-menu { width: 150px; } </style> |
(完)
相關
EasyUI
http://www.jeasyui.com/demo/main/index.php?plugin=TreeGrid
NuGet 的 EasyUI 已經2年多沒有更新了
[研究] 下拉選單 DropDown Menu (jQuery + jQuery-UI) 研究
https://shaurong.blogspot.com/2019/07/dropdown-menu-jquery-jquery-ui.html
[研究] 下拉選單 DropDown Menu (CSS)+ASP.NET Master Page 研究
https://shaurong.blogspot.com/2019/07/dropdown-menu-cssaspnet-master-page.html
沒有留言:
張貼留言