2010年6月28日 星期一

THICKBox 大補帖

thickbox非常強大,有些工具必須自己在改寫
參考http://blogs.digitss.com/technology/hacking-jquery-thickbox/comment-page-1/#comments

1.重複呼叫thickbox
//第1種
var jThickboxNewLink;
function tb_remove_open(reloadLink){
jThickboxReloadLink = reloadLink;
tb_remove();
setTimeout("jThickboxNewLink();",500);
return false;
}
//第2種 不用下class="thickbox"
function tb_open_new(jThickboxNewLink){
tb_show(null,jThickboxNewLink,null);
}


// 改寫tb_remove()
function tb_remove(parent_func_callback) {
$("#TB_imageOff").unbind("click");
$
("#TB_closeWindowButton").unbind("click");
$
("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
$
("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$
("html").css("overflow","");
}
if(parent_func_callback != undefined)
eval("window."+parent_func_callback);
document.
onkeydown = "";
document.
onkeyup = "";
return false;
}

實際用法:
1.<a href="#" onclick="tb_open_new('window_one.html?TB_iframe=true&height=400&width=400&modal=true')">Open Thickbox without href attribute</a>
2.<input type="button" value="Close & Open - Window Two" onclick="self.parent.tb_open_new('window_two.html?TB_iframe=true&height=400&width=500&modal=true')" />
<input type="button" value="Close" onclick="self.parent.tb_remove();" />

3.<input type="button" value="Close & Call Parent/Main Window function" onclick="self.parent.tb_remove('show_code();');" />



還有自訂javascript方式

<script type="text/javascript">
  String.prototype.trim = function () {
    return this.replace(/^\s+|\s+$/g, "");
 }
    //wFORMS.functionName_formValidation = "doPostBack";
    function doPostBack(idForm,urlLoginDB,targetDiv,e) {
   if(!e) e = window.event;   
   
    if(wFORMS.behaviors['validation'].run(e)) {   
    // validation ok       
     //alert('good');

    var multiuser  = true;
    
         if(document.getElementById('multi_username_4').value.trim() != '') multiuser = confirm("此表單報名總數為 6 人!\n將收取6人費用?");
    else if(document.getElementById('multi_username_3').value.trim() != '') multiuser = confirm("此表單報名總數為 5 人!\n將收取5人費用?");
    else if(document.getElementById('multi_username_2').value.trim() != '') multiuser = confirm("此表單報名總數為 4 人!\n將收取4人費用?");
    else if(document.getElementById('multi_username_1').value.trim() != '') multiuser = confirm("此表單報名總數為 3 人!\n將收取3人費用?");
    else if(document.getElementById('multi_username_0').value.trim() != '') multiuser = confirm("此表單報名總數為 2 人!\n將收取2人費用?");

     
     if(multiuser) sendFormData(idForm,urlLoginDB,targetDiv);
    } else {
     return wFORMS.helpers.preventEvent(e);
    }

    }
  </script>


/////////////////////////////////////////////////////////

  1. Overwrite the default form validation handler with yours:
    wf.functionName_formValidation = "myCustomValidation";
  2. Implement your custom function:
    function myCustomValidation (evt) {
    // evt is the onsubmit event.

       // call the wForms default validation routine
       if(wf.formValidation(evt)) {

           // do your stuff..

       } else
        // will prevent the form from being submitted.
        return wf.utilities.XBrowserPreventEventDefault(evt);
    }