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> 這裡我只是用第一個範例來舉例說明，範例網站還有許多用法可以參考