介紹

YouTube(http://www.youtube.com/)是一個非常知名的影像網站，影片瀏覽起來速度還蠻快的，也因此很多網站在想要顯示影片時，都會連到這個網站。作法上有很多種，假使我們今天希望在自己的網站放置某個YouTube影片的截圖，然後點截圖才連到YouTube網站去瀏覽影片，這個截圖的動作有沒有比較簡單的做法呢?jQuery的Plugin--jYouTube提供了很簡單就可以達到目的的方法，讓我們來看看要怎麼處理吧!

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

small : use video URL<br />
<img src='' id='img1'><br />
big   : use video ID <br />
<img src='' id='img2'>
 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jyuotube.js"></script>
<script type="text/javascript">
 
$(function(){
 
    var imgSrc = $.jYoutube('http://www.youtube.com/watch?v=hPzNl6NKAG0', 'small');
    var imgSrc2 = $.jYoutube('hPzNl6NKAG0');
 
	$('#img1').attr('src',imgSrc);
	$('#img2').attr('src',imgSrc2);
 
})
 
</script>

解說

1
2

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jyuotube.js"></script>

這兩行是載入必要的js。

jYouTube的寫法很簡單，如下：

1
2

$.jYoutube('hPzNl6NKAG0'); //指定YouTube的影片ID後回傳一個大的截圖網址
$.jYoutube('http://www.youtube.com/watch?v=hPzNl6NKAG0', 'small'); //指定YouTube的影片網址後回傳一個小的截圖網址

也就說，jYoutube會使用到兩個參數，第一個參數你可以設定為YouTube的影片ID(如:hPzNl6NKAG0)或是YouTube的影片網址(如:http://www.youtube.com/watch?v=hPzNl6NKAG0)；第二個參數則是希望顯示的截圖大小，如果保留空白則顯示較大的截圖，相對的如果輸入small則顯示小的截圖。實際顯示的效果可參照本文開頭的範例圖。

總結

jYouTube提供了很簡單就能取得YouTube影片的截圖，在需要大量引用時比用printscreen來的快速，提供給大家做個參考。

今天要講的是如何套用 Jace 所寫的 jQuery Plugin Float Messenger.js. 然後再延伸 鍵盤控制的新功能, 讓 Enter, Esc 還有 Ctrl + O 或 Shift + O 都可以聽你的話.

這是 FloatMessenger 原來的模樣:

首先我做了一個新框框, 把它 css 化, 只要掌握到下面的巢狀結構, 就可以輕易的替她換新衣服...

1
2
3
4
5
6

<div id="messenger">
    <div class="wrapper">
        <blockquote><span>MESSAGE</span></blockquote>
        <form method="post" action="">....</form>
    </div>
</div>

原本的 css 位置擺放也都已經寫好了, 稍加修改即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

#messenger {
    width: 463px;
    margin-bottom: 20px;
    background: url(bg-poll-header.gif) no-repeat 0 0;
    font-size: 12px;
    line-height:20px;
}
#messenger h2 {
    /*text-indent: -100000px;*/
    color:#ca0000;
    font-size:16px;
    padding:10px 0 0 10px;
}
#messenger .closeMessenger {
    float:right;
    padding:2px 6px;
    margin:0 8px 0 0;
    text-decoration:none;
    font-size:11px;
    color:#000;
}
#messenger .closeMessenger:hover {
    background-color:#ccc;
}
#messenger .wrapper {
    width: 463px;
    padding-bottom: 10px;
    background: url(bg-poll-footer.gif) no-repeat 0 bottom;
}
#messenger p {
    margin: 27px 10px 0 28px;
    font-size: 12px;
}
#messenger form {
    width: 458px;
    padding: 8px 0 0 5px;
    background: url(bg-poll-content.gif) repeat-y;
}
#messenger form label {
    margin-right: 10px;
}
#messenger form .btnGroup {
    margin: 10px 0 0 0;
}

變成紅白風啦啦啦啦啦 Wohoo~~

OK...一切都很順利, 不過在幾乎要完成的時候遇到了一個問題, 就是 Enter 無法使用, 這對慣用 Enter 的使用者可能會造成不便!?.. 困難點是 Float Messenger 裡面的 form submit 時, 我沒辦法讓 submit這個動作 (or Enter) 跟 '確定'按鈕同步去做同一件事, 尤其當有很多 Float Messenger 在交替使用的時候, 也沒辦法在一開始就寫死, 因為是同一個 form 的 submit() 阿....... 這個問題一度卡了我有點久, 不過昨天靈光一閃, 才發現原來其實可以很簡單..

DEMO 有 Enter 煩惱的 FloatMessenger: 點我點我

我在 FloatMessenger 多加了一個 setting.. onSubmit: function() {}

1
2
3
4
5
6
7
8
9

    $.floatMessenger({
        title: '請輸入密碼',
        message: '您輸入的 E-mail 已註冊，請輸入密碼 "111" 。',
        form: '....略',
        buttons: {
            '確定': function () { memberLoginHandler(); }
        },
        onSubmit: function () { memberLoginHandler(); return false;}
    });

然後在 FloatMessenger.js 裡加入:

1
2
3
4
5
6
7

    // 送出控制
    if (_settings.onSubmit) {
    	$('form', $html).submit(_settings.onSubmit);
    } else {
       // 這是預設, 加這行是為了防止按 enter 會直接 submit 的情形, 我不希望這樣
    	$('form', $html).submit(function(){return false}); 
    }

這樣就可以解決 Enter 的問題了, 也可以跟我想要的按鈕同步^o^... 然後既然都已經 Enter 了, 那就再來點別的吧!
我想讓 Esc 也有功能, 按了之後會 unblock! 所以我在 FloatMessenger.js 加了這個:

1
2
3
4
5
6
7

$(document).keypress(function(e){
    var key = e.charCode || e.keyCode || 0;
    if (key == 27) { // ESC
        $.unblockUI();
        return false;
    }
})

我想讓 Ctrl + 某鍵 跟 Shift + 某鍵 會有功能. 在設定檔改就可以了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$.floatMessenger({
    title: '忘記密碼',
    message: '我們將密碼以電子郵件方式送給您。)',
    form: '',
    buttons: {
        '請寄送密碼給我 (Shift + P)': function () { getPasswordBlock(); },
        '忘了這件事 (Shift + F)': function () { $.unblockUI(); },
        '回哇寶首頁 (Shift + H)': function () { location.href='http://www.wabow.com'; }
    },
    ctrlKeys: {
    },
    shiftKeys: {
        'p':80,
        'f':70,
        'h':72
    }
});

'p' 是 key
80 是 keycode
每一個鍵都有固定的 keycode, 網路上可以查得到所有的 keycode..
這3 個 shiftKeys 其實是按照 buttons 的順序去排的, 按了之後會跟 button 有同樣的功能.

DEMO 沒有 Enter 煩惱的 FLoatMessenger: 點我點我

好, 按鍵問題終於解決了, 順便跟大家分享 jQuery 遇上 big5 中文的問題.....
我在跑 ajax 的時候, 我要 用 form POST 中文字, 然後再丟到資料庫去查詢, 可是資料庫一直查不到資料...
echo 出來的值也是對的阿, 氣死我啦, 後來才發現, 很見鬼的, Big5 的字 丟到 jQuery 它會丟出 UTF8 給你.............................

所以我們要加上 iconv 轉碼的動作:

1
2
3
4
5

// 解決 jQuery 使用 UTF-8 送出資料的問題
$big5Name = iconv('utf-8','big5', $name); 
 
// 這樣才能在資料庫找得到
$sql = "SELECT * FROM table WHERE vipName = '$big5Name'";

以為這樣就沒問題了, 上線後的第三天, 許先生抗議了...
許功蓋啦 >"<

1
2

// 解決許功蓋的問題
$big5Name = addslashes($big5Name);

然後存進 SESSION 時, 記得要加 stripslashes:

1
2

// 如果不 stripslashes 會顯示 許\先生
$_SESSION['VIP_NAME'] = stripslashes($big5Name);

心得

以為半天就可以解決的事, 結果有這麼多意想不到的問題發生.... 一度很想偷懶跳過這些工, 但是幸好有堅持下去才能解決...解決後發現其實也不難嘛 ( ￣ c￣)y▂ξ (囂張貌)

得知客戶需要一套 輕量型的 所見即所得(wysiwyg)編輯器. 要求是可以快速地載入編輯器, 進行 HTML 編輯, 但也需要嚴格防止駭客輸入不當的程式碼.

因此我們挑選了 jQuery FCKEditor (註1) 以及 HTML Purifier.

HTML Purifier 是用來濾掉可疑的 XSS 程式碼, 且內容仍符合 W3C 的標準 (Standards Compliant).

註1: 曾試著裝 jWYSIWYG, 但發現許多小問題, 所以還是用回 FCKEditor

安裝與設定

1. 下載 jQuery FCKEditor 以及 HTML Purifier
2. 安裝 jQuery FCKEditor

1
2
3

<!-- head -->
<script src="jquery.js" type="text/javascript"></script>
<script src="fck.js" type="text/javascript"></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!-- body -->
<form method="post">
    <textarea id="myEditor" name="content"></textarea>  
    <div>
    <input type="submit" value="送出" />
    <div>
</form>
 
<script>
$(function () {
    $('#myEditor').fck({
        path: 'http://localhost/test/fckeditor/', // fckeditor 資料夾的位置
        config: {
            ToolbarSet: 'MyToolbarSet', // 在 fckconfig.js 中自定 ToolbarSet
            EditorAreaCSS: 'layout.css' // css 設定檔
        },
        width:  650,
        height: 200
    });
});
</script>

3. 將下列設定新增在 /fckeditor/fckconfig.js 最下方(編輯器會顯示:粗體, 斜體, 底線, 連結, 及 文字大小)

1
2
3

FCKConfig.ToolbarSets["MyToolbarSet"] = [
	['Bold','Italic','Underline','Link','Unlink','FontSize']
] ;

4. 其他 fckconfig.js 的設定

1
2
3
4
5
6
7
8
9
10

FCKConfig.DefaultFontSizeLabel = '小' ;
FCKConfig.DefaultLinkTarget = '_blank' ;
 
FCKConfig.FontSizes		= '12/小;15/中;18/大' ;
 
FCKConfig.LinkDlgHideTarget		= true ;
FCKConfig.LinkDlgHideAdvanced	= true ;
 
FCKConfig.LinkBrowser		= false ;
FCKConfig.LinkUpload		= false ;

樣式如圖:

5. 在連結的區域, 我們也不需要多餘的 "超連結類型" 跟 "通訊協定".

修改檔案: /fckeditor/editor/dialog/fck_link.html

1
2
3
4
5
6
7
8
9
10
11
12
13

@ Line 37-40
<!-- 註解掉
<option value="anchor" fckLang="DlgLnkTypeAnchor">Anchor in this page</option>
<option value="email" fckLang="DlgLnkTypeEMail">E-Mail</option>
-->
 
@ Line 51-56
<!-- 註解掉
<option value="https://">https://</option>
<option value="ftp://">ftp://</option>
<option value="news://">news://</option>
<option value="" fckLang="DlgLnkProtoOther"><other></option>
-->

到這裡 FCKEditor 的部份就算完成了.

如果有需要更動到文字敘述可以修改語言檔: /fckeditor/editor/lang/zh.js

6. 再來就是安裝 HTML Purifier. 解壓縮後找到一個叫 library 的資料夾, 把它 copy 出來, 我將它重新命名為 HTMLPurifier

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

 
require('HTMLPurifier/HTMLPurifier.auto.php');
 
// 最快的安裝方式:
$purifier = new HTMLPurifier();
$cleanContent = $purifier->purify($_POST['content']);
 
// -------------------------------------------------------------
// 如果要更改預設值, 可以照以下步驟設定:
$config = HTMLPurifier_Config::createDefault();
 
// 設定編碼, 預設是 UTF-8
$config->set('Core', 'Encoding', 'ISO-8859-1');
 
// 設定 Doctype, 預設是 XHTML Transitional
$config->set('HTML', 'Doctype', 'HTML 4.01 Transitional');
<!--
    * HTML 4.01 Strict
    * HTML 4.01 Transitional
    * XHTML 1.0 Strict
    * XHTML 1.0 Transitional
    * XHTML 1.1
-->
// 選擇允許的 HTML Tags, 除了 以下的 Tags[Attributes], 其他的一律都會被過濾掉
$config->set('HTML', 'Allowed', 'p,br,strong,em,u,span[style],a[href|target]');
$config->set('Attr', 'AllowedFrameTargets', '_blank, _self');
 
// 將 $config 帶入 object 
$purifier = new HTMLPurifier($config);
$cleanContent = $purifier->purify($_POST['content']);

到這裡就大功告成啦

使用報告

這裡有 HTMLPurifier 的 xssAttack List, 代表它已通過這些xss測試.

HTML Purifier 還有以下功能:

• 缺 closing tag 會補
• 輸入 <img src=""> 會變成 <img src="" alt="" />
• form, input, script 自動消失 (除非設定 allow)
• <p onclick="alert();">x</p> 會過濾成 <p>x</p>

其他的大家可以來 這裡 跟 這裡 試玩..

HTML Purifier 滿強大的, 應該可以再多加運用

自從用了Smarty之後，讓我完全無法脫離那種 --> 輕易控制樣板上的資料呈現方式。

偶然看到原來javascript也有樣板系統，既然有類似的樣板概念，就來試用看看吧。

javascript樣板有很多款，這次選定的是一款jQuery Plugin → 『jBind』。

使用方式：

載入 jQuery 及 jBind

<script src="js/jquery.js" type="text/javascript"></script>
 
<script src="js/jquery.jbind.js" type="text/javascript"></script>

html部份

<div style="display:none;">
<div class="content">
<!--data-->
<div class="viewBlock">
#{id}
 
<strong>{name} {family}</strong>,
 
<em>{education}</em>,
 
{history}
<!--birthdate-->
<div class="age">
{month} {date} {year}</div>
<!--birthdate-->
<!--Publications-->
<div class="role">
{book} ({year})</div>
<!--Publications--></div>
<!--data--></div>
</div>

最外層第一個div(id=template)，是我們設定的樣板樣式，最外層第二個div(id=show)，是用來輸出結果。

javascript部份

$(function(){
 
var template = $('#template').html();
var data = 	[
{
id:41,
name:'Scott',
family:'Adams',
education:'Economics',
history:"Scott Adams was born in Windham, New York in 1957 and received his Bachelor's degree in Economics from Hartwick College in 1979. He also studied economics and management for his 1986 MBA from the Haas School of Business at the University of California, Berkeley.",
birthdate: {month:'June',date:8,year:1957},
Publications: [{book:'The Dilbert Future',year:1997},{book:'The Dilbert Principle',year:1996}]
},
{
id:59,
name:'Jack',
family:'Welch',
education:'Chemical Engineering',
history:'Jack Welch was born in Peabody, Massachusetts to John, a Boston & Maine Railroad conductor, and Grace, a housewife. Welch attended Salem High School and later the University of Massachusetts Amherst, graduating in 1957 with a Bachelor of Science degree in chemical engineering. While at UMass he was a member of the Alpha chapter of the Phi Sigma Kappa fraternity.',
birthdate: {month:'November',date:19,year:1935},
Publications: [{book:'Winning',year:2005}]
}
];
var node = $(template).bindTo(data);
$(node).appendTo('#show');
 
});

樣板對應javascript資料的方式，有比較簡單的兩個大原則
1.資料根區塊，需用註解符號包起來。
2.資料內，若是陣列型態，需使用該陣列變數名稱作為註解符號，將資料包起來，例如birthdate為一陣列，則在希望加上birthdate內容的部份，頭尾補上，在區塊內，左右大括號{}內直接填birthdate的變數key值即可顯示資料。

另外還有一些比較高級的應用方式，可直接參考官網，有很詳細的sample，或是打包回家慢慢研究。

因為之前沒用過javascript的樣板系統，覺得蠻新鮮的，目前沒有專案使用這樣的方式，未來若有機會再來嘗試看看。

AJAX 技術的廣泛運用，對網際網路的發展帶來重大變革；透過更新部分頁面即可維護資料，更有效率的反應使用者動作，避免在網路上發送沒有改變的資訊所帶來的頻寬的浪費。但是這樣部分更新的做法，同時也伴隨著缺點，其中受到最多批評的就是瀏覽器後退按鈕的失效；因為 AJAX 並不會更新整個頁面，自然也就無法在瀏覽器中的歷史紀錄留下資訊。

不過這個問題，早在 google 廣泛利用 AJAX 技術的初期，就已經被他們解決囉！雖然必須針對各種瀏覽器做各自不同的處理，但是現在 jQuery 已有網海中的前輩推出簡單使用的 Plugin囉：history plugin，官網本身也是展示網頁；下面稍微介紹一下使用以及運作的流程：

首先建立簡單的 AJAX 超連結：

Ajax load<br />
<a href="#1" rel="history">load 1</a><br />
<a href="#2" rel="history">load 2</a><br />
<a href="#3" rel="history">load 3</a><br />

<hr />
Loaded html:<br />
<div id="load"></div>
<hr />

接下來載入 jQuery 以及 jquery.history：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.history.js"></script>

然後插入 JavaScript：

<script type="text/javascript">

// 「上一頁」觸發後執行的函數
function pageload(hash) {
    // 根據傳回的 hash（錨點），AJAX 置換顯示的內容
    if(hash) {
        // 重新讀取指定頁面
        $("#load").load(hash + ".html");
    } else {
        // 如果沒有回傳值，代表已經回到 AJAX 的初始狀態頁，清空顯示的內容
        $("#load").empty();
    }
}

$(function () {
    // 初始化 history plugin，並設定回傳使用的函數
    $.historyInit(pageload);

    // 設定觸發寫入歷史紀錄條件的按鈕事件
    $("a[rel='history']").click(function(){
            // 取得超連結的錨點
        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        // 點選 AJAX 頁面時，紀錄位置於瀏覽器的歷史紀錄中
        $.historyLoad(hash);
        return false;
    });
});
</script>

大致上的流程為：

1. historyInit() 初始化 history plugin，設定回傳使用的函數；根據使用的函數載入歷史頁面。對 IE 及 safari 採取不同的處理方式，並設定每隔 0.1 秒觸發 historyCheck() 函數。
2. historyCheck() 監聽使用者是否觸發瀏覽器「上一頁」按鈕，對 IE、safari 及其他瀏覽器採取不同的處理方式。觸發「上一頁」按鈕後，依照初始化時設定的回傳函數作相對應的處理。
3. historyLoad() 在觸發 AJAX 更換內容時，寫入新的歷史紀錄，對 IE、safari 及其他瀏覽器採取不同的處理方式。

針對瀏覽器提供的不同處理方式，history plugin 非常貼心的幫我們處理好了；依照官網的說明目前可以相容 IE8、FireFox 4.0、Opera9、Safari 4.0、Chrome 1.0 等多種瀏覽器。所以基本上是不用管 IE 的隱藏 iframe 紀錄，或是 Safari 那一大長串複雜到幾乎看不懂的特殊處理～非常方便！

後記：
原本想要帶入目前專案在用的 ajaxtab，但在 IE 瀏覽器中發現「上一頁」不能流暢的進行；後來才發現可能是 location.hash 與 iframe.location.hash 重複紀錄的關係。因為 IE 已經使用 iframe 進行歷史紀錄，但是 history plugin 仍會利用 location.hash 紀錄。這邊我比較不懂為什麼要紀錄二次，也許有什麼特別的用意吧？因為官網上的範例在 IE 中並沒有這樣的問題，但是 ajaxtab 就會有；如果以後整合 history plugin 的人在 IE 的使用上有問題，請參考不進行 location.hash 紀錄這樣的解決方法吧～

參考資料：

• RailsFun!! 讓Ajax可以正常支援上下頁
• pansteven 筆記 jquery -history

官方網站 / demo

CrossSlide 是一個幻燈片效果的jQuery Plugin，可以實現多種不同風格的幻燈片展示效果，包括淡入淡出，輪播，放大縮小等等。下面以三個程式碼範例來說明用法。

共同程式碼

1
2

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cross-slide.js"></script>

此兩行為載入必要的js檔。

程式碼1--上下滑動效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript">
 
$(document).ready(function(){
          $('#test1').crossSlide({
          speed: 45,
          fade: 1
          }, [
          { src: '1.jpg', dir: 'up'   },
          { src: '2.jpg',   dir: 'down' }
          ]);
});
</script>
<style type="text/css">
  #test1 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 500px;
    height: 200px;
  }
</style>
<H3>SAMPLE1</H3>
<div id="test1">Loading…</div>

src:代表要使用的圖檔，dir: 'up'則表示往上滑動後變換下一張圖，相對的dir: 'down'即表示向下滑動後變換下一張圖。

程式碼2--淡入淡出效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript">
 
$(document).ready(function(){
          $('#test2').crossSlide({
          sleep: 2,
          fade: 1
          }, [
          { src: '1.jpg' },
          { src: '2.jpg'   }
          ]);
});
</script>
<style type="text/css">
  #test2 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 500px;
    height: 200px;
  }
</style>
<H3>SAMPLE2</H3>
<div id="test2">Loading…</div>

如果在src:後不指定任何動作則呈現淡入淡出的效果。

程式碼3--放大縮小效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<script type="text/javascript">
 
$(document).ready(function(){
          $('#test3').crossSlide({
          fade: 1
          }, [
          {
          src:  '1.jpg',
          href: 'http://flickr.com/photos/spacetrucker/94209642/',
          from: '100% 80% 1x',
          to:   '100% 0% 1.7x',
          time: 3
          }, {
          src:  '2.jpg',
          href: 'http://flickr.com/photos/hichako/1125341449/',
          from: 'top left',
          to:   'bottom right 1.5x',
          time: 2
          }, {
          src:  '1.jpg',
          href: 'http://flickr.com/photos/spacetrucker/94209642/',
          from: '100% 80% 1.5x',
          to:   '80% 0% 1.1x',
          time: 2
          }, {
          src:  '2.jpg',
          href: 'http://flickr.com/photos/hichako/1125341449/',
          from: '100% 50%',
          to:   '30% 50% 1.5x',
          time: 2
          }
          ]);
});
</script>
<style type="text/css">
  #test3 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 500px;
    height: 200px;
  }
</style>
<H3>SAMPLE3</H3>
<div id="test3">Loading…</div>

這段程式主要呈現放大縮小的效果，src:一樣是要使用的圖檔；href:為點下圖片要連到的位置；from:及to:為一組的設定，表示我們希望這張圖打算從from變換成to後再換下一張圖；time:表示每一個圖片動作持續的秒數。

總結

幻燈片效果經常使用在如商品展示或是廣告等等，CrossSlide提供很簡單的語法便能做到以前必須使用flash才能做到的效果。網路上可以找到很多種幻燈片效果的jQuery Plugin，CrossSlide是我覺得用起簡單又效果不錯的一種，不妨試看看!

原始網站：Magnify, a jQuery plugin

購物網站中一定會出現商品的陳列與展示；當使用者瀏覽網站時，除了參考圖片愈多愈好，能顯示商品細節的大型圖片更是不可或缺的存在。但如果只是另開視窗，或是用之前曾經介紹過的 LightBox 燈箱特效；在現在這個五光十色，特效滿天飛的各種網站中，似乎顯得有些普通，不太能吸引使用者的注意～這個時候，如果能夠有類似「放大鏡」特效的商品圖片縮放，相信一定更能吸引使用者的目光；茫茫網海上的前輩聽到大家的需求啦，這時候就要用 Magnify囉！

首先建立簡單的圖片連結：

<table>
  <tr>
    <td colspan="3" style="background-color: #FFFFCC; "><h2>magnify</h2></td>
  </tr>
  <tr>
    <td><a href="images/mustang.jpg" id="d1"><img src="images/mustang_small.jpg" 

alt="mustang" border="0"  /></a></td>
    <td width="50"></td>
    <td><a href="images/triumph.jpg" id="d2"><img src="images/triumph_small.jpg" 

alt="triumph" border="0" align="center" /></a></td>
  </tr>
</table>

接下來載入 jQuery 以及 Magnify：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.magnify-1.0.2.js"></script>

然後插入 JavaScript：

<script type="text/javascript">
$(function () {

    $("#d1").magnify();
    $("#d2").magnify({
        showEvent: 'click',
        hideEvent: 'click',
        lensWidth: 60,
        lensHeight: 60,
        preload: false,
        stagePlacement: 'left',
        loadingImage: 'images/ajax-loader.gif',
        lensCss: {
            backgroundColor: '#cc0000',
            border: '0px',
            opacity: 0.5
        },
        stageCss: { border: '4px solid #33cc33' }

    });
});
</script>

呈現的效果就如同頁首所顯示，非常輕鬆簡單。在看到這個 Plugin 後，我突然想到幾個月前 Suzy 提到的 Apple Store，其中商品圖縮放的功能，與 Magnify 非常類似；當初 Jace 還曾經把它加入作業中說（囧）...總之我試著更改 Magnify 的部分原始碼，結果弄出來一個有點類似的感覺的 Plugin～無奈功力不夠，對於縮放時的數學運算部分完全沒有頭緒；索性就用淡入淡出的方式偷懶帶過（噗）...命名為「magnify_kai」（Magnify˙改...因為不是原創所以就沒有用「wa」開頭囉^^|||）

首先建立簡單的圖片連結：

<table>
  <tr>
    <td colspan="3" style="background-color: #FFFFCC; "><h2>magnify_kai</h2></td>
  </tr>
  <tr>
    <td><a href="images/mustang.jpg" class="magnify_kai"><img 

src="images/mustang_small.jpg" alt="mustang" border="0"  /></a></td>
    <td width="50"></td>
    <td><a href="images/triumph.jpg" class="magnify_kai"><img 

src="images/triumph_small.jpg" alt="triumph" border="0" align="center" /></a></td>
  </tr>
<table>

接下來載入 jQuery 以及 Magnify_kai：

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="magnify_kai.js"></script>

然後插入 JavaScript：

<script type="text/javascript">
$(function () {

    $('.magnify_kai').fadeZoom({
        preload: false,
        loadingImage: 'images/ajax-loader.gif'
    });
});
</script>

呈現的效果如下：

範例程式下載

而因為信用卡的欄位就那幾個，格式也都一模一樣，所以懶惰的我就想寫一個 jQuery Plugin，方便以後使用囉。就先叫 WaCard.js 好了 .....（初版，因為並沒有做後三碼驗證，也沒有卡片持有人欄位）
提醒：目前僅在 firefox 上測試過！

功能：

• 自訂欄位名稱
• 檢查未填欄位
• 輸入卡號滿四碼跳下一欄位
• 檢查卡號
• 檢查卡片截止日期
• [懶人專用] 信用卡類別選單自動生成 - 可自訂信用卡類別 （內建 Visa，Master，JCB，AmEx etc.. 共13種，預設只顯示台灣常用的三種）
• [懶人專用] 信用卡截止日期選單自動生成 - 列出未來十年的年份選單
• 自訂錯誤函式 - 預設是跳出 alert()，可以自由運用如何處理錯誤訊息（eg BlockUI etc..）。
• 自訂檢查通過後函式 - 預設是跳出確認對話框後送出，可客製化處理（eg ajaxSubmit etc..）。

安裝步驟：

1. 所需檔案：

2. 指定要執行 WaCard 的表單

3. 表單HTML

註：上面所說的懶人作法是指藍色的部份，WaCard 會判斷若該選單是空的，才加入預設的值。不過用了以後，在 JavaScript Disabled 的情況下這個 form 就不是 XHTML Valid 的囉，而且關了 JavaScript 這個 form 就不能正常跑了。

DEMO 點我 點我看結果～

接下來，我們可以自訂錯誤訊息 跟 檢查通過後的處理，下面的程式碼結合了另外兩個 jQuery Plugins - BlockUI & AjaxSubmit ：

DEMO 點我 點我看結果～

大概就是這樣，有需要的人可以下載玩玩看囉。

信用卡號測式樣本

注意事項：

1. 透過網路輸入信用卡資料一定要加密（SSL）。
2. 信用卡若有需要存入資料庫，也一定要先加密後才可存入。
3. 可靠的線上刷卡方式仍是建議透過 銀行 或 第三方刷卡網站代為處理。

參考資料:

Sample Valid Credit Card Numbers
jQuery Validate Credit Card Extension
BNQ 的 creditcard.js

這是Flash製作的選單

當然不是，是Flash製作的話，就沒什麼好介紹的了，網頁上，常看到花樣多變的選單，幾乎都是用Flash製作的，不過這款LavaLamp plugin，卻可以製作出簡易的滑動選單效果，看到官網範例還真的覺得有Flash的fu，javascript真神奇~

載入 jQuery 及 LavaLamp

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.lavalamp.js"></script>
<script type="text/javascript" src="path/to/jquery.easing.js"></script>

html部份

<ul class="lavaLamp">
	<li><a href="#">Home</a></li>
	<li><a href="#">Plant a tree</a></li>
	<li><a href="#">Travel</a></li>
	<li><a href="#">Ride an elephant</a></li>
</ul>

css部份

/* Styles for the entire LavaLamp menu */
.lavaLamp {
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Force the list to flow horizontally */
.lavaLamp li {
float: left;
list-style: none;
}
/* Represents the background of the highlighted menu-item. */
.lavaLamp li.back {
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left {
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Styles for each menu-item. */
.lavaLamp li a {
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}

最後加入

$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});

Flash在介面的自由度還是高很多，可以很天馬行空的設計，不過能多找到幾個類似這樣的plugin來用，個人已經很滿足了

官方網站 / demo
http://batiste.dosimple.ch/blog/posts/2007-09-11-1/rich-text-editor-jquery.html

Lightweight RTE是一套標榜檔案輕量化的所見即所得的文字編輯器(Rich Text Editors簡稱RTE)，載入方式為jQuery Plugin。Lightweight RTE有以下幾個特點:

Super lightweight 7kb uncompressed (超輕量的檔案大小僅僅7kb)
Compatible with major browsers (適用於主流瀏覽器)(官網寫適用於IE6, Firefox 2, Opera 9, Safari 3.03不過我用IE7也是正常運作)
Degrade gracefully (簡潔)
GNU General Public License (符合公共通用授權)

現在就讓我們看一下要怎麼使用吧!

程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-ch" lang="fr-ch">
<head>
<title>A light weight RTE jQuery Plugin</title>
<link type="text/css" rel="stylesheet" href="rte.css" />
</head>
<body>
<form>
<p>
    <textarea name="description" id="id_description" 
    class="rte-zone"></textarea>
</p>
<input type="submit" />
</form>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.rte.js"></script>
<script type="text/javascript">
    $('.rte-zone').rte("css url", "toolbox images url");
</script>
 
</body>
</html>

程式碼解說

jQuery-Plugin部份主要是載入jquery.rte.js這隻檔案，而jQuery的程式碼為$('.rte-zone').rte("css url", "toolbox images url");這行。工具列上的小圖示只要檔名一樣可以自行更換自己喜歡的圖案。

功能解說

Lightweight RTE的工具列上提供了以下功能:

預設字型樣式 : Block Style / Paragraph / Title / Address
粗體
斜體
項目
超連結
圖片 : 輸入圖片網址
純文字編輯模式 / 所見即所得模式 切換

總結

雖然Lightweight RTE與其他的RTE比較起來功能稍顯陽春，但在ㄧ些需求不高的時候不失為一種更方便簡單的方案，檔案輕量更是其特點。不妨試用看看!

在製作客戶需求的表單時，常會遇到上傳圖片的需求，因為要在同一頁編輯資料，通常會採取另開視窗，完成上傳動作後，再回到原本編輯頁面，繼續完成編輯，而拜ajax所賜，上傳檔案可以更加便利了。  (其實是這次期交所郵件附加檔案要用的)

ajaxFileUpload是一個jQuery Plugin，套用上也是相當簡便，只需特別設定處理上傳檔案的後端程式即可

直接來看用法吧~

1. 載入jQuery和ajaxFileUpload

<script src="jquery.js" type="text/javascript"></script>
<script src="ajaxFileUpload.js" type="text/javascript"></script>

2.綁定某個你想要執行ajax上傳檔案功能的按鈕,以及設定ajaxFileUpload上傳

 
$(function(){
 
$.ajaxFileUpload
        (
            {
                url:'doajaxfileupload.php', ,
                fileElementId:'fileToUpload',
                success: function ()
                {     
                      alert('上傳成功');           
                }
            }
        )
 
        return false;
 
}  
 
 
})

3.html碼

<input id="fileToUpload" type="file" />
<input id="uploadButton" type="button" value="上傳" />

4.後端處理PHP (範例為doajaxfileupload.php)

<php
copy($_FILES['fileToUpload'],$targetFile);
?>

以上就完成了簡易的ajax上傳檔案設定，功能上可自行再增加，如圖片大小的判斷，上傳過程中的畫面顯示等等。

Mac 外觀:

Live 外觀:

(剛剛打的因為電腦當機變成一片空白 >"<)

它是用 jQuery 開發, 核心檔僅有 6.5Kb 的小玩意兒.

為什麼說它是小玩意~因為它的功能並不如 TinyMCE or FCKeditor 般強大, 它的特別在於它不是普通的 HTML 編輯器, 它能夠把代碼轉換成 HTML.

目前它支援的代碼有: Html, Textile, Wiki Syntax, Markdown, BBcode.
支援的編輯功能也僅有: H1-H6, UL OL, URL, 粗體 跟 斜體
還有 Ajax 預覽功能

它可以支援其他的 jQuery Plugins:
(紅色框框裡的就是用了 jQuery plugins 的 Farbtastic, SimpleModel, 還有 jQuery UI)

它還可以自訂代碼, 因此我把程式包下載後小小改了一番:

1. 在 set.js 檔裡很輕易地把五個 plurk 支援的代碼套入到此編輯器中

路徑: markitup/sets/plurk/set.js

2. 在 style.css 檔裡管理 Toolbar 上的 icon

路徑: markitup/sets/plurk/style.css

3. 同時我只換了 css 檔就可以把外觀換成 Mac Style (當然還有包在css裡的圖)

路徑: markitup/index.html

還滿簡單的. 做了一個 Plurk 的代碼編輯器 測試結果在此

優點:

速度快, 不佔空間, 俱有擴充潛力: 可以結合其他的 jQuery Plugins (作者有實作如何套用 jQuery的 color picker, dialogue).

簡單易改, 可以輕易的改成自己想要的代碼編輯器.

美中不足:

還太陽春了

一個平凡的表格，能賦予怎樣的功能？

記得很久之前，古老記憶中，jace說可以試試看幫比一比擴充一下功能，就是可以自由新增table的欄位，利用這次順便練習jQuery自製plugin，既然是從哇寶誕生的，名稱里所當然就是wa開頭，跟table有關，那就叫做waTable吧！(好草率的命名，要是孩子剛出生要命名的時候，看到了窗外鳥正在大便.......)，好，名稱只是個浮名，也不用太追究了。

卡關部份：
1.首先希望能夠上下左右都能隨意新增，所以新增的按鈕要設在哪呢？就直接出現在table的四面八方吧，而且按鈕大小要隨著table變寬變高而隨時調整。
2.一個普通的表格，沒任何rowspan或是colspan的話，難易度大概是0，如果和(ㄏㄨㄛˋ)上了rowspan和colspan這兩個元素，難度真的是大大提昇，而且上下左右新增的方式，不太有對稱的觀念，就是"往右新增"和"往左新增"，程式基本上是沒辦法複製過來改個函式名稱就打完收工。

大致攻略：
整個概念就是先利用一個div將原本table包住，然後將該table的margin-left、margin-right等等，一些定位的CSS屬性全部移轉到div上，接著創造四個浮動div按鈕，設定好寬度高度，擺放到table的上下左右，在div上使用jQuery的hover方法，讓按鈕可出現隱藏，這樣就完成了基本架構。 剩下的就是大工程了，往上下左右新增，以及當遇到rowspan、colspan要如何計算等等，目前尚在開發中，所以還需要測試更多的表格組合，找出bug，預設值是左右新增遇到colspan的話，會將該欄位直接延伸，上下遇到rowspan一樣是延伸，以後會陸陸續續將設定參數加入plugin，讓使用者能更加活用。

使用方式：

載入 jQuery 及 watable

<script src="jquery.js" type="text/javascript"></script>
 
<script src="watable.js" type="text/javascript"></script>

html 格式

<table border="0">
<tbody>
<tr>
<td rowspan="2">1111</td>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td>1111</td>
<td>1111</td>
<td>1111</td>
</tr>
<tr>
<td colspan="2">1111</td>
<td>1111</td>
<td>1111</td>
</tr>
</tbody></table>

最後加入

$(function(){
	$('table').waTable();
});

呈現效果：

關於這類的plugin，其實我不知道是不是已經有人寫出來了，如果有的話，就當作練習jQuery的plugin寫法，沒有的話，更應該好好將完成度提昇，像是原本表格中，有填寫的欄位，而且帶有id或是name，需要被送到後台程式做處理，那新增的欄位中，該如何將這些欄位加進去等等，未來陸續還有很多可增加的功能，按鈕外觀設計，以及bug修正，也希望這個小服務能有更多應用的地方？！

巴雞絲啼之 檔案總管移植網頁手術！

記得有陣子一直在研究，如何寫出網頁版的檔案總管，在偶然間逛到這個plugin，試用之後發現很簡便，windows系統測試正常，雖然demo中只能展開資料夾，點擊檔案只會彈出該檔案路徑，我相信只要能結合其他的plugin，例如lightbox2等，更能讓這套plugin更多采多姿，很可惜的中文部份呈現亂碼，不過使用上仍然正常，可謂是殘而不廢，精神可嘉。

使用方式：
1.先下載官網最新版的jqueryFileTree以及jquery easing

2.壓縮檔內附jqueryFileTree.js、jqueryFileTree.css、images(資料夾)、connectors(資料夾)

3.請在connectors找出連結系統程式，在這邊使用的是jqueryFileTree.php，將該檔案copy出來，放在跟jqueryFileTree.js同路徑下
(路徑可自行變換，記得更改設置.fileTree裡面的script屬性)

4.將檔案放置於可執行php環境內，即完成基本安裝

以下是網頁設置

載入 jQuery 、 jqueryFileTree 等

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="jqueryFileTree.js" type="text/javascript"></script>
<link href="jqueryFileTree.css" rel="stylesheet" type="text/css" media="screen" />

html部份：

最後加入

$(function(){
	$('#filetree').fileTree({ root: '/', script: 'jqueryFileTree.php' }, function(file) {
		alert(file);
	});
})

成果：

我們可以看到，雖然左心室有部份剝離狀態，但是俗話說，好死不如歹活，將就點用也不錯，而且我相信在未來的日子裡，當技術越加成熟，手術會更加簡便，成功率也會隨機大幅提昇，今天手術就到此結束，謝謝大家 (鞠)

本周 Jace 舉辦了  jQuery Plugins 星光大道 活動，每個人分享三個  jQuery Plugin ，經過展示及說明後由彼此互相評分。大家都玩的不亦樂乎，不但出現了六分的破表分數，也有被噓到沒分數的 Plugin 。

整個活動進行的過程讓大家更了解 jQuery 許多好玩有趣的 Plugins，同時也激發出更多的想像、創意及應用。即使活動結束後仍然討論的不亦樂乎，相信透過分享能讓大家在技術領域能有更深層、更不受限制的揮灑空間。

這是一款很特殊的變換內容plugin，當使用者按下連結，設定的內容會以scroll方式，變換到所選定內容，目前我想到的應用部份，像是lativ、luka有大好評分享、品牌日誌等，純文章分享的內容，若是用這樣的文章換頁效果，應該會讓使用者覺得蠻有趣的

使用方式：

載入 jQuery 及 localscroll

<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
 
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>

html 格式

<!--選單部份-->
<ul>
	<li class="sup">
		<a href="#section1">饕客頭推</a>
<ul>
	<li><a href="#section1b">雞排飯</a></li>
	<li><a href="#section1c">剝殼蝦</a></li>
</ul>
</li>
	<li class="sup">
		<a href="#section2">季節景點</a>
<ul>
	<li><a href="#section2b">水晶纜車</a></li>
	<li><a href="#section2c">台灣街</a></li>
</ul>
</li>
	<li class="sup">
		<a href="#section3">體育重點</a>
<ul>
	<li><a href="#section3b">棒球</a></li>
	<li><a href="#section3c">高爾夫球</a></li>
</ul>
</li>
</ul>
<!--文章內容-->
<div>
<div class="section">
<ul>
	<li class="sub">(圖文內容)</li>
</ul>
</div>
．
	．
	．
	(自行增加)
	．
	．</div>

最後加入

$(function(){
	$.localScroll.defaults.axis = 'xy';
	$.localScroll.hash({
		target: '#content', // Could be a selector or a jQuery object too.
		queue:true,
		duration:1500
	});
 
	$.localScroll({
		target: '#content', // could be a selector or a jQuery object too.
		queue:true,
		duration:1000,
		hash:true,
		onBefore:function( e, anchor, $target ){
			// The 'this' is the settings object, can be modified
		},
		onAfter:function( anchor, settings ){
			// The 'this' contains the scrolled element (#content)
		}
	});
});

呈現效果：

客戶常會要求在後台要顯示某些數據資料，例如一個月內退貨率高達N%的商品列表，或是指定區間內哪些商品超熱賣，而每當遇到這些"商品列表，就要套用樣板，將欄位、數值設定好，而這款dataTables，正能滿足快速製造小列表，此列表產出出來的同時就擁有了分頁、搜尋、排序的功能，相當方便，算是麻雀雖小，五臟俱全

使用方式：

載入 jQuery 及 dataTables

<script src="js/jquery.js" type="text/javascript"></script>
 
<script src="js/dataTables.js" type="text/javascript"></script>

html 格式

<table id="example" class="display" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>商品編號</th>
<th>商品名稱</th>
<th>分類</th>
<th>顏色</th>
<th>售價</th>
</tr>
</thead>
<tbody>
<tr>
<td>ZA00102</td>
<td>創意筆捲行李牌-藍色</td>
<td>旅行小物</td>
<td>blue</td>
<td class="center">280</td>
</tr>
<tr>
<td>ZA00103</td>
<td>創意筆捲行李牌-黃色</td>
<td>旅行小物</td>
<td class="center">yellow</td>
<td class="center">280</td>
</tr>
．
		．
		．
		(可無限增加商品)
		．
		．
		．</tbody></table>

最後加入

$(document).ready(function() {
	$('#example').dataTable( {
		"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
			nRow.className = nRow.className + aData[4];
			return nRow;
		},
		"aoData": [
			null,
			null,
			{ "bVisible": false, "bSearchable": false },
			{ "sClass": "center" },
			{ "sClass": "center" }
		]
	} );
} );

呈現效果：

簡單來說 FlexBox 就是：文字欄位(textfield) 加 下拉選單(dropdown) 的組合。

有時候我們需要“下拉選單”列出所有的選項，但也同時需要 "文字欄位" 保持隨時能新增選項的靈活度。

其實 Autocomplete 已經可以做到大部份的功能。

不過 FlexBox 比較特別之處是它可以在下拉選單設定動態的頁數(可彈性處理大量的搜尋結果)
另一個好處是 它會模擬 <select> tag 以 JSON 方式傳回 option value 的值！

這個用法剛好可以套用在專案 Fevo Map 的後台：產品頁面 - 輸入品牌的地方。
因為我們希望資料庫的 品牌欄位 是存 品牌id，但另一方面也希望使用者在同一頁就可以新增品牌。

這是原本的做法

有了 FlexBox 就可以把兩個欄位組合起來了 Y(≧▽≦)Y

使用方法

載入 CSS + jQuery 及 相關程式

<script type="text/javascript" src="js/jquery.js" />
<script type="text/javascript" src="js/flexbox.js" />
<link type="text/css" rel="stylesheet" href="css/flexbox.css" />

再來是 html 格式

<div id="fb"></div>

最後

$(document).ready(function() {
        $('#fb').flexbox('results.php');
 });

results.php 以 JSON 格式輸出

 {"results":[
 {"id":1,"name":"Louis Vuitton "},
 {"id":2,"name":"Burberry"} ,
 {"id":3,"name":"拉拉"}
 ]}

現在很多網站，首頁常喜歡加上跑馬燈，在小小的空間內，卻可以顯示無數的圖片或是文字，不論是他家廠牌廣告、自家商品展示也由於動感的表現，比起死板板的文字，更能引起使用者的目光，目前訪間有很多種的跑馬燈plugin挑了一款還不錯方便，可設定自動開始瀏覽，或是加上按鈕，由使用者手動click變換 (下載回來後，在setting上加過自設action，讓按鈕變成mouseover動作，感覺上有些怪怪的，例：圖一次跑兩張＠＠，所以還是用原設定click吧)

使用方式：

載入 jQuery 及 stepCarousel

<script src="js/jquery.js" type="text/javascript"></script>
 
<script src="js/stepcarousel.js" type="text/javascript"></script>

 html 格式

<div class="stepcarousel">
<div class="belt">
<div class="panel"><img src="1.jpg" alt="" /></div>
<div class="panel"><img src="2.jpg" alt="" /></div>
<div class="panel"><img src="3.jpg" alt="" /></div>
<div class="panel"><img src="4.jpg" alt="" /></div>
<div class="panel"><img src="5.jpg" alt="" /></div>
</div>
</div>

最後加入

$(function(){
	stepcarousel.setup({
		galleryid: 'mygallery',
		beltclass: 'belt', s
		panelclass: 'panel',
		autostep: {enable:true, moveby:1, pause:3000},
		panelbehavior: {speed:500, wraparound:false, persist:true},
		defaultbuttons: {enable: false, action: 'click', moveby: 1, leftnav: ['leftnav.gif', -5, 80], rightnav: ['rightnav.gif', -20, 80]},
		statusvars: ['statusA', 'statusB', 'statusC'],
		contenttype: ['inline']
	})
})

呈現效果：(下面圖會自動一直輪撥)

• 作者：iHwy, Inc.
• 官網：http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx
• 展示：http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx

ListNav 是一個抓出所有列表項目重新排序(註1)，再按照數字 0-9、字母 A-Z 排列的 jQuery Plugin。中文網站或許比較沒有用字母排列的需求，但是英文網站十分常用，像 FAQ 或是一些專業術語的頁面都是使用字母排列供使用者尋找的（PHP 寫法的 Glossary）。
雖然我們中文沒有那麼常用到，但是我想還是有機會的，一些外來品牌的產品系列名稱、序號都有可能會以列表的方式呈現。對於大量的資料（圖書館系統、字典系統），我認為 ListNav 也會滿有用的；再者它外觀也很乾淨清爽，所以決定選擇它介紹給大家。

特色

1. unobtrusive XD (這個字真的很常見到)
2. 對於大量的資料有信心（已調校過 performance)
3. 可用 cookie 儲存特定字母，不會永遠都是“A”
4. 可用 css 自訂風格
5. 滑鼠 hover 字母上頭會顯示項目的數量
6. ul ol 都適用

來看看 demo 可能更一目瞭然

使用方法：

載入 CSS + jQuery 及 相關程式

<!-- 這是原版css可再自行修改 -->
<link rel="stylesheet" href="css/listnav.css" type="text/css" media="screen" />

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script><!-- Optional -->
<script src="js/listnav.js" type="text/javascript"></script>

再來是 html 格式，這邊要注意的是命名方式，如 id 取名叫 demo，那麼它的選單必須叫 demo-nav。

<div id="demo-nav"></div>

<ul id="demo">
<li><a href="#">AMCOS</a></li>
<li><a href="#">APRA</a></li>
<li><a href="#">Author</a></li>
<li><a href="#">Assignment</a></li>
<li><a href="#">Copyright</a></li>
<li><a href="#">Dubbing</a></li>
<li><a href="#">Publisher</a></li>
<li><a href="#">PPNZ</a></li>
<li><a href="#">Production Music Libraries</a></li>
</ul>

$(document).ready(function() {
	 $('#demo').listnav();
}

註1：目前不太確定的是從它的 demo 看不出每一個 LI 可以塞多少東西，因為都只有短短的字+連結。還有若我亂數排不知道它會不會自動按照順序？之後會再補上這兩項測試結果。:)