bootstrap-dialog3插件、jquery.qqface插件、fancybox插件

最新推荐文章于 2020-06-07 22:29:30 发布

ljlhnick

最新推荐文章于 2020-06-07 22:29:30 发布

阅读量183

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ljlhnick/article/details/101012910

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

bootstrap-dialog3

官方文档例子

引入css，js 注意：一定先引入jq以及bootstrap，这是被依赖项

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap3-dialog/1.35.0/css/bootstrap-dialog.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap3-dialog/1.35.0/js/bootstrap-dialog.min.js"></script>

代码

<body>
    <button id="tm" class="btn btn-primary">点我</button>
</body>

<script>
    $(function () {
        $('#tm').on('click', function () {
            BootstrapDialog.show({
                type: BootstrapDialog.TYPE_DANGER,
                message: '你确定要删除吗？',
                size: BootstrapDialog.SIZE_NORMAL,
                buttons: [{
                    label: '确定',
                    action: function (dialog) {
                        dialog.close();
                    }
                }, {
                    label: '取消',
                    action: function (dialog) {
                        dialog.close();
                    }
                }]
            });
        })
    })  
</script>

注意：bootstrap用4版本会报错 Uncaught TypeError: t.querySelector is not a function，改成3版本就好了

默认属性

BootstrapDialog.defaultOptions = {
        type: BootstrapDialog.TYPE_PRIMARY,
        size: BootstrapDialog.SIZE_NORMAL,
        cssClass: '',
        title: null,
        message: null,
        nl2br: true,
        closable: true,
        closeByBackdrop: true,
        closeByKeyboard: true,
        closeIcon: '&#215;',
        spinicon: BootstrapDialog.ICON_SPINNER,
        autodestroy: true,
        draggable: false,
        animate: true,
        description: '',
        tabindex: -1,
        btnsOrder: BootstrapDialog.BUTTONS_ORDER_CANCEL_OK
    };

jquery.qqface

https://github.com/kyo4311/jquery.qqface

引入jquery.qqface.js 比较难找cdn资源，可以本地引入

代码

<div>
     <textarea id="liveChatContent" spellcheck="false"></textarea>
</div>
<a href="javascript:;" id="face">表情</a>

$.qqface({
     imgPath: 'gif/',  /图片文件夹
     textarea: $('#liveChatContent'),
     handle: $('#face')
 });

效果

文件目录

fancybox插件

引入css,js

<link href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>

代码

<a rel="group" href="./1.png" title="2019/09/19">
   <img src="./1.png" alt="/1.png" width="90" />
 </a>
$("a[rel=group]").fancybox();

效果

ljlhnick

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-dialog3插件、jquery.qqface插件、fancybox插件

bootstrap-dialog3官方文档例子引入css，js 注意：一定先引入jq以及bootstrap，这是被依赖项<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.co...
复制链接

扫一扫

专栏目录