Есть ли у нас плагин выбора приложения jQuery, похожий на приложение Google? - PullRequest
Новая
       35

Есть ли у нас плагин выбора приложения jQuery, похожий на приложение Google?

0 голосов
/ 13 июня 2018

Google App Picker

Есть ли у нас какой-либо плагин для выбора приложений jQuery, похожий на google, я вижу, что у нас много выбора пиктограмм с использованием fontawesome, но мало что было на пользовательском изображении ичто-то похожее на всплывающее меню выбора приложения Google с дополнительной опцией и т. д. Мы используем версию начальной загрузки 4 с jQuery и предъявляем точно такие же требования, поэтому нам хотелось проверить, есть ли у нас какой-либо плагин jQuery для того же .?

1 Ответ

0 голосов
/ 13 июня 2018

Отправит вас в кроличью нору, поскольку вы не предоставили никаких примеров, я не буду объяснять.Я использую элементы меню и всплывающих подсказок.

В будущем укажите: 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/

Удачи!

...