ThinkBox DOC

插件源碼下載

@github https://github.com/Aoiujz/ThinkBox.git

插件使用方法

引入文件

//使用ThinkBox彈出框必須引入以上三個文件。 //jQuery版本必須大於 1.7

// 源文件包含多種彈出框樣式（skin/） // 一、能夠直接加載css文件 // 二、初始化的時候選擇彈窗樣式 $.thinkbox.defaults('style', 'default');

調用彈出框方法 ?

插件基礎方法 $.ThinkBox() 的使用示例

Example-1：用彈出層展現指定內容 & 使用選擇器彈出頁面指定元素 ?

$('#example-1').click(function(){ $.ThinkBox( '

我是用彈出層顯示的，
按ESC鍵能夠將我關閉！

', {'title' : 'Example-1'} ); }); $('#example-1-1').click(function(){ $.ThinkBox( '#example-1-2', {'title' : 'Example-1'} ); });

Example-2：用彈出層展現指定內容，禁止彈出多個 ?

//設置彈出層對象緩存對象屬性 dataEle 後，只容許彈出一個相同緩存對象的彈出層 //dataEle 屬性必須是一個jQuery選擇器或DOM對象 $('#example-2').click(function(){ $.ThinkBox( '

我是用彈出層顯示的，我不容許同時被彈出多個，
按ESC鍵能夠將我關閉！

', {'title' : 'Example-2', 'dataEle':this} ); });

Example-3: 用彈出層展現指定內容，帶有遮罩背景且不能拖動 ?

$('#example-3').click(function(){ $.ThinkBox( '

我是用彈出層顯示的，
我不容許同時被彈出多個且不能被拖動！

', {'title' : 'Example-3', 'dataEle':this, 'modal' : true, 'drag':false, 'escHide':false} ); });

Example-4: 建立但不顯示 -> 點擊顯示 ?

var example_4_box = null; $('#example-4').click(function(){ example_4_box = $.ThinkBox( '

哈哈！我終於能夠顯示啦。。。

', {'title' : 'Example-4', 'dataEle': this, 'display' : false} ); }); $('#example-4-1').click(function(){ example_4_box && example_4_box.show() });

Example-5: 彈出指定類容，2秒後自動關閉

$('#example-5').click(function(){ $.ThinkBox( '

我是用彈出層顯示的，
2秒後我會自動關閉！

', {'title' : 'Example-5', 'dataEle' : this, 'delayClose' : 2000} ); });

插件擴展方法的使用示例

Example-6: 加載外部的html文件並用彈出層展現 ?

$('#example-6').click(function(){ $.ThinkBox.load('load.html', {'title' : 'Example-6', 'dataEle' : this}); });

 

Example-7: 經過iframe加載完成網頁顯示 ?

//因爲在iframe加載完成以前無法獲取到它的寬度和高度，這裏必須手動指定寬度和高度。 $('#example-7').click(function(){ $.ThinkBox.iframe('iframe.html', {'title' : 'Example-7', 'dataEle' : this, 'width' : 400, 'height' : 200}); });

Example-8: 顯示提示信息 成功提示 失敗提示 加載中 ?

//loading提示通常會在數據加載完成後關閉，這裏用延時來模擬

$('#example-8').click(function(){ $.ThinkBox.tips('我是提示信息...', 0); //第二個參數 type 目前的可選值有 0|error, 1|success, loading }); $('#example-8-1').click(function(){ $.ThinkBox.success('我是成功提示信息！'); }); $('#example-8-2').click(function(){ $.ThinkBox.error('我是失敗提示信息！'); }); $('#example-8-3').click(function(){ var loading = $.ThinkBox.loading('我是loading提示信息！'); setTimeout(function(){loading.hide()}, 2000); //加載成功後關閉loading信息 });

Example-9: 消息框 左下角顯示，1秒後自動關閉 ?

9

$('#example-9').click(function(){ $.ThinkBox.msg('

有新消息啦！。。。

', {'dataEle' : this}); }); $('#example-9-1').click(function(){ $.ThinkBox.msg( '

有新消息啦！。。。

', {'dataEle' : this, 'locate' : ['left', 'bottom'], 'delayClose' : 1000} ); });

Example-10: alert提示框 ?

//和原生javascript中的alert不一樣的是，$.ThinkBox.alert()無法阻止程序的執行，因此你必須將肯定後的處理過程寫入到okClick屬性中去。 $('#example-10').click(function(){ $.ThinkBox.alert('你肯定嗎？', {'okClick' : function(){alert('已經肯定！');this.hide()}});
 });

Example-11: confirm提示框 ?

// 和原生javascript中的confirm不一樣的是，$.ThinkBox.confirm()無法阻止程序的執行。 // 因此你必須將肯定或取消後的處理過程寫入到okClick或cancelClick屬性中去。 $('#example-11').click(function(){ $.ThinkBox.confirm( '肯定or取消？', { 'dataEle' : this, 'okClick' : function(){ alert('你選擇了肯定！'); }, 'cancelClick' : function(){ alert('你選擇了取消！'); } } ); });

插件 $.fn.ThinkBox() 方法的使用示例

Example-12: 自動加載 a 標籤的 href 鏈接並用彈出層展示 不顯示標題欄和關閉按鈕 hover觸發 ?

$('#example-12').ThinkBox({'event' : 'click', 'title' : 'Example 12'}); $('#example-12-1').ThinkBox({'event' : 'click', 'title' : null, 'close' : false}); $('#example-12-2').ThinkBox({'event' : 'hover', 'title' : 'Example 12', 'close' : false}); $(document).mousedown(function(){ $('#example-12,#example-12-1').ThinkBox('hide'); //關閉 });

Example-13: 在屏幕中心彈出指定選擇器對象 ?

$('#example-13').ThinkBox({'title' : 'Example-13', 'event':'click', 'center':true}); /* 隱藏的DIV源碼 */

我是一個隱藏的div，一不當心被彈出框給顯示了。。。

插件默認配置項 (options)

title : null (string) 彈出層標題，只有設置了標題才能顯示標題欄， null 爲不顯示標題欄。 - 若是須要顯示空的標題欄，請設置爲 title : '' 。

fixed : true (boolean) 是否使用固定定位(fixed)而不是絕對定位(absolute)，固定定位的對話框不受瀏覽器滾動條影響。 - IE6不支持固定定位，其永遠表現爲絕對定位。

center : true (boolean) 對話框是否屏幕中心顯示。

x : 0 (int) 對話框 x 座標。 當 center 屬性爲 true 時此屬性無效。 - 此參數能夠是一個函數，但返回值必須爲整型，函數的 this 指針指向彈出框DOM對象。

y : 0 (int) 對話框 y 座標。 當 center 屬性爲 true 時此屬性無效。 - 此參數能夠是一個函數，但返回值必須爲整型，函數的 this 指針指向彈出框DOM對象。 locate : ['left', 'top'] (array) 彈出框位置屬性，決定以上 x，y 屬性相對於屏幕的位置。 - 此參數可選值 ['left', 'top']，['right', 'top']，['left','bottom']，['right','bottom']。

modal : false (boolean) 對話框是否設置爲模態。 - 模態時，會顯示一個遮罩層，阻止頁面的其餘元素接受事件。

modalClose : true (boolean) 點擊模態背景是否關閉彈出框

resize : true (boolean) 是否在窗口大小改變時從新定位彈出框位置。

unload : false (boolean) 隱藏後是否卸載彈出框元素。 - 及時更新信息建議開啓，這樣會每次彈出時加載新的內容。

close : true (boolean) 顯示關閉按鈕。

escHide : true (boolean) 按ESC是否關閉彈出框。

delayClose : 0 (int) 延時自動關閉彈出框 0表示不自動關閉。

drag : true (boolean) 點擊標題欄是否容許拖動。

display : true (boolean) 是否在建立後當即顯示。

width : '' (int) 彈出框內容區域寬度， ''表示自適應。

height : '' (int) 彈出框內容區域高度， ''表示自適應。

dataEle : '' (object) 彈出框緩存元素，設置此屬性的彈出框只容許同時存在一個。 - 該屬性只能是一個jQuery選擇器或DOM的jQuery對象。

show : ['fadeIn', 'normal'] (array) 彈出層顯示效果參數。 - 此參數第一個元素目前只支持 'show', 'fadeIn', 'slideDown'。 - 此參數第二個元素請參考jQuery中對應的效果參數。

hide : ['fadeOut', 'normal'] (array) 彈出層隱藏效果參數。 - 此參數第一個元素目前只支持 'hide', 'fadeOut', 'slideUp'。 - 此參數第二個元素請參考jQuery中對應的效果參數。

style : 'default' (string) 彈出層主題名稱。

beforeShow : undefined (function) 彈出層顯示前的回調方法。

afterShow : undefined (function) 彈出層顯示後的回調方法。

afterHide : undefined (function) 彈出層隱藏後的回調方法。

beforeUnload : undefined (function) 彈出層卸載前的回調方法。

afterDrag : undefined (function) 彈出層拖動中止後的回調方法。

彈出層調用方法 (Method)

$.ThinkBox(content, [options]) 這是一個插件底層基礎方法，用於建立一個彈出層。如下全部擴展方法都是調用此方法來建立彈出層。 content – 彈出層展現的內容，能夠是一個HTML片斷或DOM元素或jQuery選擇器。 options – 可選。彈出層的配置項，默認值參考插件默認配置項 (options)。 Example-1 Example-2 Example-3 Example-4 Example-5

$.ThinkBox.load(url, [opt]) 加載外部內容並經過彈出層展現。 url – 加載外部內容的URL。 opt – 可選。彈出層標準配置項和私有配置項，標準配置項默認值參考插件默認配置項 (options)。 Example-6 私有配置 類型 默認值 說明 type string GET $.ajax() 的 type 參數，加載外部文件的請求方式 dataType string text $.ajax() 的 dataType 參數，加載外部文件的返回值類型 cache boolean false $.ajax() 的 cache 參數，加載外部文件時是否啓用緩存 parseData function undefined 外部數據的解析函數，當加載的數據須要進行處理後再顯示時，這個方法則很是有用

$.ThinkBox.iframe(url, [opt]) 用iframe加載外部內容並經過彈出層展現。此方法能夠用於加載跨域內容。 url – 加載外部內容的URL。 opt – 可選。彈出層標準配置項和私有配置項，標準配置項默認值參考插件默認配置項 (options)。 Example-7 私有配置 類型 默認值 說明 scrolling string no 是否顯示 iframe 的滾動條

$.ThinkBox.tips(msg, type, [opt]) 顯示提示信息。 - 別名： $.ThinkBox.success(msg, [opt])，顯示成功提示信息。 – 別名： $.ThinkBox.error(msg, [opt])，顯示錯誤提示信息。 – 別名： $.ThinkBox.loading(msg, [opt])，顯示loading提示信息。 msg – 提示信息內容。純文本。 type – 提示信息類型，可選值有 0|error, 1|success, loading opt – 可選。彈出層標準配置項，標準配置項默認值參考插件默認配置項 (options)。 Example-8

$.ThinkBox.msg(msg, [opt]) 顯示頁面消息框。 msg – 消息內容，和$.ThinkBox()的content參數相同。 opt – 可選。彈出層標準配置項，標準配置項默認值參考插件默認配置項 (options)。 Example-9

$.ThinkBox.alert(msg, [opt]) 彈出警告提示框。 msg – 提示內容，純文本。 opt – 可選。彈出層標準配置項和私有配置項，標準配置項默認值參考插件默認配置項 (options)。 Example-10 私有配置 類型 默認值 說明 okValue string 肯定 肯定按鈕顯示文字 okClick function undefined 點擊肯定按鈕後的回調方法

$.ThinkBox.confirm(msg, [opt]) 彈出確認提示框。 msg – 提示內容，純文本。 opt – 可選。彈出層標準配置項和私有配置項，標準配置項默認值參考插件默認配置項 (options)。 Example-11 私有配置 類型 默認值 說明 okValue string 肯定 肯定按鈕顯示文字 okClick function undefined 點擊肯定按鈕後的回調方法 cancelValue string 取消 取消按鈕顯示文字 cancelClick function undefined 點擊取消按鈕後的回調方法

$.ThinkBox.get(selector) 在彈出層裏面獲取當前彈出層對象。 selector – 彈出層內部任意DOM元素選擇器。

$.fn.ThinkBox([opt]) 當前選擇器對象必須含有 href 屬性，href 屬性能夠是一個URL或一個以 # 號開頭的選擇器。 - 當 href 屬性以 # 號開頭是則以彈出層的形式展示對應的ID對象。 - 當 href 屬爲一個URL則用 load 方式加載內容並用彈出層展現。 opt – 可選。彈出層標準配置項和私有配置項，標準配置項默認值參考插件默認配置項 (options)。 Example-12 私有配置 類型 默認值 說明 event string undefined 觸發ThinkBox顯示的事件

$.fn.ThinkBox(‘get’) 獲取當前對象上綁定彈出層對象。若是該對象上未綁定彈出層，則返回 null。

$.fn.ThinkBox(‘show’) 顯示當前對象上綁定的彈出層。

$.fn.ThinkBox(‘hide’) 關閉當前對象上綁定的彈出層。

$.fn.ThinkBox(‘toggle’) 若是當前對象上綁定的彈出層是顯示的則將其關閉，若是當前對象上顯示的彈出層是關閉的則將其顯示。 API方法調用

.show() 顯示關閉的彈出層。此方法能夠顯示建立了沒有顯示的彈出層和顯示後又被關閉的彈出層。 – 該方法不能顯示已經卸載了的彈出層，也就是 unload 屬性爲 true 的彈出層在關閉後不能夠被顯示。 Example-4

.hide() 隱藏顯示的彈出層。

.toggle() 當前彈出層顯示則隱藏它，當前彈出層隱藏則顯示。 – 和 show 方法相同。該方法不能顯示已經卸載了的彈出層，也就是 unload 屬性爲 true 的彈出層在關閉後不能夠被顯示。

.getContent() 獲取彈出層的內容對象。

.setContent(content) content – 新內容，能夠是一個 jQuery 選擇器或DOM對象或 HTML 片斷。 動態改變彈出層的內容。

.getSize() 獲取彈出層當前內容區域的尺寸。

.setSize(width, height) width – 新的寬度。 height – 新的高度。 動態改變彈出層內容區域的大小。