關于jquery.edbox插件的使用方法

來源：懂視網責編：小采時間：2020-11-27 19:58:03

關于jquery.edbox插件的使用方法

關于jquery.edbox插件的使用方法:jquery.edbox.js是一款輕量級的jquery響應式模態窗口插件。通過該jquery模態窗口插件，你可以輕松的制作出響應式的，帶動畫效果的，可基于AJAX的模態對話框效果。它的特點還有：可以通過CSS來改變模態窗口的樣式。可以自定義模態窗口的頭部和腳部內容?？梢宰?/div>

推薦度：

點擊下載本文 文檔為doc格式

導讀關于jquery.edbox插件的使用方法:jquery.edbox.js是一款輕量級的jquery響應式模態窗口插件。通過該jquery模態窗口插件，你可以輕松的制作出響應式的，帶動畫效果的，可基于AJAX的模態對話框效果。它的特點還有：可以通過CSS來改變模態窗口的樣式。可以自定義模態窗口的頭部和腳部內容?？梢宰?/div>

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結構

最簡單的模態窗口的使用方法是使用一個<p>來作為模態窗口內容的容器，在它里面可以放置HTML，文本，圖片和AJAX內容等。

<p id="target">模態窗口內容</p>

然后通過一個超鏈接或按鈕來觸發模態窗口。

<ahref="#"edbox data-box-target="#target">打開模態窗口</a>

初始化插件

在頁面DOM元素加載完畢之后，通過edbox();方法來初始化該模態窗口插件。

$('.trigger-link').edbox();

模態窗口中加載HTML，圖片和AJAX內容

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

<pid="target"data-box-html="<p class='example-html'>這是HTML內容</p>" >模態窗口內容</p>

$('.trigger-link').edbox();

添加圖片的方法如下：

<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>

$('.link-image').edbox({
 image: 'curitiba-brazil.jpg'
});

添加AJAX內容的方法如下：

<!-- 使用 href 或者 data-box-url 屬性 -->
<a href="assets/html/curitiba.html" class="link-url">URL load example</a>

$('.link-url').edbox({
 //add an extra class to the modal for an especific style
 addClass: 'example-url',
 width: 900
});

方法

jquery.edbox.js模態窗口插件的可用方法有：

//set edbox for the set of matched elements
$('.myModalLink').edbox({ options });
$('[edbox]').edbox({ options });
 
//Init without assigning any element
$.edbox({ options });
 
//Make custom settings as defaults
$.edboxSettings({ options });
 
//Close event
$.edbox('close');

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com