Question

我正在发布您的免费添加页面。

它是一个移动网站，我使用 JQM 进行用户界面设计。

我的问题是，将此UI设计作为我在谷歌LINK进行研究后获得的链接的最佳做法是什么

解释了大部分内容，但是如果您有任何具有UI设计经验的人提供更多意见，那将非常棒。

我包含了一张我为UI设计的图片，可以让您更好地解释我的问题

提前致谢。

enter image description here

Answer 1

您可以简单地创建多个部分并在它们之间导航。我使用JQuery，CSS和jQM的内置转换为您创建了这个。

这个想法只是通过向左和向右滑动隐藏/显示部分。如果需要，您可以在显示下一部分之前添加验证。 ^（1）

首先，您需要创建一个＆＃34;进度条＆＃34;在部分之上。我使用了CSS3 flex，因为它具有响应性，并且不需要太多代码。这是直截了当的。

进度条

HTML

<div class="ui-content" role="main">
  <div class="progress">
     <p>1</p>
     <div class="line"></div>
     <p>2</p>
     <div class="line"></div>
     <p>3</p>
     <div class="line"></div>
     <p>4</p>
     <div class="line"></div>
     <p>5</p>
   </div>
   <!-- sections here -->
</div>

CSS

.ui-content .progress {
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    width: 100%;
    background: skyblue;
    align-items: center;
    padding: .5em;
}

.ui-content .progress * {
    margin: 0;
}

.ui-content .progress p {
    background: lightblue;
    height: 22px;
    width: 22px;
    border-radius: 22px;
    text-align: center;
}

.ui-content .progress .line {
    border-top: 1px solid black;
    flex-grow: 1;
    -webkit-align-self: center; /* center line on mobile browsers */
    -ms-flex-item-align: center;
    align-self: center;
}

章节及其包装

HTML

<div class="steps"> <!-- wrapper -->
  <div class="step">
    <!-- contents 1 -->
  </div>
  <div class="step">
    <!-- contents 2 -->
  </div>
  ...etc
</div>

CSS

.ui-content .steps {
   padding: 1em;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

常规CSS

.ui-page .ui-content {
   padding:0;
}

.ui-content * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* active step - progress bar */
.progress .currentStep {
    background: tomato !important;
    font-weight: bold;
}

<强>的jQuery

$(document).on("pagecreate", "#wizard", function () {
    $(".step").not(":eq(0)").addClass("ui-screen-hidden");
    $(".step:eq(0)").addClass("active");
    $(".progress p:eq(0)").addClass("currentStep");
    $(".ui-content").on("swipeleft swiperight", function (e) {
        var swipe = e.type,
            nextStep = $(".steps").find(".active").next(".step"),
            prevStep = $(".steps").find(".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 MSAnimationEnd oanimationend animationend", ".step", 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(".step").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(".step").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;
    }
    var dot = $(".active").index();
    /* highlight all previous numbers */
    $("p:eq(" + dot + ")").prevAll("p").addBack().addClass("currentStep");
    $("p:eq(" + dot + ")").nextAll("p").removeClass("currentStep");
});

<强>解释

在pagecreate上，除了第一个部分之外，所有部分都会被隐藏，只需添加ui-screen-hidden，这是jQM display: none;中的内置类。此外，.currentStep类将添加到第一个元素＆＃34; p＆＃34;在进度条。

在swipeleft或swiperight上，代码会检查活动部分之前或之后是否有同级部分。如果true，则移至该部分，否则为false。

在各部分之间导航使用jQM内置转换，与用于页面转换的转换相同。但是，在使用此演示.slide时，您可以使用任何jQM转换。 .in，.out和.reverse也是内置过渡类，.out已添加到活动部分，.in已添加到下一个/上一部分，.reverse结合了上述两个类，以防您导航到上一部分。

收听动画结束事件animationend除了提供.in，.out和.reverse >活动部分.active类。

最后一段代码用于使用活动部分的数量更新进度条。 ^更新

Demo ^（2） - Code

^{（1）此示例也可以用作简单的画廊轮播而无需使用插件。}

^{（2）在iPhone 5上测试 - Safari＆amp;铬}

制作多步骤表单以发布广告的最佳做法

1 个答案: