Bootstrap - 自動關閉popover

2015-06-30 1:29 PM

本次要介紹的是 Bootstrap 中的 popover 元件的客製化功能

若要在 popover 失焦時 也就是 onblur 觸發時自動淡出該如何使用呢?

在 Bootstrap 本身並沒有支援這項功能

而且 DIV 本身也不支援 blur 事件

所以我們要使用另外一種方式達成相同的效果

程式碼範例

// Part 1: 初始化 popover 元件
var button = template.find(".itemInfo button");
// 加入 class name 以便下一步使用
button.addClass("popover-toggle");

var content = $("
test
");

button.popover({
    container:"body",
    content: content,
    html:true,
    placement:"top",
    title:"Popover title",
    trigger:'click'
});

// Part 2: 加入 click 事件處理
$(document).on("click", function(event){
    var target = $(event.target);
    $.each( $(".popover-toggle"), function(index, value){
        var _target = $(value);
        // 不是點擊按鈕或 popover 本身時關閉 popover 物件
        if( !target.is( _target ) && target.closest(".popover").length == 0 ){
            _target.popover("hide");
        }
    });
});

各項資料連結

Bootstrap

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

JQuery - How to use ajax request

2014-07-30 9:39 PM

Examples

Post

$.ajax("TARGET_URL",
 {
 "type"   : "post",
 "data"   : {"var1" : value1, "var2":value2},
 "success"  : reqeustSuccess,
 "complete"  : requestComplete,
 "error"  : requestFailure}
});

function reqeustSuccess(data, textStatus, jqXHR){
 // request success
}

function requestComplete(jqXHR,textStatus){
 if( textStatus == "success" ){
  // Request success
 }
 else{
  // Request failed
 }
}

function requestFailure(jqXHR, textStatus, errorThrown){
 // request failed
}

JQuery - 如何使用ajax要求

2014-07-29 10:17 PM

程式碼範例

Post

$.ajax("TARGET_URL",
 {
 "type"   : "post",
 "data"   : {"var1" : value1, "var2":value2},
 "success"  : reqeustSuccess,
 "complete"  : requestComplete,
 "error"  : requestFailure}
});

function reqeustSuccess(data, textStatus, jqXHR){
 // request success
}

function requestComplete(jqXHR,textStatus){
 if( textStatus == "success" ){
  // Request success
 }
 else{
  // Request failed
 }
}

function requestFailure(jqXHR, textStatus, errorThrown){
 // request failed
}