jBox屬性與方法
阿新 • • 發佈：2018-12-30
<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中刪除 |
本文所有內容，均翻譯與官方文件。若有疑問聯絡qq:35290838