jquery - 制作多步骤表单以发布广告的最佳实践

Question

我正在撰写您的免费添加页面的帖子。

这是一个移动网站，我使用 JQM 进行 UI 设计。

我的问题是什么是使这个 UI 设计成为我在谷歌研究后获得的链接的最佳实践 LINK

解释了其中的大部分内容，但如果有任何具有 UI 设计经验的人提供更多意见，那就太好了。

我附上了一张我为 UI 设计的图片，以便您更好地解释我的问题

提前致谢。

Answer 1

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

这个想法只是通过左右滑动来隐藏/显示部分。如果需要，您可以在显示下一节之前添加验证。 ⁽¹⁾

首先，您需要在部分顶部创建一个“进度条”。我使用了 CSS3 flex，因为它响应迅速并且不需要太多代码。它很简单。

1. 进度条

   • 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;
     }
     

2. 节及其包装器

   • 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;
     }
     

3. 通用 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;
   }
   

4. 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");
   });
   

5. 解释

   在 pagecreate 上，通过添加 ui-screen-hidden 隐藏除第一个部分之外的所有部分，这是 jQM display 中的内置类:无；。此外，.currentStep 类将添加到进度条 中的第一个元素“p”。

   在 swipeleft 或 swiperight 上，代码检查 active 节之前或之后是否有任何 sibling 节.如果 true，则移动到该部分，否则 false。

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

   监听动画结束事件 animationend 用于移除.in, .out 和 .reverse，除了给 active 部分一个 .active 类。

   最后一个代码块用于使用事件部分的数量更新进度条。 ^已更新

Demo ⁽²⁾ - Code

^{(1) 此示例也可以用作简单的图库轮播，无需使用插件。}

^{(2) 在 iPhone 5 - Safari 和 Chrome 上测试}