Zebra_TransForm 表單美化套件

Zebra_TransForm 使用 jQuery 框架美化網頁選單的選擇框、單選按紐和複選按鈕，以達到跟外觀和感覺他是一個跨瀏覽器的操作，或者讓使用者感覺不是是在網頁而是在使用應用程式的感覺。Zebra_TransForm 是一個很小的 jQuery 套件(壓縮後僅 3 KB)，在不犧牲功能和輔助的功能下改變表單元素的外觀設計，可在大部分現代瀏覽器中瀏覽。

使用方法：
第一步 載入 Zebra_TransForm 需要使用到的 JavaScript 和 CSS 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Zebra_TransForm 的主程式碼-->
<script type="text/javascript" src="path/to/zebra_transform.js"></script>
<!-- Zebra_TransForm  的 CSS 樣式檔-->
<link rel="stylesheet" href="path/to/zebra_transform.css" type="text/css">

第二步 設計 HTML 表單元素
<div class="main-wrapper">
<form>
    <h2>Checkboxes<span>First item is both disabled and checked</span></h2>
    <input type="checkbox" name="checkbox[]" value="1" id="checkbox_1" checked="checked" disabled="disabled">
    <label for="checkbox_1">Checkbox 1</label>
    <br>
    <input type="checkbox" name="checkbox[]" value="2" id="checkbox_2">
    <label for="checkbox_2">Checkbox 2</label>
    <br>
    <input type="checkbox" name="checkbox[]" value="3" id="checkbox_3">
    <label for="checkbox_3">Checkbox 3</label>
    <h2>Radio buttons<span>First item is disabled</span></h2>
    <input type="radio" name="radio" value="1" id="radio_1" disabled="disabled">
    <label for="radio_1">Radio button 1</label>
    <br>
    <input type="radio" name="radio" value="2" id="radio_2">
    <label for="radio_2">Radio button 2</label>
    <br>
    <input type="radio" name="radio" value="3" id="radio_3">
    <label for="radio_3">Radio button 3</label>
    <h2>Select box<span>Padding works in IE7!</span></h2>
    <select style="padding: 4px">
        <option value="">- Select -</option>
        <option value="1">Select option 1</option>
        <option value="2">Select option 2</option>
        <option value="3">Select option 3</option>
    </select>
    <p><br></p>
    </form>
</div>

第三步 撰寫 JavaScript 的程式碼片段
$(function() {
    var transform = new $.Zebra_TransForm();
    $.Zebra_TransForm();
    // 多選框
    $.Zebra_TransForm($('input[type="checkbox"]'));
    // 單選框和多選框
    $.Zebra_TransForm($('input[type="checkbox"], input[type="radio"]'));
    // 單選框和多選框還有選擇框
    $.Zebra_TransForm($('input[type="checkbox"], input[type="radio"], select'));
    $.Zebra_TransForm($('#element input[type="checkbox"]'));
    $.Zebra_TransForm($('#element'));
    var transform = new $.Zebra_TransForm();
    transform.update();
});

作者網站：http://stefangabos.ro/jquery/
檔案大小：55.8 KB (包含範例)
檔案下載：http://stefangabos.ro/wp-content/uploads/jquery/zebra_transform.2.3.zip
檔案備份：下載