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月25日 星期一

【筆記】使用Handlebars JS函式庫實做項目列表

之前在Handlebars的初體驗中,有介紹Handlebars這個JavaScript的函式庫做樣版的替換,拜歐在後續的研讀中發現,用這個函式來做項目列表,好像也是不錯的選擇。

拜歐使用一個包含多個物件的陣列來做了一個範例,實際上運用應該是使用Ajax向伺服器端要求一串JSON字串,再來替換樣版成所需要的HTML字段。

首先一樣在<body>的最下方加入要引用的JS檔:



再來一樣加入一個樣板如:
這裡要注意的是,用了{{#each this}}{{/ecah}}把<li>包住。 最後開是JavaScript的程式碼:
(function(){
 //現在我們要替換的是一個陣列
 var bookArr = [
   {title : "First book", author : "Javakid"},
   {title : "Second book", author : "Javakid2"},
   {title : "Third book", author : "Javakid3"}
 ];
 var template = Handlebars.compile($('#booklist').html()); //取得id為booklist的script中的html字段
 $('ul.books').append(template(bookArr)); //把上面陣列的內容替換為樣板中的內容
})();
執行後結果如:


原始檔可以在這裡下載

【分享】如何使用iTunes將歌曲轉換成其他檔案格式,以mp3為例

在iTunes中,可以依下列步驟來將歌曲轉換成其他格式。

若有顯示【功能表】的話,就點按【編輯】→【徧好設定】,如沒有顯示功能表,直接點iTunes視窗左上方的圖示開啟【徧好設定】的對話窗,如下圖,或直接使用快捷鍵「Ctrl + ,」 來開啟:


 開啟後,在【一般】頁籤中,找到【匯入設定...】的按鈕,點按後,開啟【匯入設定】對話窗:


在【匯入設定】中,在「匯入時使用」旁的下拉選項中,選擇「MP3 編輯器」後,按【確定】儲存設定:


若要開始轉換歌曲格式,在iTunes視窗中,選擇要轉換的歌曲,點按滑鼠右鍵,再選擇【製作 MP3 版本】:



完成後,對同一首歌曲點按滑鼠右鍵,這次選擇 【在 Windows 檔案總管中顯示】:


 此時就會開啟視窗顯示該歌曲的「m4a」格式檔案,和一個新轉換的「mp3」格式檔案:



參考來源:http://support.apple.com/kb/HT1550?viewlocale=zh_TW

2013年11月23日 星期六

【Solved】Error on connecting iTunes Store on Windows 8.1

After updating some patches of Windows 8.1, it's OK to play music with iTunes but error on connecting to iTune Store.


Waiting for the suggestions, but I got...


After I googled for the solution, I was lucky to find the solution working for me within 2 results.

As saying in the page, all I had to do is as fellow:
  1. Find a file named "QTMovieWin.dll" in C:\Program Files (x86)\Common Files\Apple\Apple Application Support.
  2. Copy it to the folder C:\Program Files (x86)\iTunes.
It's working for me. If you have the some problem, just give it a try.

2013年11月22日 星期五

【解決】在Windows 8.1開啟iTunes出現錯誤

在前兩天做完Windows 8.1一些小更新後,在開啟iTunes後可以播放音樂,但要連到iTunes Store時,就會出現下列的錯誤:


說正在尋找問題的解決方案,結果就像他以往一貫作風,使用者只能靠自己...


去Google了一下,結果找到這篇文章,解決了我的問題,解法如下:

  1. 找到C:\Program Files (x86)\Common Files\Apple\Apple Application Support下一個名為「QTMovieWin.dll」的檔案。
  2. 將「QTMovieWin.dll」這個檔案,複製到C:\Program Files (x86)\iTunes這個目錄下。
這個解法解決了拜歐遇到的問題,有相同遭遇的朋友,可以試看看。

參考來源:https://discussions.apple.com/message/23481991#23481991

2013年11月21日 星期四

【筆記】Handlebars的初體驗

昨天在看jQuery的線上教學時,講者有一段專門在講Handlebars,整個看下來,覺得是個不錯用的JS函式庫,若有機會直接使用JavaScript使用一些Open Data的JSON,就可以用這個函式庫來處理,先寫一些程式來試用看看。

首先到Handlebars官網下載該函式庫,下載後,再新建一個html文件,在html中先引入jQuery函式庫和剛下載的Handlebars函式庫:


再來在<body>中插入一個範本,如:

再來,要開始寫我們的程式碼了。

 var book = {
  title : "First book", //這裡的屬性要和上列的template中{{}}中的一樣
  author : "Javakid"
 };
 var content = $('#booklist').html();//取得上列的template內容
 console.log(content); //可以先把content印出來,確認jQuery是有作用的
到這一步,用Chrome開啟html文件,應該在console中可以看到下列內容:


開始使用Handlebars的API:
var template = Handlebars.compile(content);
var html = template(book);

 $(document.body).append(html);  //直接把html片段加到body中
完整的JavaScript程式碼如下:
(function(){
 var book = {
  title : "First book", //這裡的屬性要和上列的template中{{}}中的一樣
  author : "Javakid"
 };
 var content = $('#booklist').html(); //取得上列的template內容
 //console.log(content);

 var template = Handlebars.compile(content);
 var theBook = template(book);

 var html = template(book);

  $(document.body).append(html); //直接把html片段加到body中
})()
開啟網頁後,應該會看到下列的結果:

範例原始碼下載

若在要替換的值中加入html標籤的話,會有什麼樣的結果呢?如把上列的book物件改成:

var book = {
 title : "First book",
 author : "Javakid" //加了strong
};

結果是把<strong>整個顯示出來,而不是強調中間包裹的字串:


這時就要將上方中樣板的script修改一下:



上列的樣板中,titleauthor旁都多加了一個大括號,變成有三個大括號包覆著,再用瀏覽器開啟html,就能如預期地顯示加強效果:


您也許也有興趣看看【筆記】使用Handlebars JS函式庫實做項目列表

2013年11月19日 星期二

【開心】新一代MacBook Pro終於開賣了

每天看台灣Apple的官網,終於在今天,民國102年11月19日下班前,看到他開賣的訊息。


拜歐要衝了!衝去Apple實體店面門口看一下,XD~。

其實,一台貴松松的MacBook Pro,對拜歐來說,並非一定要的備配,但最近使用愈來愈「不順心」的視窗系統不愉快,想要入手一台的念頭,就愈來愈強烈。

之前看過下列圖片,在2012 Facebook World Hack中的這附景象,發光的蘋果,加上烱烱有神的眼神,就覺得只要有一台,程式就會寫得很厲害。

(圖片來源:http://www.inside.com.tw/2012/09/12/2012-facebook-world-hack-taipei)

好吧!這是錯覺,就像之前學生時代,以為穿著喬丹十一代,就一定會跳得比別人高很多的錯覺一樣。但每每聽到使用後就會「回不去」的使用者良好經驗,若有機會使用看看,也許有不一樣的驚喜。


【筆記】JavaScript中的神奇毛毛蟲 (~~)

「~~」就是指鍵盤上方數字鍵「1」右邊的那顆鍵,今天在看學習jQuery的好網站-30 Days to Learn jQuery的教學影片中,使用到這一個運算子,讓原本對JavaScript就不熟的拜歐,更加驚嘆它的高深莫測 。

在影中講到「~~」的功能是把boolean轉成number:
var a = ~~true;
console.log(a); // 結果為1
var b = ~~false;
console.log(b); // 結果為0

知道「~~」意義之後,我們可以這樣運用,在下列程式碼中,判斷calc字串若等於「add」的話,val就加1,否則就減1,通常功力比較淺的拜歐,就會這樣寫:
 var calc = 'add';
 var val = 0;
 if(calc === 'add'){
  val += 1;
 }else{
  val -= 1;
 }
 console.log(val);//結果為1
這樣的可讀性高,但看起來不酷XD,若使用「~~」,可以這樣寫:
var calc = 'add';
var val = 0;

val += ~~(calc === 'add') || -1;
//如果calc不等於'add',則||前面的結果為0,val就變成加「-1」
console.log(val);  //結果為1
嗯,這樣酷多了。

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
 雖然說是英文的內容,但大都是技術名詞,而且講者的英文很標準,音調也是不急不徐,只是聽力有普通水準以上的,應該聽來有醍醐灌頂、任督二脈被打通的感覺,而且可以訓練英聽,可說是「一兼二顧,摸蛤兼洗褲」。

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

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





【分享】使用Google遠端桌面進行遠端連線

今天拜歐發現一個好用的Google Chrome的擴充功能:Chrome遠端桌面

https://chrome.google.com/webstore/detail/chrome-remote-desktop/gbchcmhmhahfdphkhkmpfmihenigjmpp

下載完成後,需要在Chrome中啟動應用程式,啟動後畫面如下:


點按上面的【分享】鈕開始分享,應用程式會幫我們產生一組「存取碼」(下列要被遠端連線的電腦是Ubuntu):


將該組「存取碼」交給要連線到您電腦的人員,他便可經由下列步驟來遠端操控您的電腦。

同樣地在Chrome中執行遠端桌面的應用程式,啟動後,點按【存取】鈕,如下圖。


在「存取碼」輸入框中,輸入對方產生的「存取碼」:



按下【連線】鈕後,顯示「您目前正與xxx共用電腦」時,表示已成功連線到對方電腦,即可開始遠端控制對方的電腦了。


您可以連線的遠端電腦不一定要是使用您的帳號登入的電腦。

另外,您也可以在使用Google帳號登入後,將登入的那台電腦設為「我的電腦」,並保持登入,在別台電腦使用您的帳號登入時,輸入您新增「我的電腦」所設定的「PIN」碼後,即可以登入。

在您要被遠端連線的電腦中,設定「我的電腦」。


在別台電腦登入後,即可看到您要連線的那台電腦,直接點按並輸入PIN即可連線。

拜歐個人感覺連線的速度是比TeamViewer順,而且沒有授權的問題,但無法像TeamViewer一樣直接在應用程式中分享檔案,但這好像不是個問題XD~



2013年11月2日 星期六

How to modify the scrollbar style (overlay) in Ubuntu

According to the different versions of Ubuntu, the commands to modify the scrollbar overlay are also different.

In Ubuntu 12.04 the command is as fellow:
gsettings set org.gnome.desktop.interface ubuntu-overlay-scrollbars false
and to restoring it back with the command as fellow:
gsettings set org.gnome.desktop.interface ubuntu-overlay-scrollbars true
If your version of Ubuntu is 12.10, you should use the command:
gsettings set com.canonical.desktop.interface scrollbar-mode normal
and you can use the command below to set it back:
gsettings set com.canonical.desktop.interface scrollbar-mode overlay-auto
Finally if your Ubuntu version is 13.04 the command below can setup what you want:
gsettings set com.canonical.desktop.interface scrollbar-mode normal
and you need the command below to restore it back:
gsettings reset com.canonical.desktop.interface scrollbar-mode

2013年11月1日 星期五

【筆記】Timer Life-Cycle


【筆記】Timer Life-Cycle



【筆記】GlassFish對應安全角色群組 (Mapping Security Roles in GlassFish)

在v3.1之前,在GlassFish中,做安全角色群組對應 (Mapping Security Roles in GlassFish) 的設定檔好像是寫在Web專案下「WEB-INF」下的「sun-web.xml」中,但到了v3.1之後,安全角色的對應是設定在「WEB-INF」下的「glassfish-web.xml」中,如:


 /EJBSecurityAnnotations
    
 
  superusers
  javakid
 
 
 
  plainusers
  plain-users
 
 
  runasadmin
  runas-superusers
 

參考來源:http://www.slideshare.net/krizsan/ocp-jbcd-6-study-notes,p.187