javascript Jquery在移动设备上向左或向右滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33339486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery swipe left or right on mobile
提问by Passionate Programmer
I want to swipe left or right using jquery mobile. When I click the swipe left it opens the drawer and on right it closes the drawer. Currently I press the upper button and menu function is used to open menu I want to do it by using swipe function in jquery. Please help
我想使用 jquery mobile 向左或向右滑动。当我点击向左滑动时，它会打开抽屉，在右侧它会关闭抽屉。目前我按下上按钮，菜单功能用于打开菜单我想通过在jquery中使用滑动功能来打开菜单。请帮忙
Html Divs:
Html Div：
<div class="DinM-navbar-header ">
<img src="" data-target=".DinM-navbar-collapse" data-toggle="collapse" class="DinM-navbar-toggle" alt="menu-icon" />
</div>
<div class="">
<%=HTML %>
</div>
Javascript function:
Javascript函数：
function ShowMenu() {
var mainmenu = $(".DinM-main-menu");
if (($(window).width() <= 991 && mainmenu.parent().attr('id') != "mobile")) {
$("#main-wrapper").animate({
left: "0px"
});
$("#mobile").html(mainmenu.clone());
$(".DinM-main-menu", $(".DinM-top-menu")).remove();
$(".DinM-main-menu").css("z-index", "-1").hide();
$("#main-wrapper").css("min-height", $(".DinM-main-menu").height());
} else if ($(window).width() > 992 && mainmenu.parent().attr('id') == "mobile") {
mainmenu.insertAfter($(".DinM-navbar-header "));
mainmenu.show();
$("#mobile").html('');
}
$(document).ready(function () {
$("body").wrapInner("<div id='main-wrapper' class='content-left' ></div>").append("<div id='mobile' ></div>");
$(".DinM-main-menu").removeClass('DinM-hide');
ShowMenu();
});
回答by Vikram Mali
Very old question, but it can help others who want a simple code to get swap event in JavaScript without any dependency. Hope it will help others.
很老的问题，但它可以帮助那些想要一个简单的代码来在 JavaScript 中获取交换事件而没有任何依赖性的人。希望它能帮助别人。
See script at swipe.js
请参阅swipe.js 上的脚本
simple to use in html markup :
易于在 html 标记中使用：
<div id="touchsurface1" class="touchsurface" onSwap="touchsurfaceSwap(event)"></div>
Use in Javascript :
在 Javascript 中使用：
touchsurface = document.getElementById('touchsurface2');
touchsurface.addEventListener("swap", function(event){alert('Swaped ' + event.detail.direction + ' at ' + event.target.id);}, false);
Demo page : https://vikylp.github.io/swipe/
回答by Deshan
https://api.jquerymobile.com/swipeleft/
https://api.jquerymobile.com/swipeleft/
https://api.jquerymobile.com/swiperight/
https://api.jquerymobile.com/swiperight/
Swipe Left Event:
向左滑动事件：
jQuery( window ).on( "swipeleft", function( event )
{
hideMenu();
} );
Swipe Right Event:
向右滑动事件：
jQuery( window ).on( "swiperight", function( event )
{
ShowMenu();
} );
