Question

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

Answer 1

因为你没有提供任何例子，你会把兔子送到兔子洞，我不会提供任何解释。我正在使用Menu和ToolTips的元素。

将来，请提供：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/

祝你好运！

我们有一个类似于谷歌应用程序的jQuery应用程序选择器插件吗？

1 个答案: