前端插件收藏夹

有些插件用了就想不起来了，整理在收藏夹太多太乱，想写点简介也不方便；
曾做了一个类似导航页的单页面，但是维护起来还是太麻烦；
就整理在这篇博客里，会持续更新。

---

一、drag

---

0. 引入

为了做一个可拖拽排序的列表，查找了相关drag插件，比较好用的记录如下。
但其实最后也没有达到理想的效果，Muuri简单易用，拖拽动画等也非常完美，但是不能多选拖动；Multi Drag可多选拖动，但不支持grid布局。
如果有用过或写过同时具备二者优点的插件，还请不吝指点，谢谢。

1. Muuri

• https://haltu.github.io/muuri/
• 它不止是一个拖拽插件，其实它是一个Responsive, sortable, filterable and draggable的grid布局插件
• 常见于模板网站、素材网站等布局方式
• 做可拖拽排序的列表非常好用

2. jquery.dad.js

• GitHub地址：https://github.com/williammustaffa/jquery.dad.js
• 演示地址：https://demo.demohuo.top/jquery/25/2501/demo/index.html
• 简单，够用（拖拽、grid布局、限制方向、指定区域、回调函数）

3. Multi Drag

• http://threedubmedia.com/code/event/drag/demo/multi
• 支持选中后，多个组件同时拖拽
• 缺点：不支持grid布局

---

二、工具栏

---

1. Toolbar.Js

• https://paulkinzett.github.io/toolbar/
• 演示地址：http://www.htmleaf.com/jQuery/Tooltips/jquery-toolbar-js.html （官网演示功能有点问题，无法弹出）
• 实现tooltip风格的toolbars
  

---

三、表格相关

---

1. colResizable - 拖动改变列宽

• http://www.bacubacu.com/colresizable/

实例：
基于colResizable-1.6实现一个表头固定、列宽可调的table

---

四、拖动改变宽度

---

0. 引入

实现一个中间可拖动，改变两侧宽度的两栏布局，比如左侧为菜单，有一个默认宽度，希望能够通过拖动调节。

通常有两种思路：

1. 纯css利用元素的resize特性实现

这个是我查到这篇优质博客之前未曾想到的：纯CSS实现左右拖拽改变布局大小
感觉非常棒，拖动效果非常顺滑，控制最小宽度也非常方便，只是兼容性有待考证。

2. js利用mousedown、mousemove、mouseup事件实现

这个是拿到这个需求后，首先想到的比较直接的思路，在mousedown、mousemove、mouseup事件中调整各个区块的宽度。
都大同小异，因为是汇总贴，不再列出代码，请参考：
实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围
js 实现左侧菜单拖动改变宽度
左右两栏布局右侧自适应+左右拖动改变两栏宽度

---

五、动画

---

1. Animate.css

• https://github.com/daneden/animate.css
• 纯css动画库，可以结合js实现一些非常酷的动画效果，js只需要控制class即可。

---

六、loading

---

1. Preloaders

• https://icons8.com/preloaders
• 除了可以定制下载背景透明的gif动图之外，还可以下载纯css或者纯js的loading效果
  

2. loading.io

• https://loading.io/

---

七、树tree

---

1. zTree

• http://www.treejs.cn/v3/main.php#_zTreeInfo
• 开源免费、配置灵活、文档清晰

2. jsTree

• https://www.jstree.com/

---

八、表单元素

---

1. iCheck

• http://icheck.fronteed.com/

2. bootstrap-datetimepicker(日期时间选择器)

• https://www.bootcss.com/p/bootstrap-datetimepicker/

3. Bootstrap TouchSpin(number类型输入框插件)

• https://www.virtuosoft.eu/code/bootstrap-touchspin/

---

九、轮播图

---

1. swiper

• https://www.swiper.com.cn/
• 倾向于移动端

1. SuperSlide & TouchSlide

• http://www.superslide2.com/index.html
• 包括针对电脑端的SuperSlide和针对移动端的TouchSlide

---

十、右键菜单

---

1. jQuery-contextMenu

• https://swisnl.github.io/jQuery-contextMenu/
• 配置灵活
• Tips
  • 在触发右键菜单之前要执行一些操作的话，在bulid中配置，或者在events.preShow中编写
  • 配置右键菜单单击事件的位置：
    • 直接在options中配置callback
    • 在items中在具体项上配置callback，这里的callback会覆盖options中的callback
  • 配置两种快捷键
    • accesskey: 'V',通过accesskey直接配置单个字母，需要点击右键后点击字母触发，该配置项与isHtmlName冲突
    • 配置与右键菜单无关的Ctrl+C类快捷键，与右键菜单唯一的关联是需要在右键菜单上显示快捷键提醒
      

$.contextMenu({
    selector: '.context-menu-trigger',
    callback: function(itemKey, opt, e) {
        // 可以根据itemKey的不同进行不同操作
        console.log('这是在全局callback触发的，点击的右键菜单项是：' + itemKey);
        console.log('点击右键的元素是：');
        console.log(opt.$trigger);
    },
    build: function($triggerElement, e) {
        // 在触发右键菜单执行一些操作
        // 如：将背景色改为红色
        $triggerElement.css('background', 'red');
        return {
            items: {
                "cut": {
                    name: "剪切",
                    callback: function(itemKey, opt) {
                        //这里的callback会覆盖全局定义的callback
                        console.log('这是在items上callback触发的，点击的右键菜单项是：' + itemKey);
                        console.log('点击右键的元素是：');
                        console.log(opt.$trigger);
                    }
                },
                "sep1": "---",
                "copy": {
                    name: "复制",
                    disabled: function(key, opt) {
                        return true; //会禁用该菜单项，注意true是禁用
                    }
                },
                "paste": {
                    name: "粘贴(V)",
                    accesskey: 'V',
                }
            }
        };
    }

});
$(document).keydown(function(e) {
    if (e.ctrlKey) {
        if (e.keyCode == 86) {
            console.log('通过快捷键触发粘贴事件');
        }
    }
});

设置Ctrl+C类快捷键提醒的方法：
修改jquery.contextMenu.js方法：
在大概1136行createNameNode方法中增加span标签，样式为context-menu-accesskey-right-快捷键字母：

function createNameNode(item) {
    var $name = $('');
    if (item._accesskey) {
        // ...
        // 增加右键菜单右侧快捷键说明
        $('')
            .addClass('context-menu-accesskey-right-' + item._accesskey)
            .appendTo($name);
    } else {
        // ...
    }
    return $name;
}

如果不想完全依赖accesskey的话，可以这样修改：

function createNameNode(item) {
    var $name = $('');
    // ...
    // 增加右键菜单右侧快捷键说明
    if (item._accesskey || item.accesskeyDesc) {
        $('')
            .addClass('context-menu-accesskey-right-'+(item._accesskey || item.accesskeyDesc))
            .appendTo($name);
    }
    return $name;
}

右键菜单定义时这样写即可：

"paste": {
    name: "粘贴",
    accesskeyDesc: 'V',
}

然后定义对应样式，如Ctrl+V样式：

.context-menu-accesskey-right-V:after{
  content: "Ctrl+V";
  float: right;
} 

---

十一、滚动条

---

1. jQuery custom content scroller

• http://manos.malihu.gr/jquery-custom-content-scroller/
• 这个滚动条看起来样式非常丰富；
• 之前项目中一般简单定义就过了，没有使用该插件，收藏起来，需要时再看。

---

十二、二维码/条形码

---

1. QRCode.js

• https://github.com/davidshimjs/qrcodejs
• 够用，但是文档不丰富，连option的详细说明都没看到

2. JsBarcode

• https://github.com/lindell/JsBarcode
• 码型丰富、文档清晰、配置项全面
• 配置项width说明：只能设置single bar的宽度，其实稍微一想发现本来只需要设置single bar的宽度，总宽度自然就固定了，不要试图去设置总宽度，也不要给生成的img、svg、canvas设置宽度，以免造成拉伸模糊甚至无法识别。

---

十三、关于canvas

---

1. html2canvas

• http://html2canvas.hertzen.com/
• 从名称就可以看出，是把html元素转换为canvas绘图，需要的话还可以把canvas转换为img保存，是先屏幕截图效果
• 转换后图片效果可能比较模糊，可以参考【html2canvas.js 图片跨域 生成图片模糊 图片偏移 高清图的问题总结】优化

2. Canvas2image

• https://github.com/SuperAL/canvas2image （能设置保存的文件名）
• https://github.com/hongru/canvas2image （more stars）

---

十四、关于iframe

---

1. iFrame Resizer

• http://davidjbradshaw.github.io/iframe-resizer/
• 这个插件在解决iframe自适应高度方面就非常强大了
• 能动态适应高度，能解决跨越问题
• 需要在iframe所在页面和iframe内部页面分别引入两个js文件，然后调用非常简单，具体方法查看官方文档

---

十五、网页播放器

---

1. html5media

• https://html5media.info/
• html5media是一个JavaScript音频/视频播放器，能够跨浏览器兼容