在Wamp Server上安裝Perl

在windows xp上安裝apache服務有很多種套件可以使用，而我是使用Wamp Server
感覺還不錯用，而且有親切的中文介面(其實是英文笨蛋一個)，需要的可以至官網下載
下載位置：www.wampserver.com
安裝的步驟網路上已有許多教學文章，這裡就不再贅述了‧

接下來直接進入主題：在Wamp Server上安裝Perl
因為最近碰到perl寫的服務，看了很久還是不是很懂，它的語法實在是太簡潔了
真不知道是該說原創者太厲害還是太懶惰(其實是自己沒慧根..Orz)
於是就想說能不能找個地方來測試一下，之前Jim大就曾經提供一個套件，安裝了之後就可以在xp上執行，於是就下定決心來安裝一下
下載位置：www.activestate.com
其實官網還有其他東西，有興趣的人可以參考一下
安裝的步驟很簡單，就是下一步下一步，最後一個步驟要花一些時間，耐心等候一下
安裝的目錄預設在c:\perl，在安裝過程中可以自行修改
不過我想Perl是可以當作網頁來執行的，於是就想說能不能結合Wamp在local端執行
剛好網路上有一位不認識的大大有寫設定過程，不過是英文的所以花了一些時間拜讀
這裡我就用親切的中文來說明唄~喜歡看英文的朋友還是可以去看
原文網址：http://www.chromicdesign.com/2009/05/setting-up-perl-for-wampp.html

Step1:
這裡就是安裝Wamp Server，所以不再說明啦!!
Step2:
下載安裝ActivePerl，請往上看^^"
Step3:
從這裡開始很重要，因為要編輯apache的httpd.conf。不會使用右下角系統列的朋友可以從C:\wamp\bin\apache\apache2.x\conf進入‧
1.打開httpd.conf，找到“”往下幾行會找到一行的描述是：Options Indexes FollowSymLinks，我們在後面加入Includes ExecCGI，看起來會變成 Options Indexes FollowSymLinks Includes ExecCGI 2.開啟CGI script，找到“AddHandler cgi-script .cgi”，預設是註解掉的，把#刪除，並再下面加上一行“AddHandler cgi-script .pl” AddHandler cgi-script .cgi AddHandler cgi-script .pl 3.找到“DirectoryIndex index.php index.php3 index.html index.htm“，並在後面加上“index.cgi and index.pl” DirectoryIndex index.php index.php3 index.html index.htm index.cgi index.pl 做完上面這三項之後，你的apache已經可以跑Perl了
Step4:
你可能需要透過Perl使用Mysql，如果需要的話，你要下載驅動程式來安裝‧
1.開啟command，切換到c:\perl\bin，然後輸入“ppm repo add uwinnipeg”按下Enter，系統會自動下載驅動程式
2.下載完成後，輸入“ppm install DBD-mysql”來安裝驅動程式

做完上面三個步驟，就可以在command和web上執行Perl囉~

jQuery - colorbox

最近公司的案子又需要用到lightbox的效果
因為之前用的在IE6上的效果都不好，所以又找了另一個不錯用的套件 - ColorBox
這個是Jim大找到的，我覺得還不錯用
官網左側有五個範例連結，各有不同的開啟效果，可以參考看看想用哪一種
以下來簡略說一下使用方法：
首先當然是先把它掛進來 <script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script> <!-- 別忘了他專有的css --> <link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" /> 另外他也有提供外框圖檔，如果要改變位置時記得要同步修改css檔
再來是javascript的部份，以下僅舉兩例： $(document).ready(function(){ $("a[rel='example1']").colorbox(); //a tag $(".iframe").colorbox({width:"80%", height:"80%", iframe:true});//使用iframe開啟 }); 最後是HTML的部份 <a href="../content/ohoopee1.jpg" rel="example1" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a> <a class='iframe' href="http://google.com">Outside webpage (IFrame)</a> 在實測過程中發現用IE6開啟iframe時，第一次會無法顯示透明底色，要滾動一下scrollbar才會顯示
於是Jim大網路搜尋了一下，剛好有人也發現這個問題，並且找到了修正方式(好心人啊~)
修正方式要直接修改它的jQuery程式，以下是修正方式： if (!open) { open = TRUE; $.event.trigger(cbox_open); $close.html(settings.close); $overlay.css({"opacity": settings.opacity}).show(); cboxPublic.position(setSize(settings.initialWidth, 'x'), setSize(settings.initialHeight, 'y'), 0); if (isIE6) { $window.bind(cbox_ie6, function () { $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()}); }).trigger(cbox_ie6); } } //修改成下面 if (!open) { open = TRUE; $.event.trigger(cbox_open); $close.html(settings.close); $overlay.css({"opacity": settings.opacity}).show(); cboxPublic.position(setSize(settings.initialWidth, 'x'), setSize(settings.initialHeight, 'y'), 0); if (isIE6) { $window.bind(cbox_ie6, function () { $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()}); }).trigger('scroll.cboxie6'); } } 其實主要是修改trigger的部份
修改過後在IE6上使用感覺真讚^^"

由於客戶的需求，希望在開啟box時要隱藏scrollbar
所以上網搜尋了一下資料，果然也有人需要此效果
在此也放上解決方式，而且IE6也可以使用喔
$().bind('cbox_open', function(){ $('html').css({overflow:'hidden' }); }).bind('cbox_closed', function(){ $('html').css({overflow:'auto'}); });

jQuery - cascade多重關聯式選單

最常用到的就是地址，通常地址包括了縣市、鄉鎮，所以會有兩個關聯式的下拉式選單
其實本來是要自己寫javascript，但是因為配合的PHP & Smarty，還真是給他不好處理
所以決定上網找一個jQuery來使用，於是找到了這個相關資料，趕快來記錄一下，免的下一秒就忘了^^"
這裡是官網  這裡是範例
依照他的範例，頁面上需要置放一些code，首先是把相關的jQuery套件放進來： <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script> <script type="text/javascript" src="jquery.cascade.js"></script> <script type="text/javascript" src="jquery.cascade.ext.js"></script> <script type="text/javascript" src="jquery.templating.js"></script> 再來是設定option2的javascript <script type="text/javascript"> var list1 = [ {'When':'A','Value':'A1','Text':'A1'}, {'When':'A','Value':'A2','Text':'A2'}, {'When':'A','Value':'A3','Text':'A3'}, {'When':'A','Value':'A4','Text':'A4'}, {'When':'B','Value':'B1','Text':'B1'}, {'When':'B','Value':'B2','Text':'B2'}, {'When':'B','Value':'B3','Text':'B3'}, {'When':'B','Value':'B4','Text':'B4'}, {'When':'C','Value':'C1','Text':'C1'}, {'When':'C','Value':'C2','Text':'C2'}, {'When':'D','Value':'D1','Text':'D1'}, {'When':'D','Value':'D2','Text':'D2'} ]; function commonTemplate(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; }; function commonTemplate2(item) { return "<option value='" + item.Value + "'>***" + item.Text + "***</option>"; }; function commonMatch(selectedValue) { return this.When == selectedValue; }; </script> HTML code Parent <select id="simple"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> Child <select id="simple_child"> <option value='nope1'>I am not deleted on ready()</option> <option value='nope2'>Neither Am I</option> </select> jQuery code <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#simple_child").cascade("#simple",{ list: list1, template: commonTemplate, match: commonMatch }); }); </script> 這裡我只是用第一個範例來舉例說明，範例網站還有許多用法可以參考