使用jQuery mobile从右/左滑动个人div?
问题描述:
我试图实现“与前一个和下一个”部分幻灯片。该部分被标记成这样:使用jQuery mobile从右/左滑动个人div?
<section class="active">
Section 1
</section>
<section>
Section 2
</section>
<section>
Section 3
</section>
<ul class="pager">
<li><a href="#" class="prev" data-navsec="prev">Prev</a></li>
<li><a href="#" class="next" data-navsec="next">Next</a></li>
</ul>
所有部分都隐藏除一个与active
类。
而且我希望下一个和上一个部分从上一个时候的左侧滑入,然后右下一个。
jQuery Mobile中不存在幻灯片功能,我可以看到。但我发现它使用jQuery UI。所以我包括那个图书馆。
但是,仍然存在问题。我只能指定元素滑动的方向。不是从哪里开始的:
$('section.active').hide('slide', {direction: 'left'}).removeClass('active').next().show('slide', {direction: 'right'}).addClass('active');
那么,我该如何解决这个问题?
答
这是我为你制作的JS Fiddle。希望它会给你一个清晰的想法来实现你的解决方案。
<button type="button" class="slide-left">Slide Left</button>
<button type="button" class="slide-right">Slide Right</button>
<hr>
<div class="box">
<div>Section 1</div>
</div>
<div>
<div>Section 2</div>
</div>
$(document).ready(function(){
var boxWidth = $(".box").width();
$(".slide-left").click(function(){
$(".box").animate({
width: 0
});
});
$(".slide-right").click(function(){
$(".box").animate({
width: boxWidth
});
});
});
答
由于奥马尔的参考链接我做了这个,工作液:
$(document).on("pagecreate", "[data-role='page']", function()
{
$(this).find('section').not(":eq(0)").addClass("ui-screen-hidden");
$(this).find("section:eq(0)").addClass("active");
$(".ui-content").on("swipeleft swiperight", function (e)
{
var swipe = e.type,
nextStep = $(this).find("section.active").next("section"),
prevStep = $(this).find("section.active").prev("section");
switch (true)
{
case (swipe == "swipeleft" && nextStep.length > 0):
$(this).find("section.active")
.toggleClass("slide out");
break;
case (swipe == "swiperight" && prevStep.length > 0):
$(this).find("section.active")
.toggleClass("slide out reverse");
break;
}
});
}).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", "section", function (e)
{
var elm = $(e.target);
switch (true)
{
case (elm.hasClass("out") && !elm.hasClass("reverse")):
$(elm).toggleClass("slide out ui-screen-hidden active");
$(elm).next("section").toggleClass("slide in active ui-screen-hidden");
break;
case (elm.hasClass("out") && elm.hasClass("reverse")):
$(elm).toggleClass("slide out ui-screen-hidden reverse active");
$(elm).prev("section").toggleClass("slide in active reverse ui-screen-hidden");
break;
case (elm.hasClass("in") && !elm.hasClass("reverse")):
elm.toggleClass("slide in");
break;
case (elm.hasClass("in") && elm.hasClass("reverse")):
elm.toggleClass("slide in reverse");
break;
}
});
你可以做这样的事情http://*.com/a/24043188/1771795 – Omar
一个问题,就是它可能让他们同时滑动?现在下一张幻灯片将在第一张完成后开始。 –