Прошу помочь с javascript'ом основанном на JQuery?

Question

[Антон Валерьевич]

Всем привет. Прошу помочь с javascript'ом основанном на JQuery. Скрипт не добавляет класс при Swipe и не отрабатывает функцию toggle.
Уже три дня бьюсь над меню и встало дело, на отработке скрипта. То пишет что нет функции $ или же вообще, что не задана функция для Swipe. За ранее, спасибо. Буду очень благодарен.
А вот см скрипт.

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-menubar");
  });
  $(".swipe-area").swipe({
    swipeStatus: function(event, phase, direction, distance, duration, fingers) {
      if (phase == "move" && direction == "right") {
        $(".menubar").addClass("open-menubar");
        return false;
      }
      if (phase == "move" && direction == "left") {
        $(".menubar").removeClass("open-menubar");
        return false;
      }
    }
  });
});

С крипт взят здесь www.dejurka.ru/css/swipeable-side-menu
А вот тут вообще извращение. www.sitehere.ru/sozdanie-vydvigayushhegosya-menyu
И вот тут можно посмотреть мой пример в работе. jsfiddle.net/hLh419gk

Comments

[Андрей]

Плагин https://github.com/mattbryson/TouchSwipe-Jquery-Plugin поставили?
В Jquery я метода .swipe не припоминаю

[Антон Валерьевич]

Андрей: Да, все подключено.

Answer 1

[Дмитрий]

Возможно jQuery подгружается в режиме совместимости, попробуй так:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
(function($) {
  $('body').on('swipeleft', mySwipeLeft);
  $('body').on('swiperight', mySwipeRight);

  function mySwipeLeft(event) {
  // код для левого свайпа
  }

  function mySwipeRight(event) {
  // код для правого свайпа
  }
})(jQuery);

</script>

Comments

[Антон Валерьевич]

Спасибо, помогло отработать Toggle, но Swipe по прежнему выдает ошибку Uncaught TypeError: $(...).swipe is not a function

[Дмитрий]

Попробуй вместо swipeStatus: function(event, phase, direction, distance, duration, fingers) использовать var swipeStatus = function(event, phase, direction, distance, duration, fingers)

[Антон Валерьевич]

Дмитрий: Выходит ошибка синтаксиса в этой строке.

[Антон Валерьевич]

Дмитрий: А можете подсказать почему свайп влево не отрабатывается, а свайп в право, даже по простому тапу отрабатывается?
$("body").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase!="move" && direction!="right") {
$(".menubar").addClass("open-menubar");
return false;
}
if (phase!="move" && direction!="left") {
$(".menubar").removeClass("open-menubar");
return false;
}
}
});

[Дмитрий]

Попробуй так:

[Дмитрий]

код не вставился, сейчас ответ отредактирую

[Антон Валерьевич]

Дмитрий: Хорошо, спасибо, жду.

[Антон Валерьевич]

Ваш вариант не работает.
(function($) {
$('body').on('swiperight', mySwipeRight);
$('body').on('swipeleft', mySwipeLeft);

function mySwipeRight(event) {
if (event!='move' && direction!='right') {
$('.menubar').addClass('open-menubar');
return false;
}
}
function mySwipeLeft(event) {
if (event!='move' && direction!='left') {
$('.menubar').removeClass('open-menubar');
return false;
}
}
})(jQuery);

Не так.

(function($) {
$('body').on('swiperight', mySwipeRight);
$('body').on('swipeleft', mySwipeLeft);

function mySwipeRight(event) {
$('.menubar').addClass('open-menubar');
}
function mySwipeLeft(event) {
$('.menubar').removeClass('open-menubar');
}
})(jQuery);

[Дмитрий]

а зачем вот это if (event!='move' && direction!='left')?

[Антон Валерьевич]

Дмитрий: Просто проверял и так и так, но потом понял, что if (event!='move' && direction!='left' не нужно. убрал, но свайп вообще не работает. В моем варианте, хотя бы вправо работает.

[Антон Валерьевич]

Дмитрий: Еще раз, спасибо. Вы очень помогли с первой частью. Решение по второй части, дописал ниже. Проблема решилась.

Answer 2

[Антон Валерьевич]

Подправил согласно ману на сайтеlabs.rampinteractive.co.uk/touchSwipe/demos/Swipe_...
Получилось так.

$("wrap-content").swipe({
    swipeStatus:function(event, phase, direction, distance, duration, fingers)
    {
      if (phase!="move" && direction!="right") {
        $(".menubar").addClass("open-menubar");
        return false;
      }
      if (phase!="move" && direction!="left") {
        $(".menubar").removeClass("open-menubar");
        return false;
      }
    }
  });

Но при этом ошибка пропала, но начал ругаться на меня, bootstrap.js строкой 16 согласно которой ​

$(context).find('.tabbable').once('bootstrap-tabs', function () {

и сообщение об ошибке Uncaught TypeError: $(...).find(...).once is not a function

И так! Проблема решилась и всё работает на ура!
Дело в том, как оказалось, нельзя свайп наpначать на если внутри, уже отрабатывается скрипт на открытие и закрытие, в моем случае data-toggle. А я начал копать в сторону свайп скрипта. И из за не правильного толкования документации по ссылке выше, начал править скрипт который указан выше. Тем самым, завел себя еще дальше в дебри. Оказалось, что всё просто.

jQuery(document).ready(function($) {
  $('[data-toggle]').click(function() {
    var toggle_el = $(this).data('toggle');
    $(toggle_el).toggleClass('open-menubar');
  });
  $("#wrap-content").swipe({
    swipeStatus:function(event, phase, direction, distance, duration, fingers){
      if (phase=="move" && direction=="right") {
        $(".menubar").addClass("open-menubar");
        return false;
      }
      if (phase=="move" && direction=="left") {
        $(".menubar").removeClass("open-menubar");
          return false;
      }
    }
  });
});

При помощи Дмитрия Дмитрий Первая часть скрипта начала работать, а во второй части, надо было, всего лишь, правильно указать регион, где должен отрабатываться скрипт, убрать лишние пробелы и перед использование, почистить кэш браузера.
PS: Скрипт можен не работать при применении к блоку, так что лучше обернуть блок в дивку, назначить ей класс к примеру "menubar" и уже к этой обертке применять данный скрипт.
Всем, спасибо. И не судите строго, за корявое описание. Пишу по мере своих познаний.