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

jQuery - Curvy Corners讓div呈現圓角效果

網路上找到一個挺有趣的jQuery，可以在不使用圖檔的狀況下讓你的div外框呈現圓角
可以參考：http://blue-anvil.com/jquerycurvycorners/test.html
使用方法如下： <script type="text/javascript" src="jquery.curvycorners.min.js"></script> <script type="text/javascript"> $(function(){ $('.inner').corner(); }); </script> <div class="inner" style="background:#ff0;padding:15px;border:1px solid #555;width:200px;"> <p style="color:#000">測試文字1</p> <p style="color:#000">測試文字2</p> <p style="color:#000">測試文字3</p> <p style="color:#000">測試文字4</p> <p style="color:#000">測試文字5</p> </div>

jQuery - css操作

很少用jQuery來設定css，特地上網搜尋到了以下資料，趕快來做一下筆記，希望對不小心來這的人也有幫助^^
jQuery提供了以下方法，來操作css:
background ()
background (val)
color()
color(val)
css(name)
css(prop)
css(key, value)
float()
float(val)
height()
height(val)
width()
width(val)
left()
left(val)
overflow()
overflow(val)
position()
position(val)
top()
top(val)

比較特別的是：css(name)、css(prop)、css(key, value)
css(name)：取得name的樣式 <div id="a" style="background:blue; color:red">css</div><P id="b">test</P> $("#a").css("color") //會得到red $("#a").css("background ") //會得到blue css(prop)：可以設定大量的css $("#b").css({ color: "red", background: "blue" }); 會得到：<p id="b" style="background:blue; color:red">test</p>

css(key, value)：設定單一css樣式 $("#b").css("color","red");

jQuery - autocomplete

最近為了公司的某個案子需求，找了一個輸入自動完成的功能，而且還有多重選擇的效果
重點是：在IE 6也可以用喔^^"
點我看範例
使用方法如下： <link rel="stylesheet" type="text/css" href="jquery.autocomplete/jquery.autocomplete.css" /> <script type='text/javascript' src='jquery.autocomplete/lib/jquery.bgiframe.min.js'></script> <script type='text/javascript' src='jquery.autocomplete/jquery.autocomplete.js'></script> 遠端取得資料的範例： <script type="text/javascript"> jQuery(document).ready(function($) { function formatItem(row) { return row[0] + " (<strong>id: " + row[1] + "</strong>)"; } function formatResult(row) { return row[0].replace(/(<.+?>)/gi, ''); } $("#vay_teacher").autocomplete('vi_teacher.php', { width: 300, multiple: true, matchContains: true, formatItem: formatItem, formatResult: formatResult }); }); </script> 我的範例是到遠端取得資料，但是如果資料很多的話，可能會有點慢喔
我同事在使用IE時會沒反應= ="

先把資料載進來的範例： <script type="text/javascript"> var teacher_list = [ { name: "王小明", tid: "1283" }, { name: "王小強", tid: "1260" } ]; jQuery(document).ready(function($) { $("#vay_teacher").autocomplete(teacher_list, { width: 300, multiple: true, matchContains: true, formatItem: function(row, i, max) { return row.name + " (id:" + row.tid + ")"; }, formatResult: function(row) { return row.name + "@" + row.tid; } }); }); </script>

jQuery - checkbox, radio, select

獲取一組radio被選中項的值
var item = $('input[@name=items][@checked]').val();
獲取select被選中項的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二個元素為當前選中值
$('#select_id')[0].selectedIndex = 1;
radio單選組的第二個元素為當前選中值
$('input[@name=items]').get(1).checked = true;

獲取值：

文本框，文本區域：$("#txt").attr("value")；
多選框checkbox：$("#checkbox_id").attr("value")；
單選組radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();

控制表單元素：
文本框，文本區域：$("#txt").attr("value",'');//清空內容
$("#txt").attr("value",'11');//填充內容

多選框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾

單選組radio： $("input[@type=radio]").attr("checked",'2');//設置value=2的項目為當前選中項
下拉框select： $("#sel").attr("value",'-sel3');//設置value=-sel3的項目為當前選中項
$("11112222").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框

jQuery - ThickBox

最近為了公司的案子找了一個類似遮效果的plugin ThickBox
使用方式非常簡單
先至上面的網站下載他的檔案
然後在html原始碼的<head></head>中間加上
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
這樣就算是設定完成
接著只需要在想啟動效果的連結位置加上class="thickbox"即可，我們列幾個常用的例子 #a link： <a href="http://ice-note.blogspot.com/index.php?height=460&width=510" class="thickbox">ICE NoteBook</a> #button： <input type="image" src="submit.gif" alt="http://ice-note.blogspot.com/index.php?height=460&width=510" class="thickbox"> #使用iframe只要在連結後面加上&KeepThis=true&TB_iframe=true <a href="http://ice-note.blogspot.com/index.php?height=460&width=510&KeepThis=true&TB_iframe=true" class="thickbox">ICE NoteBook</a> #如果不想使用它附屬關閉畫面的工具，可以在連結後面加上&modal=true <a href="http://ice-note.blogspot.com/index.php?height=460&width=510&modal=true" class="thickbox">ICE NoteBook</a> #手動關閉畫面可使用javascript語法關閉 tb_remove() 有需要的人可以去網站看看
裡面有許多例子

實做筆記：
如果網頁裡面有flash的話可能會形成破圖的感覺
這時候只需要在flash設定裡面加上
<param name="wmode" value="transparent" />

如果是使用AC_RUNTIME的話可以加上
AC_FL_RunContent( .....,'wmode','transparent'); 這樣就可以囉

jQuery - Validation

相信很多人在製作表單功能時都會遇到某些欄位是必填的
如果不想在送出之後做檢查的話
一般來說都是用javascript的做判斷
然後alert訊息通知填寫者
不過有些人卻很討厭alert
這時候我們可以使用此jQuery來達到不同的效果
點我進入網站
進入後馬上就可以看到範例
網頁裡面也有提到如何使用
在這個Plugin裡面也有寫好許多驗證的方式
想嚐試的人可以試試看喔

實做筆記：
1.如果不想讓USER重複按送出鈕可以加上下面的function function checkForm(){ if ($("#form2").validate().form()){ document.getElementById("Submit").disabled=true; } } 2.如果要檢查某個資料是否已使用可以在rules加上remote: "userid.php"，
但是注意的是必 須return true or false

jQuery - Input Hints

相信很多人在填寫表單的時候不知道應該怎麼填 這時候如果有提示訊息的話一定很好
點我進入網站
以下是他的範例：<form action=""> <div><label for="search">Search:</label> <input type="text" name="seach" value="" id="search" title="Company name or ticker" /> <input type="submit" value="Go" /> </div> </form> 表單的提示訊息是來自title，所以別忘記設定他喔