关于jquery.edbox插件的使用方法
程序员文章站
2023-12-28 17:01:40
...
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');
以上就是关于jquery.edbox插件的使用方法的详细内容,更多请关注其它相关文章!
推荐阅读
-
jquery插件lazyload.js延迟加载图片的使用方法
-
jQuery ui插件的使用方法代码实例
-
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
-
mysql中关于Myisam_recover自动修复的使用方法_MySQL
-
关于一次上传多个图片的插件有没有?解决方法
-
文本jquery.dotdotdot.js插件的使用方法详解
-
MySql5.6使用validate password 插件加强密码强度的安装及使用方法
-
MyBatis_Generator插件的安装以及简单使用方法(图解)
-
关于JAVA中this的使用方法小结
-
详述IntelliJ IDEA插件的安装及使用方法(图解)