首頁 > web前端 > js教程 > 主體

關於jquery.edbox外掛的使用方法

零到壹度
發布: 2018-03-28 16:44:05
原創
1932 人瀏覽過

jquery.edbox.js是一款輕量級的jquery響應式模態視窗外掛。透過這個jquery模態視窗插件,你可以輕鬆的製作出響應式的,帶有動畫效果的,可基於AJAX的模態對話框效果。

它的特點還有:

可以透過CSS來改變模態視窗的樣式。

可以自訂模態視窗的頭部和腳部內容。

可以自訂載入的loading效果。

支援多種格式的內容:HTML,文本,圖片和AJAX內容等。

支援4種alert情境模式:success,info,warning 和 danger。

可自訂開啟和關閉模態視窗的動畫。

支援回呼方法。

 安裝

可以透過npm或yarn來安裝jquery.edbox.js外掛程式。

npm install jquery.edbox

yarn add jquery.edbox                 

 使用方法

在頁面中引入edbox.css檔,jquery和jquery.edbox.js檔。

<link href="dist/edbox.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.edbox.js"></script>
登入後複製

 HTML結構

#最簡單的模態視窗的使用方法是使用一個

來作為模態視窗內容的容器,在它裡面可以放置HTML,文本,圖片和AJAX內容等。

<p id="target">模态窗口内容</p>
登入後複製

然後透過一個超連結或按鈕來觸發模態視窗。

<ahref="#"edbox data-box-target="#target">打开模态窗口</a>
登入後複製


 初始化外掛

#在頁面DOM元素載入完畢之後,透過edbox();方法來初始化此模態窗口插件。

$(&#39;.trigger-link&#39;).edbox();
登入後複製
登入後複製

 模態視窗中載入HTML,圖片和AJAX內容

在模態視窗中載入HTML內容的方法如下:在data -box-html屬性中填寫你的HTML內容即可。

<pid="target"data-box-html="<p class=&#39;example-html&#39;>这是HTML内容</p>" >模态窗口内容</p>
登入後複製
$(&#39;.trigger-link&#39;).edbox();
登入後複製
登入後複製

新增圖片的方法如下:

<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>
登入後複製
$(&#39;.link-image&#39;).edbox({
  image: &#39;curitiba-brazil.jpg&#39;
});
登入後複製

#新增AJAX內容的方法如下:

<!-- 使用 href 或者 data-box-url 属性 -->
<a href="assets/html/curitiba.html" class="link-url">URL load example</a>
登入後複製
$(&#39;.link-url&#39;).edbox({
  //add an extra class to the modal for an especific style
  addClass: &#39;example-url&#39;,
  width: 900
});
登入後複製

 方法

jquery.edbox.js模態視窗外掛程式的可用方法有:

//set edbox for the set of matched elements
$(&#39;.myModalLink&#39;).edbox({ options });
$(&#39;[edbox]&#39;).edbox({ options });
 
//Init without assigning any element
$.edbox({ options });
 
//Make custom settings as defaults
$.edboxSettings({ options });
 
//Close event
$.edbox(&#39;close&#39;);
登入後複製

以上是關於jquery.edbox外掛的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!