Как включить в моем плагине jQuery расширенные методы - PullRequest
Новая
       48

Как включить в моем плагине jQuery расширенные методы

0 голосов
/ 06 апреля 2019

Я создаю навигационную функцию, которая очень похожа на меню кнопок hidenrable sidenav в w3schools (https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp).. Я настраиваю эту функцию в форме плагина jQuery. До сих пор я успешно включил Плагин должен быть инициализирован и иметь доступ к опциям, которые я установил. Я настроил плагин для выравнивания по правому краю экрана по умолчанию. Выравнивание вкладок по левому краю экрана простое (Переключите левую и значения правого пикселя), я хочу реализовать функцию, которая меняет направление наведения при наведении курсора, когда вкладки выровнены по левому краю. Другими словами, вкладки должны скользить слева направо, когда они расположены слева от экрана. попытался использовать функцию фабрики виджетов пользовательского интерфейса jQuery для реализации этого, а также условные операторы, которые изменяют направление анимации в методах mouseover и mouseout в верхней части раздела JS, но безрезультатно. Любые рекомендации о том, как этого добиться Смотри код бел вл. Большое спасибо! 

    <div id="block1" class="block"></div>
    <div id="block2" class="block"></div>
    <div id="block3" class="block"></div>
    <div id="block4" class="block"></div>

    <script>

      $("#block1").slideHover({
        backgroundColor: "#2196F3"
      });

      $("#block2").slideHover({
        top: 120,
        backgroundColor: "#F1C40F"
      });

      $("#block3").slideHover({
        top: 180,
        backgroundColor: "#f44336"
      });

      $("#block4").slideHover({
        top: 240,
        backgroundColor: "#555"
      });
    </script>

$(document).ready(function(){
  $(".block").mouseover(function() {
    $(this).animate({ "right": "+=50px" }, 150 );
  });
  $(".block").mouseout(function() {
    $(this).animate({ "right": "-=50px" }, 150 );
  });
});

(function ( $ ) {

    $.fn.slideHover = function(options) {

        var settings = $.extend({
          position: "fixed",
          backgroundColor: "#abc",
          padding: "25px",
          left: "",
          right: "-95px",
          width: "100px",
          borderRadius: 5,
          top: "60px"
        }, options );

        return this.css({
          position: settings.position,
          backgroundColor: settings.backgroundColor,
          padding: settings.padding,
          left: settings.left,
          right: settings.right,
          width: settings.width,
          borderRadius: settings.borderRadius,
          top: settings.top
        });
    };


}( jQuery ));
...