制作多步骤表单以发布添加的最佳做法

Question

我正在发布你的免费添加页面的帖子.

它是一个移动网站,我使用JQM进行UI设计.

我的问题是,在谷歌LINK中研究之后,将这个UI设计作为一个链接的最佳实践是什么

解释了大部分内容,但是从拥有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-hiddenjQM中的内置类display: none;.此外,.currentStep类将添加到进度栏中的第一个元素 " p" .

   在swipeleft或上swiperight,代码检查活动部分之前或之后是否有任何兄弟部分.如果true,则移动到该部分,否则false.

   在各部分之间导航使用jQM内置转换,与用于页面转换的转换相同..slide但是,在使用此演示时,您可以使用任何jQM转换..in,.out并且.reverse还内置了过渡类,.out加入到主动段,.in被加入到下一个/上一个部分,.reverse在你浏览到上一节的情况下结合上述两个班.

   Listening Animation End事件animationend用于删除.in,.out并且.reverse除了为活动部分提供.active类之外.

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

演示 ⁽²⁾ -代码

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

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