一進入到Colorbox的開發者網頁,就闡明Colorbox是「一個輕量級、可客製化的jQuery燈箱插件」 (A lightweight customizable lightbox plugin for jQuery),拜歐在使用的過程也是有這種體會:「好用」,那就直接來個初體驗吧!
因為是jQuery的插件,所以在引入前,應該先引入jQuery函式庫,先在<body>的最下方引入JS檔案:
另外記得在<head>引入css檔案:
接著加入一個
button
,等下用來觸發燈箱:
開始撰寫JS程式碼:
(function(){ $('button').on('click', function(){ $.colorbox({ html : 'Hello lightbox!!!
', //在燈箱中要顯示的html字段 width : 700, //燈箱中間區塊的寬度 height : 600, //燈箱中間區塊的高度 onClosed : function(){ //當燈箱關閉時的callback funtion alert('Lightbox is closed'); } }); }); })();
上列中要傳入的參數其實滿多的,以方便客製化,除了在燈箱中可以放入字段,也可以顯示照片,或嵌入一個iframe,詳細參數列表,可以參考上列的開發者網站。
執行後的結果如:
拜歐在上列的程式碼中,有加入一個onClosed的callback function,就是在燈箱關閉後,會去執行,在此練習,就是直接altert一段訊息。
關閉上列的燈箱後,接著就會跳出下列訊息:
練習程式碼下載。