石頭閒語:步驟引導與頁籤結合的資料輸入表單 - 樂多日誌

樂多新文創

樂多新文創

樂多日誌

樂多朋友

<< How do you write template? XSLT, PHP or RoR? | 回blog首頁 | PHP如何取得虛擬主機名稱及瀏覽器適用的地區語文資訊 >>

2008年01月29日

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

Tags: jquery web_design ui

結合下一步、上一步， 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>
    
  <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>
    
  <button type="submit">填好送出</button>

</form>

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

結束

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

Posted by shirock at 樂多Roodo! │17:23 │回應(0) │引用(0) │JavaScript

樂多分類：學術/學習工具：編輯本文

引用URL

http://cgi.blog.roodo.com/trackback/5329963

姓名 :
Email :
URL :
回應狀態:	公開私密
驗證碼 :	( 請依顯示文字填入 ) 重新產生驗證碼
	記住我的資訊顯示我的圖像 ( 登入或申請個人圖像 )
回應內容 :