<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    cAng^Er

    不懂我的人 , 離不了我 , 該了解了解我 !而懂我的人 , 更離不了我 , 因為他們愛我 。

      BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
      30 隨筆 :: 16 文章 :: 18 評論 :: 0 Trackbacks
    http://www.cnblogs.com/dupeng0811/archive/2011/03/11/1981270.html

    ThickBox運行需要的文件

    官方下載:

    Download thickbox.js or thickbox-compressed.js, ThickBox.css, and the loading graphic (loadingAnimation.gif) to your local machine (or cut and paste the code from the tabs). Along with these three files, a copy of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of jQuery.

    首先在 HTML 文件的 head中導入jquery.js 和thickbox.js文件,導入 thickbox.css 文件;并且jquery.js 文件放在前面:

    <script src="../Scripts/jquery-latest.pack.js" mce_src="Scripts/jquery-latest.pack.js" type="text/javascript"></script>
    <script src="../Scripts/thickbox.js" mce_src="Scripts/thickbox.js" type="text/javascript"></script>
    <link href="../Styles/thickbox.css" mce_href="Styles/thickbox.css" rel="stylesheet" type="text/css" />  

    最后你只要給元素添加 class=”thickbox” 屬性就可以開始用 thickbox

    實現了一張圖片的彈出展示功能:

    <a href="”bg.jpg”" mce_href="”bg.jpg”" class=”thickbox” ><img src="”bg.jpg”" mce_src="”bg.jpg”" alt=”圖片”/></a>
    //只需要指定圖片的class為thickbox
    彈出框使用方法:
    <a href="Default.aspx?keepThis=true&TB_iframe=true&height=400&width=500" title="主頁" class="thickbox" </a>
    <input onclick="<web.path:path/>/bannedUserList!unBannedUserList?height=400&width=800&inlineId=myOnPageContent" title="彈出層" class="thickbox" type="button" value="Ban Another" />
    //內嵌內容
    <input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="標題" class="thickbox" type="button" value="Show" />
    <a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">顯示隱藏內容a>
    //遮罩層
    URL后面加?KeepThis=true&TB_iframe=true&height=400&width=600
    參數字符串中加 modal=true
    ?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true
    這樣當關閉ThickBox時會調用ThickBox iframe (self.parent.tb_remove())內部的一個tb_remove()函數
    所有其他參數字符都必須在TB_iframe 參數之前。URL中所有"TB" 之后的將被移除。
    <a href="index.html?keepThis=true&TB_iframe=true&height=250&width=400" title="標題" class="thickbox">打開一個頁面</a>
    <a href="index.html?keepThis=true&TB_iframe=true&height=300&width=500" title="標題" class="thickbox">打開一個頁面</a>
    <a href="index.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="標題" class="thickbox">打開一個頁面</a>  

     

    自定義設置:

    1、彈出窗口(div)右上角的關閉按鈕為顯示為"close or esc key",而不是中文的; 如果想把它變成[X]或"關閉"應該怎么來辦呢?

    將thickbox.js文件打開,查找關鍵字"or esc key",將其刪除,并將前面的close更改為[X]或"關閉",然后把文件另存為UTF-8格式,如果不保存為UTF-8的話,將會出現亂碼。
    2、thickbox 彈出層的遮住層透明度修改

    打開thickbox.css查找.TB_overlayBG 進行更改

    .TB_overlayBG {
    background-color:#000;
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
    }

    3、關閉層:如果我們需要自己添加一個關閉按鈕或者圖片可以使用:

    onclick="self.parent.tb_remove();"  

    4、關閉層刷新父頁面,修改關閉方法 :

    function tb_remove() {
    $("#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","");
    }
    document.onkeydown = "";
    document.onkeyup = "";
    //刷新父頁面,未指定
    window.location.reload();
    return false;
    }

    5、thickbox插件默認情況是點擊灰色的遮罩層就會關閉取消

    把兩個$("#TB_overlay").click(tb_remove);去掉就可以取消掉

    6、updatepanel回發后thickbox失效的解決方法

    只需把以下代碼粘貼至頁面中就OK了。
    <script type="text/javascript" language="javascript">
    function pageLoad()
    {
    var isAsyncPostback = Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack();
    if (isAsyncPostback)
    {
    tb_init('a.thickbox, area.thickbox, input.thickbox');
    }
    }
    </script>
    posted on 2011-04-26 16:59 cAng^Er 閱讀(951) 評論(0)  編輯  收藏 所屬分類: |:Web View:|
    主站蜘蛛池模板: 四虎成人精品在永久免费| 免费一级毛片无毒不卡| 日韩免费一区二区三区在线播放| 亚洲精品中文字幕无码蜜桃| 国产成人高清精品免费观看| 亚洲综合AV在线在线播放| 久久九九免费高清视频| 中文字幕人成人乱码亚洲电影| 2022免费国产精品福利在线| 亚洲欭美日韩颜射在线二| 中文字幕不卡免费视频| 久久精品国产亚洲AV麻豆王友容| 久久久久国产免费| 亚洲性69影院在线观看| 无限动漫网在线观看免费| 亚洲乱亚洲乱妇24p| 午夜国产羞羞视频免费网站| 国产免费牲交视频免费播放 | 国产精品亚洲精品日韩电影| 国产男女性潮高清免费网站 | 免费国产综合视频在线看| 猫咪www免费人成网站| 久久精品国产亚洲7777| 暖暖免费日本在线中文| 亚洲国产精品xo在线观看| 男女交性永久免费视频播放| 一级特黄录像免费播放中文版| 一本久久a久久精品亚洲| 热re99久久6国产精品免费| 97久久国产亚洲精品超碰热| 吃奶摸下高潮60分钟免费视频| 中文字幕无线码中文字幕免费 | 国产精品亚洲片夜色在线| 国产婷婷高清在线观看免费| 亚欧乱色国产精品免费视频| 亚洲视频一区在线观看| 国产成人免费网站在线观看| 日本人成在线视频免费播放| 亚洲国产精品无码久久久秋霞1| 国产成人精品日本亚洲专区| 国产在线观看麻豆91精品免费|