步驟引導與頁籤結合的資料輸入表單

結合下一步、上一步， Step by step 的步驟引導方式與頁籤UI (Tab UI)，設計使用者的資料輸入表單。

本文使用 jQuery 的 UI library。

Update: 2008/02/22
jQuery UI 1.5 移除了 tabsClick() 方法，將它改為 tabs() 方法的 'select' 功能。

基本結構

分成三個部份，一是表單(form)，二是 jQuery 的Tabs UI，三是加上步驟引導連結列。

表單

首先，畫出基本的表單結構。假設我們要求使用者輸入下列的資料內容:

註冊帳號
密碼
姓名
住址
設定選項1
設定選項2

<form id="form" name="form">
      <div class="formField">
        <label for="userId">註冊帳號</label>
        <input id="userId" name="user[id]" type="text" value=""/>
      </div> 

      <div class="formField">
        <label for="userPassword">密碼</label>
        <input id="userPassword" name="user[password]" type="password" value=""/>
      </div> 

      <div class="formField">
        <label for="userName">姓名</label>
        <input id="userName" name="user[name]" type="text" value=""/>
      </div> 

      <div class="formField">
        <label for="userAddress">住址</label>
        <input id="userAddress" name="user[address]" type="text" value=""/>
      </div> 

      <div class="formField">
        <label for="userOption1">設定選項1</label>
        <select id="userOption1" name="userProfile[option1]">
          <option value="100">100</option>
          <option value="200">200</option>
        </select>

      </div> 

      <div class="formField">
        <label for="userOption2">設定選項2</label>
        <select id="userOption2" name="userProfile[option2]">
          <option value="0">ab</option>
          <option value="1">xy</option>
        </select>
      </div> 

      <button type="submit">填好送出</button> 

    </form>

表單基本外觀

頁籤分頁

接著我們希望按照輸入內容將表單欄位分類，每一類分成一頁，並在頁面上加上欄位的說明內容。

這一部份，可以參考 jQuery::UI/Tabs 的範例很快的實現。我們需要做的是，正確地安插頁籤清單與 div 區塊。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/ui.tabs.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#form2 > ul").tabs();
  });
</script>
    
<form id="form2" name="form2">

  <div id="form2Tab" class="flora">

    <ul>
      <li><a href="#form2Tab1"><span>One</span></a></li>
      <li><a href="#form2Tab2"><span>Two</span></a></li>
      <li><a href="#form2Tab3"><span>Three</span></a></li>
    </ul>

    <div id="form2Tab1"> 
      <div class="formField">
        <label for="userId">註冊帳號</label>
        <input id="userId" name="user[id]" type="text" value=""/>
      </div> 

      <div class="formField">
        <label for="userPassword">密碼</label>
        <input id="userPassword" name="user[password]" type="password" value=""/>
      </div> 
    </div>

    <div id="form2Tab2"> 
      <div class="formField">
        <label for="userName">姓名</label>
        <input id="userName" name="user[name]" type="text" value=""/>
      </div> 

      <div class="formField">
        <label for="userAddress">住址</label>
        <input id="userAddress" name="user[address]" type="text" value=""/>
      </div> 
    </div>
    
    
    <div id="form2Tab3"> 
      <div class="formField">
        <label for="userOption1">設定選項1</label>
        <select id="userOption1" name="userProfile[option1]">
          <option value="100">100</option>
          <option value="200">200</option>
        </select>

      </div> 

      <div class="formField">
        <label for="userOption2">設定選項2</label>
        <select id="userOption2" name="userProfile[option2]">
          <option value="0">ab</option>
          <option value="1">xy</option>
        </select>
      </div> 
    </div>

  </div><!-- end form2Tab -->
    
  <button type="submit">填好送出</button> 

</form>

加入頁籤的表單外觀

加入步驟引導列

在每一頁籤區塊中，添加一列步驟引導連結，並使用 jQuery::UI/Tabs.tabs('select', n) 方法~~jQuery::UI/Tabs.tabsClick 方法~~，替連結掛上頁籤跳頁動作。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/ui/ui.tabs.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $("#form3Tab > ul").tabs();

    function form3TabJumpToN(n) {
        //$('#form3Tab > ul').tabsClick(n);
        var href = this.href.substring( this.href.indexOf('#') );
        $('#form3Tab > ul').tabs('select', href);
        return false;
    }

    $('.formTabNagigator > a[href^="#form3Tab"]').click(form3TabJumpToN);

    $('.formTabNagigator').css("text-align", "center")
  });
</script>
<form id="form3" name="form3">

  <div id="form3Tab" class="flora">

    <ul>
      <li><a href="#form3Tab1"><span>One</span></a></li>
      <li><a href="#form3Tab2"><span>Two</span></a></li>
      <li><a href="#form3Tab3"><span>Three</span></a></li>
    </ul>

    <div id="form3Tab1">
      <a name="form3Tab1"></a>
 
      <div class="formField">
        <label for="userId">註冊帳號</label>
        <input id="userId" name="user[id]" type="text" value=""/>
      </div> 

      <div class="formField">
        <label for="userPassword">密碼</label>
        <input id="userPassword" name="user[password]" type="password" value=""/>
      </div> 
      
      <div class="formTabNagigator">
        <a href="#form3Tab2">下一步</a>
      </div>
    </div>

    <div id="form3Tab2"> 
      <a name="form3Tab2"></a>

      <div class="formField">
        <label for="userName">姓名</label>
        <input id="userName" name="user[name]" type="text" value=""/>
      </div> 

      <div class="formField">
        <label for="userAddress">住址</label>
        <input id="userAddress" name="user[address]" type="text" value=""/>
      </div> 

      <div class="formTabNagigator">
        <a href="#form3Tab1">上一步</a>
        <a href="#form3Tab3">下一步</a>
      </div>
    </div>
    
    
    <div id="form3Tab3"> 
      <a name="form3Tab3"></a>

      <div class="formField">
        <label for="userOption1">設定選項1</label>
        <select id="userOption1" name="userProfile[option1]">
          <option value="100">100</option>
          <option value="200">200</option>
        </select>

      </div> 

      <div class="formField">
        <label for="userOption2">設定選項2</label>
        <select id="userOption2" name="userProfile[option2]">
          <option value="0">ab</option>
          <option value="1">xy</option>
        </select>
      </div> 

      <div class="formTabNagigator">
        <a href="#form3Tab2">上一步</a>
      </div>
    </div>

  </div><!-- end form2Tab -->
    
  <button type="submit">填好送出</button> 

</form>

加入步驟引導列之頁籤表單外觀

結束

上述寫法在不支援或關閉 JavaScript 功能的瀏覽器上，也不妨礙使用者輸入資料。同樣也會有上一步、下一步的連結引導使用者輸入資料。

樂多舊網址: http://blog.roodo.com/rocksaying/archives/5329963.html