Amazon Ads

顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

2013年11月28日 星期四

【筆記】Colorbox - 好用的jQuery燈箱插件 (jQuery lightbox plugin)

之前看同事已有採用Colorbox這個jQuery插件來做網頁燈箱,最近拜歐剛好有需要在網頁上實作燈箱的需要,終於能夠深入一探它的好用。

一進入到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一段訊息。

關閉上列的燈箱後,接著就會跳出下列訊息:


練習程式碼下載。

2013年11月4日 星期一

【分享】學習jQuery的好網站-30 Days to Learn jQuery

之前一位Frontend高手的同事分享了一個學習jQuery的學習網站,但那時都在寫backend的程式,於是就一直被拜歐沈在海底,直到最近對frontend愈來愈有興趣,想要加強這部份旳功力,於是又把這封分享的信挖了出來。

這是個英文網站,其中一個課程主題為「30 Days to Learn jQuery」:

https://tutsplus.com/course/30-days-to-learn-jquery/

講者分下列幾個主題由淺入深一一講解:
  1. Introduction
  2. The Basics
  3. Effects
  4. Utilities
  5. Custom Events
  6. AJAX
  7. Plugin Development
  8. Exit
 雖然說是英文的內容,但大都是技術名詞,而且講者的英文很標準,音調也是不急不徐,只是聽力有普通水準以上的,應該聽來有醍醐灌頂、任督二脈被打通的感覺,而且可以訓練英聽,可說是「一兼二顧,摸蛤兼洗褲」。

另外,每個單元都有提供影片下載,這仁兄真是佛心來的。

祝他事事順心,好人有好報。