Question

我正在看这个jsfiddle

http://jsfiddle.net/Palestinian/ZzCA2/show

当然看起来很出色。用户可以通过水平滑动进入下一个屏幕。

如果有一件事我想知道，它总是从屏幕1开始

为了从屏幕2或3或4或5开始，必须添加什么样的代码？

处理滑动的部分如下

$(document).on("pagecreate", function () {
    $(".ui-content").on("swipeleft swiperight", function (e) {
        var swipe = e.type,
            nextStep = $(".steps .active").next(".step");
        prevStep = $(".steps .active").prev(".step");
        switch (true) {
            case (swipe == "swipeleft" && nextStep.length > 0):
                $(".step.active").toggleClass("slide out");
                break;
            case (swipe == "swiperight" && prevStep.length > 0):
                $(".step.active").toggleClass("slide out reverse");
                break;
        }
    });
}).on("webkitAnimationEnd mozAnimationEnd animationend", ".step", function (e) {
    var element = $(e.target);
    switch (true) {
        case (element.hasClass("out") && !element.hasClass("reverse")):
            $(element).toggleClass("slide out ui-screen-hidden active")
                .next(".step")
                .toggleClass("slide in active ui-screen-hidden");
            break;
        case (element.hasClass("out") && element.hasClass("reverse")):
            $(element).toggleClass("slide out ui-screen-hidden reverse active")
                .prev(".step")
                .toggleClass("slide in active reverse ui-screen-hidden");
            break;
        case (element.hasClass("in") && !element.hasClass("reverse")):
            element.toggleClass("slide in");
            break;
        case (element.hasClass("in") && element.hasClass("reverse")):
            element.toggleClass("slide in reverse");
            break;
    }
});

受影响的HTML是

<div role="main" class="ui-content">
    <div class="steps">
       <div class="step active">
            <h3>Step 1</h3>
            <p>Screen 1 and it always starts here </p>
       </div>
       <div class="step ui-screen-hidden">           
            <h3>Step 2</h3>
            <p> Screen 2 How can I make the screen start from 2 or 3? </p>
       </div>
       <div class="step ui-screen-hidden">
            <h3>Step 3</h3>
            <p>Screen 3</p>
       </div>
    </div>

非常感谢Stack Overflow上的专家

Answer 1

在pagecreate事件中修改/添加：

$(".step").not(":eq(1)").addClass("ui-screen-hidden");
$(".step:eq(1)").addClass("active");
$(".progress p:eq(1)").addClass("currentStep");
$("ul.checkout-tabs li:eq(1)").addClass("active1").removeClass("disabled");
$("ul.checkout-tabs li").not(":eq(1)").addClass("disabled").removeClass("active1");

将1更改为数字0-4，相应的选项卡开始激活。

请参阅： http://jsfiddle.net/ZzCA2/73/

您可能需要进行其他一些更改，以便滑动和点击按预期工作。

如何在特定位置启动移动HTML5？使用jQuery mobile

1 个答案: