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

零到壹度
Lepaskan: 2018-03-28 16:44:05
asal
1951 orang telah melayarinya

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>
Salin selepas log masuk

HTML结构

最简单的模态窗口的使用方法是使用一个

来作为模态窗口内容的容器,在它里面可以放置HTML,文本,图片和AJAX内容等。

<p id="target">模态窗口内容</p>
Salin selepas log masuk

然后通过一个超链接或按钮来触发模态窗口。

<ahref="#"edbox data-box-target="#target">打开模态窗口</a>
Salin selepas log masuk


初始化插件

在页面DOM元素加载完毕之后,通过edbox();方法来初始化该模态窗口插件。

$(&#39;.trigger-link&#39;).edbox();
Salin selepas log masuk
Salin selepas log masuk

模态窗口中加载HTML,图片和AJAX内容

在模态窗口中加载HTML内容的方法如下:在data-box-html属性中填写你的HTML内容即可。

<pid="target"data-box-html="<p class=&#39;example-html&#39;>这是HTML内容</p>" >模态窗口内容</p>
Salin selepas log masuk
$(&#39;.trigger-link&#39;).edbox();
Salin selepas log masuk
Salin selepas log masuk

添加图片的方法如下:

<a href="#" class="link-image" data-box-header="Curitiba - Parana - Brazil">Image load example</a>
Salin selepas log masuk
$(&#39;.link-image&#39;).edbox({
  image: &#39;curitiba-brazil.jpg&#39;
});
Salin selepas log masuk

添加AJAX内容的方法如下:

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

方法

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;);
Salin selepas log masuk

Atas ialah kandungan terperinci 关于jquery.edbox插件的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan