jQuery ColorBox插件使用小記


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();


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM