前端插件收藏夹

「爱情、让人受尽委屈。」 2024-04-18 13:47 114阅读 0赞

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

### 前端插件 ###

*   *  一、drag
     *   *   *  0. 引入
             *  1. Muuri
             *  2. jquery.dad.js
             *  3. Multi Drag
     *  二、工具栏
     *   *   *  1. Toolbar.Js
     *  三、表格相关
     *   *   *  1. colResizable - 拖动改变列宽
     *  四、拖动改变宽度
     *   *   *  0. 引入
             *  1. 纯css利用元素的resize特性实现
             *  2. js利用mousedown、mousemove、mouseup事件实现
     *  五、动画
     *   *   *  1. Animate.css
     *  六、loading
     *   *   *  1. Preloaders
             *  2. loading.io
     *  七、树tree
     *   *   *  1. zTree
             *  2. jsTree
     *  八、表单元素
     *   *   *  1. iCheck
             *  2. bootstrap-datetimepicker(日期时间选择器)
             *  3. Bootstrap TouchSpin(number类型输入框插件)
     *  九、轮播图
     *   *   *  1. swiper
             *  1. SuperSlide & TouchSlide
     *  十、右键菜单
     *   *   *  1. jQuery-contextMenu
     *  十一、滚动条
     *   *   *  1. jQuery custom content scroller
     *  十二、二维码/条形码
     *   *   *  1. QRCode.js
             *  2. JsBarcode
     *  十三、关于canvas
     *   *   *  1. html2canvas
             *  2. Canvas2image
     *  十四、关于iframe
     *   *   *  1. iFrame Resizer
     *  十五、网页播放器
     *   *   *  1. html5media

--------------------

## 一、drag ##

--------------------

#### 0. 引入 ####

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

#### 1. Muuri ####

*  [https://haltu.github.io/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_github.com_williammustaffa_jquery.dad.js]
 *  演示地址：[https://demo.demohuo.top/jquery/25/2501/demo/index.html][https_demo.demohuo.top_jquery_25_2501_demo_index.html]
 *  简单，够用（拖拽、grid布局、限制方向、指定区域、回调函数）

#### 3. Multi Drag ####

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

--------------------

## 二、工具栏 ##

--------------------

#### 1. Toolbar.Js ####

*  [https://paulkinzett.github.io/toolbar/][https_paulkinzett.github.io_toolbar]
 *  演示地址：[http://www.htmleaf.com/jQuery/Tooltips/jquery-toolbar-js.html][http_www.htmleaf.com_jQuery_Tooltips_jquery-toolbar-js.html] （官网演示功能有点问题，无法弹出）
 *  实现tooltip风格的toolbars  
    ![在这里插入图片描述][20190908000013178.png]

--------------------

## 三、表格相关 ##

--------------------

#### 1. colResizable - 拖动改变列宽 ####

*  [http://www.bacubacu.com/colresizable/][http_www.bacubacu.com_colresizable]

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

--------------------

## 四、拖动改变宽度 ##

--------------------

#### 0. 引入 ####

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

通常有两种思路：

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

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

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

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

--------------------

## 五、动画 ##

--------------------

#### 1. Animate.css ####

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

--------------------

## 六、loading ##

--------------------

#### 1. Preloaders ####

*  [https://icons8.com/preloaders][https_icons8.com_preloaders]
 *  除了可以定制下载背景透明的gif动图之外，还可以下载纯css或者纯js的loading效果  
    ![在这里插入图片描述][20190908122359348.png]

#### 2. loading.io ####

*  [https://loading.io/][https_loading.io]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]

--------------------

## 七、树tree ##

--------------------

#### 1. zTree ####

*  [http://www.treejs.cn/v3/main.php\#\_zTreeInfo][http_www.treejs.cn_v3_main.php_zTreeInfo]
 *  开源免费、配置灵活、文档清晰

#### 2. jsTree ####

*  [https://www.jstree.com/][https_www.jstree.com]

--------------------

## 八、表单元素 ##

--------------------

#### 1. iCheck ####

*  [http://icheck.fronteed.com/][http_icheck.fronteed.com]

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

*  [https://www.bootcss.com/p/bootstrap-datetimepicker/][https_www.bootcss.com_p_bootstrap-datetimepicker]

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

*  [https://www.virtuosoft.eu/code/bootstrap-touchspin/][https_www.virtuosoft.eu_code_bootstrap-touchspin]

--------------------

## 九、轮播图 ##

--------------------

#### 1. swiper ####

*  [https://www.swiper.com.cn/][https_www.swiper.com.cn]
 *  倾向于移动端

#### 1. SuperSlide & TouchSlide ####

*  [http://www.superslide2.com/index.html][http_www.superslide2.com_index.html]
 *  包括针对电脑端的SuperSlide和针对移动端的TouchSlide

--------------------

## 十、右键菜单 ##

--------------------

#### 1. jQuery-contextMenu ####

*  [https://swisnl.github.io/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类快捷键，与右键菜单唯一的关联是需要在右键菜单上显示快捷键提醒  
            ![在这里插入图片描述][20190913103411948.png]

$.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-快捷键字母`：

如果不想完全依赖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/][http_manos.malihu.gr_jquery-custom-content-scroller]
 *  这个滚动条看起来样式非常丰富；
 *  之前项目中一般简单定义就过了，没有使用该插件，收藏起来，需要时再看。

--------------------

## 十二、二维码/条形码 ##

--------------------

#### 1. QRCode.js ####

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

#### 2. JsBarcode ####

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

--------------------

## 十三、关于canvas ##

--------------------

#### 1. html2canvas ####

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

#### 2. Canvas2image ####

*  [https://github.com/SuperAL/canvas2image][https_github.com_SuperAL_canvas2image] （能设置保存的文件名）
 *  [https://github.com/hongru/canvas2image][https_github.com_hongru_canvas2image] （more stars）

--------------------

## 十四、关于iframe ##

--------------------

#### 1. iFrame Resizer ####

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

--------------------

## 十五、网页播放器 ##

--------------------

#### 1. html5media ####

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

[https_haltu.github.io_muuri]: https://haltu.github.io/muuri/
[https_github.com_williammustaffa_jquery.dad.js]: https://github.com/williammustaffa/jquery.dad.js
[https_demo.demohuo.top_jquery_25_2501_demo_index.html]: https://demo.demohuo.top/jquery/25/2501/demo/index.html
[http_threedubmedia.com_code_event_drag_demo_multi]: http://threedubmedia.com/code/event/drag/demo/multi
[https_paulkinzett.github.io_toolbar]: https://paulkinzett.github.io/toolbar/
[http_www.htmleaf.com_jQuery_Tooltips_jquery-toolbar-js.html]: http://www.htmleaf.com/jQuery/Tooltips/jquery-toolbar-js.html
[20190908000013178.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6b5509df1ba2445a9f86070971ef2e83.png
[http_www.bacubacu.com_colresizable]: http://www.bacubacu.com/colresizable/
[colResizable-1.6_table]: https://blog.csdn.net/fukaiit/article/details/102492232
[CSS]: https://www.imooc.com/article/289595
[div]: https://www.jianshu.com/p/014380e6ae50
[js]: https://blog.csdn.net/yun_hou/article/details/87803705
[Link 1]: https://www.jb51.net/css/88146.html
[https_github.com_daneden_animate.css]: https://github.com/daneden/animate.css
[https_icons8.com_preloaders]: https://icons8.com/preloaders
[20190908122359348.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a9bc49867a444e208951f41b1416330e.png
[https_loading.io]: https://loading.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1a2FpaXQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5f9b3c56f5e746148607cf79e9202e11.png
[http_www.treejs.cn_v3_main.php_zTreeInfo]: http://www.treejs.cn/v3/main.php#_zTreeInfo
[https_www.jstree.com]: https://www.jstree.com/
[http_icheck.fronteed.com]: http://icheck.fronteed.com/
[https_www.bootcss.com_p_bootstrap-datetimepicker]: https://www.bootcss.com/p/bootstrap-datetimepicker/
[https_www.virtuosoft.eu_code_bootstrap-touchspin]: https://www.virtuosoft.eu/code/bootstrap-touchspin/
[https_www.swiper.com.cn]: https://www.swiper.com.cn/
[http_www.superslide2.com_index.html]: http://www.superslide2.com/index.html
[https_swisnl.github.io_jQuery-contextMenu]: https://swisnl.github.io/jQuery-contextMenu/
[20190913103411948.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/863f7783a91f4865ac206c8811a37132.png
[http_manos.malihu.gr_jquery-custom-content-scroller]: http://manos.malihu.gr/jquery-custom-content-scroller/
[https_github.com_davidshimjs_qrcodejs]: https://github.com/davidshimjs/qrcodejs
[https_github.com_lindell_JsBarcode]: https://github.com/lindell/JsBarcode
[http_html2canvas.hertzen.com]: http://html2canvas.hertzen.com/
[html2canvas.js _ _ _]: https://juejin.im/post/5b74ebe7518825293b19cf1f
[https_github.com_SuperAL_canvas2image]: https://github.com/SuperAL/canvas2image
[https_github.com_hongru_canvas2image]: https://github.com/hongru/canvas2image
[http_davidjbradshaw.github.io_iframe-resizer]: http://davidjbradshaw.github.io/iframe-resizer/
[https_html5media.info]: https://html5media.info/