JQuery - 全螢幕控制切換與其事件

2014-11-30 11:11 PM

有時若需要讓使用者完全沉浸於我們設計的使用者體驗內時

就會需要使用全螢幕的功能

但可能是安全性上的考量或是避免開發者濫用全螢幕功能

此功能必須由使用者以按鈕觸發才可動作

以下範例為在特定DIV加上全螢幕控制按鈕功能

並可切換指定容器顯示為全螢幕狀態

程式碼範例

// 全螢幕控制按鈕
var fullscreenDiv = $("#fullscreenDiv");
fullscreenDiv.on("click", doFullScreen);

// 針對各瀏覽器觸發全螢幕要求
function doFullScreen(){
 // 取得要顯示為全螢幕的容器
 var elem = $("#fullScreenTarget")[0];
 
 var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
 // 目前非全螢幕狀態 開啟全螢幕
 if( !isFullScreen ){
  if (elem.requestFullscreen) {
   elem.requestFullscreen();
  } else if (elem.msRequestFullscreen) {
   elem.msRequestFullscreen();
  } else if (elem.mozRequestFullScreen) {
   elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
   elem.webkitRequestFullscreen();
  }
 }
 // 目前為全螢幕狀態 關閉全螢幕
 else{
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
 }
}

// 全螢幕要求事件(包括進入及退出)
$(document).on("mozfullscreenchange webkitfullscreenchange fullscreenchange", fullscreenChange);


// 針對全螢幕狀態處理
function fullscreenChange(){
 var isFullScreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
 // 目前非全螢幕狀態 設定回預設大小(由內容決定)
 if( !isFullScreen ){
  $("#fullScreenTarget").width("");
 }
 // 目前為全螢幕狀態 設定為100%大小
 else{
  $("#fullScreenTarget").width("100%");
 }
}

JQuery - 取得物件本身的完整HTML

2014-11-23 8:04 PM

有時會需要物件本身的HTML做應用時
可使用以下方法輕鬆取得
雖然亦可以使用原生的outerHTML方法
但在此處依舊提供JQuery的解法
畢竟有時我們會希望使用更優雅的程式碼

程式碼範例

var a = $(document.createElement("a"))
    .attr("href", "http://www.google.com")
    .attr("id", "alertId")
    .attr("target", "_blank")
    .html("here");

var html = $('<div>').append(a.clone()).html();

Javascript - 將img轉換為baseURL編碼

7:50 PM

程式碼範例

function convertImgToBase64(img){
 var canvas  = document.createElement('CANVAS');
 var ctx  = canvas.getContext('2d');
 
 canvas.height  = img.height;
 canvas.width  = img.width;
 ctx.drawImage(img, 0, 0);
 
 var dataURL = canvas.toDataURL();
 canvas = null; 
 
  return dataURL;
}

JQuery - Image onLoad 讀取/載入完成事件

7:42 PM

以下程式碼範例為圖片讀取完成後
淡出原本容器的背景 再淡入背景圖片的效果

程式碼範例

var target  = $(value);
var src  = "/image/cover/thumbnail";
   
$('<img/>').attr('src', src).on("load", function() {
 var base64 = convertImgToBase64( $(this)[0] );
 $(this).remove();

 TweenMax.to(target, 0.5, {
  alpha:0,
  ease:Quad.easeInOut,
  onCompleteParams:[target, base64],
  onComplete:function(t, i){
   t.css("background", "rgba(31, 31, 31, 1) url(" + i + ") no-repeat center center");
   TweenMax.to(t, 1.3, {alpha:1, ease:Quad.easeInOut});
  }
 });
});

function convertImgToBase64(img){
 var canvas  = document.createElement('CANVAS');
 var ctx  = canvas.getContext('2d');
 
 canvas.height  = img.height;
 canvas.width  = img.width;
 ctx.drawImage(img, 0, 0);
 
 var dataURL = canvas.toDataURL();
 canvas = null; 
 
 return dataURL;
}

Javascript - stop event bubbling and default action

2014-11-16 4:09 PM

Examples

// Stop bubbling
event.stopPropagation();

// Stop default action
event.preventDefault();

Javascript - 停止事件預設行為及事件傳遞

3:54 PM

程式碼範例

// 停止事件傳遞
event.stopPropagation();

// 停止事件預設行為
event.preventDefault();

Javascript - Get object length

3:21 PM

Examples

var obj = {
 "key1": value1,
 "key2": value2,
 "key3": value3
};

var length = Object.keys(obj).length;

console.log(length);

//Print
3

Javascript - 取得物件長度

3:20 PM

程式碼範例

var obj = {
 "key1": value1,
 "key2": value2,
 "key3": value3
};

var length = Object.keys(obj).length;

console.log(length);

//結果為
3

Java - Convert a Primative array into an Object array and vice versa

2014-11-09 2:07 PM

Examples

// Long[] to long[])
ArrayUtils.toPrimitive(objectArray);

// long[] to Long[])
ArrayUtils.toObject(primativeArray);

Links

ArrayUtils
Maven repository
Apache Maven

Java - Conver a List into an Array and vice versa

1:56 PM

Examples

// List to Array
Foo[] array = list.toArray(new Foo[list.size()]);

// in Java 8
String[] strings = list.stream().toArray(String[]::new);

//Array to List
List list = Arrays.asList( array );

// or
List list = Arrays.asList( "value1", "value2", "value3" );

使用說明書

1:43 PM

本文將指導各位如何以最佳方式使用網誌內的教學文章

各教學文的架構為

程式碼範例

詳細解說

各項資料連結

最佳使用方式為：

1.複製範例程式碼

2.貼上程式碼到你的檔案

完成!

就是這麼簡單，不需要再看幾千字的教學結果還是不知道該怎麼做(而且大部分教學還長得一模一樣...)

若想繼續更深入的了解，
則可以繼續往下閱讀，文章內將會有簡易的介紹。

至於完整的各項屬性解釋，應用等，則會以外部連結的方式誘導各位讀者到相關網頁自行閱讀，
我想這部分的觀念其他作者應該比我清楚許多，我就不誤人子弟了XD
有任何問題歡迎回覆指教。

Readme

1:43 PM

Best practice of all the tutorials in this blog.

The format of every tutorial are as follows:

Examples

Details

Links

And the best practice will be...

1.Copy

and

2.Paste

Done!

That's what I'm talking about something simple and quick.

If you wanna know how to use the attributes or how it works,

the Details of the article should help you out.

Eager to know something really important?

Then the Links will lead you there.

Feel free to contact me if you have any question or you think the tutorial is NOT simple and quick at all.

Please let me know if there's something like bad grammar, word or any mistake.