我们是否有类似于 google 应用程序的 jQuery 应用程序选择器插件？答案

【问题标题】：Do we have a jQuery App picker Plugin similar to google application.?我们是否有类似于 google 应用程序的 jQuery 应用程序选择器插件？
【发布时间】：2018-11-22 12:41:42
【问题描述】：

我们是否有任何类似于 google 的 jQuery App Picker 插件，我看到我们有很多使用 fontawesome 的图标选择器，但在自定义图像和类似于 google 应用程序选择弹出菜单的东西上没有找到太多选项等。我们正在使用带有 jQuery 的 bootstrap 4 版本并且有完全相同的要求，所以想检查我们是否有任何相同的 jQuery 插件。？

【问题讨论】：

我还没有看到一个可以用 jQuery UI Menu 轻松制作的。

标签： jquery user-interface jquery-ui jquery-plugins

【解决方案1】：

由于您没有提供示例，因此将您送入兔子洞，我将不提供任何解释。我正在使用菜单和工具提示的元素。

以后请提供：https://stackoverflow.com/help/mcve

示例：https://jsfiddle.net/Twisty/vmbtjnru/1/

HTML

<div class="top-bar">
  <div class="app-menu-top right">
    <span class="ui-icon ui-icon-grip-solid-horizontal"></span>
  </div>
  <div class="menu-wrapper">
    <ul id="app-menu">
      <li class="no-label">
        <div><span class="ui-icon ui-icon-disk"></span>Save</div>
      </li>
      <li class="no-label">
        <div><span class="ui-icon ui-icon-zoomin"></span>Zoom In</div>
      </li>
      <li>
        <div><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</div>
      </li>
      <li class="ui-state-disabled">
        <div><span class="ui-icon ui-icon-print"></span>Print...</div>
      </li>
    </ul>
  </div>
</div>

CSS

.ui-menu {
  width: 150px;
  box-shadow: 0 0 7px #e3e3e3;
}

.right {
  position: absolute;
  right: 60px;
}

.arrow:after {
  background: white;
  border: 1px solid #d3d3d3;
}

.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}

.arrow.top {
  top: -16px;
  bottom: auto;
}

.arrow.left {
  left: 65%;
}

.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top:after {
  bottom: -20px;
  top: auto;
}

.no-label {
  display: inline;
}

JavaScript

$(function() {
  $("#app-menu").menu().
  position({
    my: "center+20 top",
    at: "center bottom+15",
    of: $(".app-menu-top"),
    using: function(position, feedback) {
      $(this).css(position);
      $("<div>")
        .addClass("arrow")
        .addClass(feedback.vertical)
        .addClass(feedback.horizontal)
        .appendTo(this);
    }
  }).hide();
  $(".app-menu-top").click(function() {
    $("#app-menu").show();
  });
});

更新

您也可以使用 FontAwesome：https://jsfiddle.net/Twisty/tmw4bv3o/1/

祝你好运！

【讨论】：