jQuery UI 菜单类选项(1)

📌 相关文章

📜 jQuery UI 菜单类选项(1)

📅 最后修改于: 2023-12-03 15:02:12.950000 🧑 作者: Mango

jQuery UI 菜单类选项

jQuery UI 提供了一些菜单类选项，使得开发者能够轻松地创建功能丰富、美观的菜单。

预定义菜单

jQuery UI 提供了一些预定义的菜单，开发者可以直接使用它们，而不需要编写任何代码。

Context Menu

contextmenu 组件可以在鼠标右键点击时显示出上下文菜单，开发者可以自定义菜单项和菜单的位置。使用方式如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI ContextMenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#contextMenu" ).menu({
      select: function( event, ui ) {
        alert( "Selected: " + ui.item.text() );
      }
    });
    $( "#contextMenu" ).on("contextmenu", function(e){
        $(this).css("left",e.pageX);
        $(this).css("top",e.pageY);
        $(this).show();
        return false;
	});
    $(document).on("click", function(){
        $("#contextMenu").hide();
	});
  });
  </script>
  <style>
  ul#contextMenu {
    display:none;
    position:absolute;
    z-index:1000;
    width:200px;
    padding:10px;
    background-color:#FFFFFF;
    border:1px solid #CCCCCC;
    list-style:none;
  }
  ul#contextMenu li {
    padding:0px;
    margin:0px;
    list-style:none;
    line-height:24px;
  }
  ul#contextMenu li:hover {
    background-color:#EEEEEE;
    cursor:pointer;
  }
  </style>
</head>
<body>
 
<ul id="contextMenu">
  <li>查看</li>
  <li>编辑</li>
  <li>删除</li>
</ul>
 
<p>在此文本框中进行右键单击以显示上下文菜单。</p>
 
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Menu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#menu" ).menu();
  } );
  </script>
</head>
<body>
 
<ul id="menu">
  <li class="ui-state-disabled">Aberdeen</li>
  <li>Ada</li>
  <li>Adamsville</li>
  <li>Addyston</li>
  <li>Delphi
    <ul>
      <li class="ui-state-disabled">Ada</li>
      <li>Saarland</li>
      <li>Salzburg</li>
    </ul>
  </li>
  <li>Saarland</li>
  <li>Salzburg</li>
</ul>
 
 
</body>
</html>

自定义菜单

除了预定义菜单，开发者还可以自定义菜单。

创建菜单

使用 menu 方法创建菜单：

$( selector ).menu( options );

其中，selector 表示要创建菜单的元素，可以是标签、类名或 ID；options 是可选的配置项，可以自定义菜单项、事件等。

例如，创建一个包含两个菜单项的菜单：

$( "#myMenu" ).menu({
    items: "> :not(.ui-widget-header)",
    select: function( event, ui ) {
        console.log( ui.item.text() );
    }
});

这个方法将菜单应用到了 #myMenu 元素上，其中 items 定义了菜单项，select 定义了点击菜单项的事件。

自定义菜单项

使用 items 参数自定义菜单项：

$( "#myMenu" ).menu({
    items: [{
        label: "菜单项1",
        icon: "ui-icon-heart",
        click: function( event ) {
            console.log( "click on " + this.innerText );
        }
    },
    {
        label: "菜单项2",
        icon: "ui-icon-gear",
        click: function( event ) {
            console.log( "click on " + this.innerText );
        }
    }]
});

这个方法将菜单应用到了 #myMenu 元素上，其中 items 数组定义了两个菜单项，分别是“菜单项1”和“菜单项2”。菜单项包含了 label、icon 和 click 等属性，label 是菜单项的名称，icon 是菜单项的图标，click 是菜单项点击事件的回调函数。

多级菜单

使用 options 参数的 menus 属性可以创建多级菜单：

$( "#myMenu" ).menu({
    menus: "ul",
    select: function( event, ui ) {
        console.log( ui.item.text() );
    }
});

这个方法将菜单应用到了 #myMenu 元素上，并定义了子菜单的选择器为 ul。开发者可以在 HTML 中嵌套 ul 元素实现多级菜单。

自定义菜单样式

使用 classes 参数自定义菜单样式：

$( "#myMenu" ).menu({
    classes: {
        "ui-menu": "custom-menu",
        "ui-menu-item": "custom-menu-item",
        "ui-menu-divider": "custom-menu-divider"
    }
});

这个方法将菜单应用到了 #myMenu 元素上，并定义了菜单、菜单项和分隔符的样式。开发者可以通过自定义 CSS 类名或内联样式来自定义菜单的样式。

总结

通过使用 jQuery UI 提供的菜单类选项，开发者可以轻松地创建功能丰富、美观的菜单，实现良好的用户体验。预定义菜单提供了一些常用的菜单类型，而自定义菜单可以根据需求灵活定制。