阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.ui contextmenu 中文API文档

      插件 jQuery.ui contextmenu 中文API文档 https://github.com/mar10/jquery-ui-contextmenu

      jquery.ui-contextmenu

      GitHub versionBuild StatusSelenium Test StatusnpmjsDelivr,

      A jQuery plugin that provides a context menu (based on the standard jQueryUI menu widget).

      • Define menus from <ul> element or definition list (i.e. [{title: "Paste", cmd: "paste"}, ...]).
      • Themable using jQuery ThemeRoller.
      • Supports delegation (i.e. can be bound to elements that don’t exist at the time the context menu is initialized).
      • Optional support for touch devices.

      Status

      The latest release is available at npm Registry:

      $ npm install ui-contextmenu
      

      GitHub versionSee also the Change Log.

      Demo

      Live demo page:
      sample

      See also the unit tests and live examples

      More:

      Getting Started

      First, include dependencies:

      • jQuery 1.7+ (3.x or later recommended)
      • jQuery UI 1.9+ (at least core, widget, menu), 1.12+ recommended
      • One of the ThemeRoller CSS themes or a custom one
      • jquery.ui-contextmenu.js (also available as CDN on , cdnjs, or UNPKG)

      for example

      <head>
          <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
          <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
          <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
          <script src="assets/jquery.ui-contextmenu.min.js"></script>
      

      Assume we have some HTML elements that we want to attach a popup menu to:

      <div id="container">
          <div class="hasmenu">AAA</div>
          <div class="hasmenu">BBB</div>
          <div class="hasmenu">CCC</div>
      </div>
      

      Now we can enable a context menu like so:

      $("#container").contextmenu({
      	delegate: ".hasmenu",
      	menu: [
      		{title: "Copy", cmd: "copy", uiIcon: "ui-icon-copy"},
      		{title: "----"},
      		{title: "More", children: [
      			{title: "Sub 1", cmd: "sub1"},
      			{title: "Sub 2", cmd: "sub1"}
      			]}
      		],
      	select: function(event, ui) {
      		alert("select " + ui.cmd + " on " + ui.target.text());
      	}
      });
      

      Alternatively we can initialize the menu from embedded <ul> markup.

      For more information:

      Credits

      Thanks to all contributors.

      Browser Status Matrix

      Selenium Test Status

      目录
      目录