ColorBox算的上是jQuery一款很不錯的彈窗插件了。最近的一個項目中也用到了它,尤其是它的iframe功能感覺比Ajax要簡化許多。
使用方法大概有兩種,一種是頁面加載完成后為鏈接綁定事件。
<a id=”colorboxLink” href=”http://www.phplamp.org”>ColorBox打開</a>
// 對應的JavaScript腳本為
$(function() {
$(‘#colorboxLink’).colorbox(‘/*這里可以寫一些Colorbox的配置*/’);
});
還有一種方法就是在函數中調用,這也是我用的比較多的一種。
function colorboxShow() {
$.colorbox({href:’鏈接地址’});
}
關於ColorBox的參數配置我還是比較有心得的,為了在不同的瀏覽器中表現出相同的效果,參數配置了N多種才滿足了我的要求(該死的IE)。
1. transition:fade|none|elastic
transition主要控制ColorBox的出現效果,默認的是elastic,我用的時候直接將它設為none了,完全是因為IE
2. href:String
很明顯,打開的鏈接地址
3. iframe:true|false
鏈接是否以iframe形式打開,打開的鏈接由href設置
4. inline:true|false
打開當前頁面某個ID內的東西。ID由href設置,ID前要加#,(注意inline與iframe是不兼容的,想想也知道不能兼容,我還傻傻的試了N多遍)。
5. title:String
彈出窗口的標題
6. width, height
彈窗的大小,最好設大點,不然效果會很難看(絕對的BUG)。
7. 這也是最致使的一點,讓我調試最長的一個問題。
如果以事件形式調用colorbox,如:<a href=”javascript:;” onclick=”colorboxShow()”>打開Colorbox</a>,IE不會打開iframe,其它瀏覽器沒有問題;必需將href改為#才行。(又一個該死的BUG)
8. 關閉colorbox
window.parent.$.colorbox.close();