制作多步骤表单以发布添加的最佳实践 [英] Best practice for making a multi step form to post adds

问题描述

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

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

我的问题是，在谷歌研究之后我将这个UI设计作为一个链接的最佳实践 ^（2） - 代码

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

^{（2）在iPhone 5上测试 - Safari& Chrome}

I am working on a post your free adds page.

Its a mobile website I am using JQM for the UI design.

My question is what would be the best practice for making this UI design one link which I got after researching in google LINK

explains most of it but it would be really great to have more inputs from any of you who has experience in UI design .

I am including an image which I have designed for the UI to give you a better explanation of my question

Thanks in advance .

解决方案

You can simply create several sections and navigate between them. I have created this for you, using JQuery, CSS and jQM's built-in transitions.

The idea is simply hide/show sections by swiping left and right. You can add validation before showing next section if you want. ⁽¹⁾

First of all, you need to create a "progress bar" on top of sections. I have used CSS3 flex since it is responsive and doesn't require too much code. It is straight-forward.

1. Progress bar

   • 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. Sections and their wrapper

   • 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. General 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. Explanation

   On pagecreate, all sections will be hidden except for first one by adding ui-screen-hidden which is a built-in class in jQM display: none;. Also, .currentStep class will be added to first element "p" in progress bar.

   On swipeleft or swiperight, the code checks if active section has any sibling section before or after it. If true, it moves to that section, otherwise false.

   Navigating between sections uses jQM built-in transition, the same ones used for page transition. In this demo .slide is used, however, you can use any of jQM transitions. .in, .out and .reverse are also built-in transition classes, .out is added to active section, .in is added to next/prev section and .reverse combines both aforementioned classes in case you navigate to previous section.

   Listening Animation End event(s) animationend is used to remove .in, .out and .reverse, in addition to giving active section a .active class.

   Last block of code is used to update progress bar with the number of active section. ^Updated

Demo ⁽²⁾ - Code

^{(1) This example can be used also as a simple gallery carousel without the need to use plugins.}

^{(2) Tested on iPhone 5 - Safari & Chrome}

这篇关于制作多步骤表单以发布添加的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！