<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/Source/jBox.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/StephanWagner/[email protected]/Source/jBox.css" rel="stylesheet">
您可以立即爲jBox設置選項，或者在使用插件時設置第二個參數：
var options = {
title: 'My title',
content: 'My content'
};
new jBox(options);
new jBox('Tooltip', options);
jBox附帶默認插件 Tooltip， Mouse和 Modal。
此外，您還可以包含插件 確認， 通知和 圖像。
一，屬性
ID
ID string 選擇一個唯一的id，否則jBox會爲你設置一個（jBox1，jBox2，...）
Dimensions
width
height auto, integer 內容區域的寬度和高度
minWidth
minHeight integer 內容區域的最小寬度和高度
maxWidth
maxHeight integer 內容區域的最大寬度和高度
responsiveWidth
responsiveHeight boolean 調整寬度和高度以適合視口
responsiveMinWidth
responsiveMinHeight integer 不要將寬度或高度調整到此值以下（以像素爲單位）
Attaching jBox
attach jQuery selector 用於打開和關閉jBox的元素的jQuery選擇器，例如'.tooltip'
trigger click,
mouseenter,
touchclick 定義jBox在與附加元素交互時打開或關閉的事件
preventDefault boolean 打開jBox時防止默認事件，例如，不要在鏈接中跟隨href
Content
content string,
jQuery element 設置jBox的內容。您可以使用jQuery元素追加元素（將CSS樣式顯示設置爲none，以便元素不會顯示在您的頁面上）
getContent string 在jBox打開時從屬性獲取內容，例如'data-content'。使用'html'將附加元素HTML作爲內容
title string 爲jBox添加標題
getTitle string jBox打開時從屬性中獲取標題，例如'data-title'
footer string 在jBox中添加頁腳
isolateScroll boolean 隔離滾動到內容容器
AJAX
ajax：{
url：null，
data：''，
} 設置URL時，jBox在打開時發出AJAX請求。您可以添加任何jQuery ajax選項，例如beforeSend，complete，success等。
↳url string 發送AJAX請求的URL
↳data string, object 要使用您的AJAX請求發送的數據，例如{id：82，limit：10}
↳reload boolean, strict jBox打開時重新發送AJAX請求。使用true僅對每個元素髮送一次AJAX請求調用，或者每次jBox打開時發送'strict'重新發送
↳getURL string 源元素中AJAX請求將查找URL的屬性，例如'data-url'
↳getData string 源元素中AJAX請求將查找數據的屬性，例如'data-ajax'
↳setContent boolean 當AJAX請求完成時，自動將響應設置爲新內容
↳spinner boolean, string 隱藏當前內容並在加載時添加微調器。您可以傳遞HTML內容來添加自己的微調器，例如spinner：'<div class =“mySpinner”> </ div>'
↳spinnerDelay integer 等待微調器出現的毫秒數
↳spinnerReposition boolean 添加或刪除微調器時重新定位jBox
Position
target jQuery selector jQuery的jQuery選擇器將打開jBox。如果沒有找到元素，jBox將使用附加元素作爲目標
position object 設置具有水平位置x和垂直位置y的對象，例如{x：'right'， y：'center'}。您還可以設置絕對位置的數字
outside x，y，xy 將jBox移動到目標元素之外
offset integer, object 抵消最終位置。您可以使用對象爲x和y設置不同的值，例如{x：15，y：-10}
attributes object 定義應使用哪些CSS屬性，例如{x：'right'， y：'bottom'}。請注意，右側和底部只能在您的位置值爲整數時使用，例如{x：300，y：20}
fixed boolean 滾動時，您的jBox將保持在位
adjustPosition flip, move,
boolean 如果空間不足，請調整jBoxes位置。值'flip'將jBox定位在相反的外部位置，值'move'僅適用於指針。設置爲true以同時使用兩者。此選項會覆蓋重新定位選項
adjustTracker boolean 默認情況下，jBox在打開時或窗口大小更改時調整其位置，設置爲true以在滾動時調整
adjustDistance integer, object 調整時到視口邊緣的最小距離。使用對象設置不同的值，例如{top：50， right：5，bottom：20， left：5}
reposition boolean 窗口大小更改時計算新位置
repositionOnOpen boolean 每次jBox打開時計算新位置（而不是僅在第一次打開時計算）
repositionOnContent boolean 使用.setContent（）或.setTitle（）更改內容時計算新位置
Pointer
pointer boolean,
left, right,
top, bottom,
center 您的指針將始終指向目標元素，因此外部選項需要爲“x”或“y”。默認情況下，指針居中，設置一個位置以將其移動到任何一側。您還可以添加偏移量，例如“left：30”或“center：-20”
pointTo target,
left, right,
top, bottom 除了'target'之外的其他設置將添加指針，即使沒有設置或找到目標元素
Animations
fade integer 淡入淡出持續時間（以ms爲單位），設置爲0或false以禁用
animation object,
zoomIn, zoomOut,
pulse, move,
slide, flip,
tada jBox打開或關閉時的動畫。
要使用不同的動畫進行打開和關閉，請使用對象：{open：'tada'， close：'flip'}。您還可以設置移動方向和幻燈片動畫：{open：'move：right'， close：'slide：top'}
Appearance
theme string 設置一個jBox主題類，例如'TooltipDark'
addClass string 將類添加到包裝器
overlay boolean 添加疊加層以在jBox打開時隱藏頁面內容（使用CSS調整顏色和不透明度）
zIndex integer 使用高z-index
Delays
delayOpen integer 延遲開啓毫秒。請注意，如果您的jBox沒有完成關閉，則會忽略延遲
delayClose integer 延遲以毫秒結束。注意，總是有一個至少10毫秒的關閉延遲，以確保jBox在立即打開時不會關閉
Closing jBox
closeOnEsc boolean 按[esc]鍵關閉jBox
closeOnClick boolean, body,
box, overlay 用鼠標點擊關閉jBox：當你點擊任何地方時關閉true，點擊疊加時'疊加'，點擊jBox本身時'box'，當你點擊jBox時點擊'body'
closeOnMouseleave boolean 當鼠標離開jBox區域或附加元素的區域時關閉jBox
closeButton boolean, overlay,
title, box 在jBox中添加一個關閉按鈕。如果可以找到任何這些元素，則值true將按順序將按鈕添加到overlay，title或jBox本身
Other options
appendTo jQuery element 您的jBox將附加到的元素。除$（'body'）之外的任何其他元素僅對固定位置或位置值爲數字有用
createOnInit boolean 創建jBox並在初始化時使其在DOM中可用，否則它將在首次打開時創建
blockScroll boolean 當jBox打開時阻止滾動
draggable boolean, title,
jQuery selector 使您的jBox可拖動。使用title或提供jBox的任何子元素的選擇器作爲句柄
的dragover boolean 當您有多個可拖動的jBox時，您選擇的jBox將始終移動到其他jBox上
autoClose integer, boolean jBox打開後自動關閉的時間（以毫秒爲單位）
Audio
preloadAudio boolean, array 預加載選項音頻中設置的音頻文件。您還可以預加載其他音頻文件，例如['src_to_file.mp3'，'src_to_file.ogg']
audio string, object jBox打開時要播放的音頻文件的URL。設置沒有文件擴展名的URL，jBox將查找.mp3和.ogg文件。要在jBox關閉時播放音頻，請使用一個對象，例如{open：'src_to_audio1'，close：'src_to_audio2'}
volume integer, object 音量的百分比。要打開和關閉不同的卷，請使用對象，例如{open：75，close：100}
Events
OnInit function jBox初始化時觸發。請注意，您可以使用此事件的功能，它指的是你的jBox對象，如OnInit的：函數（）{ this.open（）; }
onAttach function 當jBox附加到元素時觸發
onPosition function jBox定位時觸發
onCreated function 在jBox創建並且在DOM中可用時觸發
OnOpen function jBox打開時觸發
OnClose function jBox關閉時被觸發
onCloseComplete function 當jBox完全關閉時（褪色完成時）觸發
Additional options for plugin Confirm
confirmButton string 提交按鈕的文本
cancelButton string 取消按鈕的文本
confirm function 單擊提交按鈕時要執行的功能。默認情況下，如果找到，jBox將按順序使用onclick或href屬性
cancel function 單擊取消按鈕時執行的功能
closeOnConfirm boolean 當用戶單擊確認按鈕時關閉jBox
Additional options for plugin Image
src string 獲取圖像源的屬性，例如鏈接的'href'：<a href="/path/image.jpg">
gallery string 用於設置圖庫的屬性，例如'data-jbox-gallery'。更改此選項時，請確保選中附加選項，因爲jBox圖像默認附加到[data-jbox-gallery]。
imageLabel string jBox從中獲取圖像標籤的屬性，例如'title'
imageFade integer 圖像的淡入淡出持續時間，單位爲毫秒
imageSize cover, contain,
auto, string 如何顯示圖像。使用背景位置的 CSS樣式，例如'cover'，' 50％auto'
imageCounter boolean 設置爲true以添加圖像計數器，例如4/20
imageCounterSeparator string 用於將當前圖像編號與所有圖像編號分開的HTML，例如'/'或'of'
Additional options for plugin Notice
color black, red, green,
blue, yellow 爲通知添加顏色
stack boolean 設置爲false以禁用通知堆疊
stackSpacing integer 通知堆疊時的間距
二，方法
在jBox上使用方法的最佳方法是將jBox保存在變量中：
var myModal = new jBox('Modal');
myModal.setTitle('My Title');
myModal.setContent('My Content');
myModal.open();
所有方法都返回jBox實例，因此您可以鏈接它們：
var myModal = new jBox('Modal').setTitle('My Title').setContent('My Content').open();
Open and close
.open（options） 打開jBox。您可以使用選項目標設置新目標，例如{target： $（'＃newTarget'）}。如果你的jBox有一個開啓延遲，你可以使用ignoreDelay選項強制它立即打開，例如{ignoreDelay： true}。要在打開jBox時設置新的AJAX內容，可以傳遞一個AJAX對象，例如{ajax：{url：'http： //ajaxresponse.com '}}
.close（options） 關閉jBox。如果你的jBox有一個關閉延遲，你可以使用ignoreDelay選項強制它立即關閉，例如{ignoreDelay：true}
.toggle（options） 調用方法打開時jBox被關閉，關閉時，它是開放的
Dimensions
.setWidth（value）
.setHeight（value） 設置內容容器的CSS寬度和高度。可選你可以設置第二個參數來禁用jBox的自動重新定位，例如.setWidth（200，true）
Attaching jBox
.attach（jQuery selector） 將jBox附加到元素。提供jQuery選擇器是可選的。如果您沒有告訴此方法使用哪些元素，它將使用選項中定義的選擇器。當在運行時創建應該打開或關閉jBox的元素時，應該調用此方法
.detach（jQuery selector） 從元素中刪除打開和關閉功能
Content
.setTitle（title） 設置jBox的標題。如果還沒有標題，則會創建它。如果尺寸改變，jBox將重新定位，禁用，傳遞true作爲第二個參數：.setTitle（'myTitle'，true）
.setContent（content） 設置jBox的內容。您可以使用jQuery元素追加元素（將CSS樣式顯示設置爲none，這樣元素就不會顯示在您的頁面上）。如果維度發生變化，jBox將重新定位，禁用，將第二個參數傳遞爲真：.setContent（'myContent'，true）
.ajax（options） 重新加載AJAX請求。您可以傳遞選項網址和數據，例如{url： '/ example.php'， data：'id = 82'}或任何jQuery ajax選項
Audio
.audio（url, volume） 播放音頻文件。不要添加文件擴展名，jBox會查找.mp3和.ogg文件
Position
.position（options） 重新計算你的jBoxes位置。您可以使用選項目標設置新目標，例如{target： $（'＃newTarget'）}
Animation
.animate（animation, options） 您的jBox或任何其他元素的動畫。你可以使用動畫 'tada'， 'tadaSmall'， 'flash'， 'shake'， 'pulseUp'，'pulseDown'， 'popIn'， 'popOut'， 'fadeIn'， 'fadeOut'， 'slideUp'， ' slideRight'， 'slideLeft'和'slideDown'。動畫方法獨立於選項動畫。默認情況下，此方法將爲jBox包裝器設置動畫，{element：$（'＃animateMe'）}。要在動畫結束時執行一個函數，請使用選項complete，例如{complete：function（）{$（'＃animateMe'）。remove（）; }}
Disable and enable
.disable（） 禁用您的jBox，在啓用之前您將無法打開或關閉它
.enable（） 啓用您的jBox，以便您可以再次關閉並打開它
Visibility
.hide() 禁用和隱藏jBox。這不會影響疊加
.show() 再次啓用並顯示您的jBox
Destroy jBox
.destroy() 銷燬你的jBox並將其從DOM中刪除
本文所有內容，均翻譯與官方文檔。 權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/echizao1839/article/details/82344510