前端插件收藏夹

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 = $('<span></span>');
    if (item._accesskey) {
        // ...
        // 增加右键菜单右侧快捷键说明
        $('<span></span>')
            .addClass('context-menu-accesskey-right-' + item._accesskey)
            .appendTo($name);
    } else {
        // ...
    }
    return $name;
}

然后定义对应样式，如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设置宽度，以免造成拉伸模糊甚至无法识别。

前端插件

一、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

猜你喜欢