winney

It is never too old to learn.

0%
winney

前端插件相关笔记

发表于 更新于 分类于

前端插件

前端模板

Jquery Upload File

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link rel="stylesheet" type="text/css" href="js/jQuery-File-Upload-9.18.0/css/jquery.fileupload.css" />

<script src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/jquery.fileupload.js"></script>
<input type="hidden" name="game_apk" />
<span class="btn btn-success fileinput-button">
	<i class="fa fa-plus"></i>
	<span>请上传apk文件</span>
 	 <input id="fileupload_1" type="file" name="files[]" multiple>
</span>
<div id="progress"></div>
$('#fileupload_1').fileupload({
    url: "上传文件请求地址",
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
          $(':input[name=game_apk]').val(decodeURIComponent(file.url));
        });
    },
    fail: function (e, data) {
        console.log("上传失败")
    },
    progressall: function (e, data) {
        console.log(progress);
        $("#progress").html(progress + '%');
    }
});

jquery.copy.js

点击复制内容移动端全兼容(专治各种移动端浏览器)

  • 单页面一个复制
1
2
3
4
5
6
7
8
<button id="copy">复制链接</button>
$.copy({
    // imgUrl:"success-tips.png",   // 分享图标地址
    text:"复制成功", //分享提示文案
    copyUrl:"复制的内容/链接",   // 自定义复制链接地址
    tipTime:2000, 	// 分享提示消失时间
    copyId:"#copy"	// 复制按钮id
});
  • 单页面多个复制链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var data = [
    { "url": "www.baidu.com" },
    { "url": "www.qq.com" },
    { "url": "www.163.com" }
];

$.each(data,function(i,item){
    $("body").append('<button id="copy'+i+'">复制链接</button>');
    $.copy({
        // imgUrl:"success-tips.png",  // 分享图标地址
        text:"复制成功",  // 分享提示文案
        copyUrl:item.url,  // 自定义复制链接地址
        tipTime:2000,  // 分享提示消失时间
        copyId:"#copy"+i  // 复制按钮id
    });
});

mobileSelect.js-多级联动下拉菜单

mobileSelect.js-github

datetimepicker多次点击input日期选择器不显示

遇到datetimepicker多次（包括第二次点击）点击input框时日期选择器不显示，需要使用鼠标监听触发：

1
2
3
4
5
/*点方input框时加租监听毒件*/
document.getElementsByName('input的name名称')[0].addEventListener('click',myfunc)
function myfunc(e){
	e.currentTarget.blur();
}

以上这段代码必须放在datetimepicker方法的后面。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//日历
var startDate = $('#startDate').fdatepicker({
	format: "yyyy-mm-dd",
	todayBtn: true
}).on('changeDate', function (ev){
	startDate.hide();
	$('#endDate')[0].focus();
}).data('datepicker');

var endDate = $('#endDate').fdatepicker({
	format: "yyyy-mm-dd",
	todayBtn: true,
}).on('changeDate', function (ev){
	endDate.hide();
}).data('datepicker');

//解决输入框点击多次（包括两次）不显示的问题
document.getElementById('startDate').addEventListener('click',myfunc);
document.getElementById('endDate').addEventListener('click',myfunc);
function myfunc(e){
	e.currentTarget.blur();
}

swiper

轮播图由两层效果改为三层
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 加上这个样式，控制偏移量
<style>
    #certify .swiper-slide.swiper-slide-prev{
        transform: translateX(480px) scale(0.8) !important;
    }
    #certify .swiper-slide.swiper-slide-next{
        transform: translateX(-480px) scale(0.8) !important;
    }
    #certify .swiper-slide.swiper-slide-next + .swiper-slide{
        transform: translateX(-986px) scale(0.6) !important;
    }
</style>


var certifySwiper = new Swiper('.detail', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    loopedSlides: 5,
    autoplay: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    // pagination: {
    // 	el: '.swiper-pagination',
    // 	clickable: true,
    // },
    on: {
        progress: function (progress) {
            for (i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                modify = 1;
                if (Math.abs(slideProgress) > 1) {
                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                }
                translate = slideProgress * modify * 260 + 'px';
                scale = 1 - Math.abs(slideProgress) / 5;
                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex', zIndex);
                slide.css('opacity', 1);
                if (Math.abs(slideProgress) > 3) {
                    slide.css('opacity', 0);
                }
            }
        },
        setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i)
                slide.transition(transition);
            }
        },
        
        // 加上这段代码
        slideChangeTransitionStart: function() {
            $("#certify  .swiper-slide-prev").prev(".swiper-slide").css({"transform": "translateX(986px) scale(0.6)"});
        },
    }

});

 // 加上这段代码
// 修改样式
$("#certify  .swiper-slide-prev").prev(".swiper-slide").css({"transform": "translateX(986px) scale(0.6)"});

jquery.cityselect.js—城市选择插件—省市联动效果

第74款插件：jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// HTML代码
<div id="city"> 
    <select class="prov"></select>  
    <select class="city" disabled="disabled"></select> 
    <select class="dist" disabled="disabled"></select> 
</div>
// JS和CSS代码 ，请注意这里默认需要把城市数据库 city.min.js 放到 jquery.cityselect.js 所在的数据库中，千万不要丢失！

<script src="./js/jquery.js"></script>
<script src="./js/Plugins/City/jquery.cityselect.js"></script>

<script type="text/javascript">
    $(function(){
        $("#city").citySelect({
            nodata:"none",
            required:false
        }); 
    });
</script>
注意：要配置服务器访问页面，不然city.min.js的获取路径有问题

Bootstrap Multiselect

Bootstrap Multiselect 中文网

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link rel="stylesheet" href="./js/Plugins/bootstrap/css/bootstrap.min.css">
<script src="./js/jquery.js"></script>
<script src="./js/Plugins/bootstrap/js/bootstrap.min.js"></script>

<script src="./js/Plugins/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="./js/Plugins/bootstrap-multiselect/bootstrap-multiselect.css">
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>

CKEditor-富文本编辑器

CKEditor CDN

CKEditor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Distpicker—中国省市区地址三级联动插件

distpicker-github

jQuery中国省市区地址三级联动插件Distpicker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="./js/jquery.js"></script>
<script src="./js/Plugins/distpicker/distpicker.data.js"></script>
<script src="./js/Plugins/distpicker/distpicker.js"></script>
<div data-toggle="distpicker">
  <select data-province="---- 选择省 ----"></select>
  <select data-city="---- 选择市 ----"></select>
  <select data-district="---- 选择区 ----"></select>
</div>
<div id="distpicker1">
  <select></select>
  <select></select>
  <select></select>
</div>

$("#distpicker1").distpicker();

city-picker—地区联动插件

city-picker—github

1
2
3
4
5
6
7
<link rel="stylesheet" href="./js/Plugins/city-picker/city-picker.css">
<script src="./js/jquery.js"></script>
<script src="./js/Plugins/city-picker/city-picker.data.js"></script>
<script src="./js/Plugins/city-picker/city-picker.js"></script>
<div style="position: relative;"><!-- container -->
    <input readonly type="text" data-toggle="city-picker" placeholder="请选择省/市" data-level="city" >
</div>

Web Uploader—现代文件上传组件

zTree— jQuery 树插件

jstree—树插件

Font Awesome—字体图标

fastclick—解决移动端click事件延迟300ms

fastclick-github

jQuery WeUI

swiper

粒子插件–页面特效

Particles
1
npm install particles.js

particles-插件

前端react 粒子特效

particles官网

particles的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

// 在组件外定义下面两个函数
const particlesInit = async (main) => {
  console.log(main);
  await loadFull(main);
};

const particlesLoaded = (container) => {
  console.log(container);
};

// 粒子参数
const options = {
    "background": {
        "color": {
            "value": "#232741"
        },
        "position": "50% 50%",
        "repeat": "no-repeat",
        "size": "cover"
    },
    // 帧数，越低越卡,默认60
    "fpsLimit": 120,
    "fullScreen": {
        "zIndex": 1
    },
    "interactivity": {
        "events": {
            "onClick": {
                "enable": true,
                "mode": "push"
            },
            "onHover": {
                "enable": true,
                "mode": "slow"
            }
        },
        "modes": {
            "push": {
                //点击是添加1个粒子
                "quantity": 3,
            },
            "bubble": {
                "distance": 200,
                "duration": 2,
                "opacity": 0.8,
                "size": 20,
                "divs": {
                    "distance": 200,
                    "duration": 0.4,
                    "mix": false,
                    "selectors": []
                }
            },
            "grab": {
                "distance": 400
            },
            //击退
            "repulse": {
                "divs": {
                    //鼠标移动时排斥粒子的距离
                    "distance": 200,
                    //翻译是持续时间
                    "duration": 0.4,
                    "factor": 100,
                    "speed": 1,
                    "maxSpeed": 50,
                    "easing": "ease-out-quad",
                    "selectors": []
                }
            },
            //缓慢移动
            "slow": {
                //移动速度
                "factor": 2,
                //影响范围
                "radius": 200,
            },
            //吸引
            "attract": {
                "distance": 200,
                "duration": 0.4,
                "easing": "ease-out-quad",
                "factor": 3,
                "maxSpeed": 50,
                "speed": 1

            },
        }
    },
    //  粒子的参数
    "particles": {
        //粒子的颜色
        "color": {
            "value": "#ffffff"
        },
        //是否启动粒子碰撞
        "collisions": {
            "enable": true,
        },
        //粒子之间的线的参数
        "links": {
            "color": {
                "value": "#ffffff"
            },
            "distance": 150,
            "enable": true,
            "warp": true
        },
        "move": {
            "attract": {
                "rotate": {
                    "x": 600,
                    "y": 1200
                }
            },
            "enable": true,
            "outModes": {
                "bottom": "out",
                "left": "out",
                "right": "out",
                "top": "out"
            },
            "speed": 6,
            "warp": true
        },
        "number": {
            "density": {
                "enable": true
            },
            //初始粒子数
            "value": 40
        },
        //透明度
        "opacity": {
            "value": 0.5,
            "animation": {
                "speed": 3,
                "minimumValue": 0.1
            }
        },
        //大小
        "size": {
            "random": {
                "enable": true
            },
            "value": {
                "min": 1,
                "max": 3
            },
            "animation": {
                "speed": 20,
                "minimumValue": 0.1
            }
        }
    }
}


{/* 粒子插件 */}
<Particles
  id="tsparticles"
  init={particlesInit}
  loaded={particlesLoaded}
  options={options}
/>

clipboard.js-复制功能

1
2
3
4
5
var clipboard = new ClipboardJS(".copy-btn");
clipboard.on('success', function(e) {
    layer.msg('复制成功', {id: 'clipboard', time: 1000});
    e.clearSelection();
});

Clipboard

模拟环形进度条

circle-progress.js

1
2
3
4
5
6
7
8
9
// 创建模拟环形进度条
// 导出文件过程中-网络请求卡顿/接口pending状态下的交互效果（假进度-只提供用户交互）
var canvas = new EnableCircle({
    id:'le-canvas',		// 被渲染元素的canvas的ID
    value: 96,			// 最大值
    target: 'primary',
    lineWidth: 10,		// 环形宽度
    lineCap: 'round',
});

Circle Progress: JavaScript circular progress bar plugin (tigrr.github.io)

移动前端学习笔记（2）——移动端点击（touch、click、tap、fastclick）

iScroll.js

改变滚动条滚动速度

iScroll框架的使用和修改

鼠标滚轮滚动

iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动，但操作起来很不灵敏。这是由于iscroll对鼠标滚轮事件做了拦截，然后缩小了滚轮的滚动距离，详见iscroll4.js源代码608-609行：
wheelDeltaX = e.wheelDeltaX / 12;//控制X轴鼠标滚轮速度*
wheelDeltaY = e.wheelDeltaY / 12;//控制Y轴鼠标滚轮速度

iScroll.js修改滚动速度

Easy Sass

使用 VSCode 编辑器来编译 Sass

分页插件

jquery.pagination

Pagination

jQuery分页插件pagination.js

树形结构

jsTree 注意：要使用高版本的JQ版本

单选/多选下拉框

xm-select 使用手册

拾色器插件

jdavidhermoso/ jQueryColorPicker

jquerycolorpicker

jQuery颜色选择器ColorPicker

Tagged: colorpicker

图片放大功能(类似放大镜)

enlarge.js

filamentgroup / enlarge

yb /enlarge.js

页面效果

拖拽替换图片的排列顺序

上拉加载下拉刷新

iScroll 5

swiper

pulltorefresh

cubiq/iscroll

daterangepicker日历插件

模拟ios日历时间选择效果

Mobiscroll demo demo

jQuery-mobiscroll

jQuery仿QQ登录表单弹出窗

jQuery仿QQ登录表单弹出窗

下拉框

Select2 select2-github

bootstrap-select jQuery Selectric jQuery Selectric

好用的自定义select下拉插件jQuery Selectric

jQuery模拟select下拉框插件SelectBox

jQuery自定义下拉框插件select-mania

可搜索、多选的下拉框插件-简单-xm-select
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
第一步: 下载 https://gitee.com/maplemei/xm-select/blob/master/dist/xm-select.js#
第二步: 引入 xm-select.js
第三步: 写一个`<div id="demo1"></div>`
第四步: 渲染
	var demo1 = xmSelect.render({
		el: '#demo1',
		language: 'zn',
		data: [
			{name: '张三', value: 1},
			{name: '李四', value: 2},
			{name: '王五', value: 3},
		]
	})
<div id="game_id_select" class="xm-select-demo"></div>

// 游戏数据列表
var applist = [] 
// 游戏下拉框
var game_id_select = xmSelect.render({
	el: '#game_id_select', 
	name:'',   // 如果将值存在另外一个隐藏input里，将name设置为空，否则为对应的name值
	filterable: true,	// 可搜索
	tips: '请选择游戏',
	searchTips: '请输入游戏',
	height: 300,
	style: {
		width: '200px'
	},
	prop: {
		name: 'app_name',  // 数据中对应的name值的属性名
		value: 'app_id',	// 数据中对应的value值的属性名
	},
	data: applist,
	on: function(data){
		 /*---处理动态赋值-开始-----*/
		var arr = data.arr      // 当前多选已选中的数据
			, str = '';         // 选中数据的valueStr集合
		arr.map(function(item, index) {
			console.log(item);
			str += (index == 0) ? item.app_id : ',' + item.app_id;
		})
		// 动态赋值(在on时触发事件，获取到的值不是最新选择的值,是上次选中的值，要动态赋值)
		// mini.get('game_id').setValue(str)  mini的用法
		$('[name="game_id"]').val(str)
		/*---处理动态赋值-结束-----*/
	},
})

3D轮播图支持滚轮

jQuery-3dlbt

jQuery头像上传裁剪

jqueryJcropPhp

日历插件

My97DatePicker

穿梭插件

左侧导航栏

导出数据表格

layui-excel-GitHub

LAY-EXCEL 简单快捷的导出插件

excel导出

table2excel

TableExport

绘制图表插件

Highcharts

Highcharts兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

获取地图位置

百度

QQ

移动端下拉刷新，上拉加载更多插件

dropload-gh-pages

加载插件

nice-validator

jQuery仿QQ登录表单弹出窗

https://www.jq22.com/jquery-info8342

文件下载

download.js

Bootstrap-select-匹配实时搜索功能下拉框

https://www.bootstrapselect.cn/

Query file upload 的正确用法（限制上传大小和文件类型）

参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
add: function (e, data) {
    var file = data.originalFiles[0].name.split(".");
    
    文件名有可能是sdk-icon1.apk.zip   所以不能只判断含有apk，而是判断根据.拆分的数组中的最后一个是不是apk
    if(file[file.length -1].indexOf("apk") == -1) {
      msg("请上传apk后缀名文件");
      return false;
    }

    // data.originalFiles[0].size   这里的大小的单位是b
    if(data.originalFiles[0].size > 2 * 1024 * 1024 * 1024) {
      msg("应用完整包文件不能超过2G");    //
      return false;
    }

    data.submit();    //如果满足条件就上传文件（执行上传文件）
}

is.js-强大的通用js表单验证插件

is.js 是一个微型通用性数据检查验证包。目前提供了数据类型、存在性、正则表达、字符串、数学、对象、数组、运行环境、时间、配置10大类110个验证方法。

移动端选择控件

原生 js 移动端选择控件，不依赖任何库

仿IOS选择下拉框

mobileSelect.js

sublime

Sublime Text

前端神器-sublime text3插件安装及使用

fastclick

处理移动端click延迟

日期选择器-datetimepicker

多次点击input日期选择器不显示

解决方法：

1
2
3
4
5
6
//解决输入框点击多次（包括两次）不显示的问题
document.getElementById('startDate').addEventListener('click', myfunc);
document.getElementById('endDate').addEventListener('click', myfunc);
function myfunc(e) {
	e.currentTarget.blur();
}

**兼容IE日历插件—My97DatePicker **

My97DatePicker

调用方法：

1
2
1、<script type="text/javascript" src="libs/My97DatePicker/WdatePicker.js"></script>
2、直接调用：在调用的输入框  onclick = "WdatePicker({dateFmt:'yyyy/MM/dd'});"

jquery.SuperSlide自动轮播插件

jQueryValidation

jquery Validation表单验证使用详解

laypage

laypage.js分页插件使用方法详解

validform

Validform基础及用法

Validform小结

bootstrap-switch

bootstrap-switch

Bootstrap 开关（switch）控件

Lazy Load

Lazy Load 中文网

icheck

iCheck不一样的checkbok

hui-iconfont

字体图标

UMeditor

UEditor Mini版本

UEditor

编辑器

在线示例

在线演示
使用说明
第一步，下载最新版本
第二步，打开浏览器
  • 使用浏览器打开 _examples/index.html 查看
UEditor相关链接

FASTADMIN

nprogress

NProgress显示顶部进度条效果及使用详解

jquery.autocomplete

seajs

seajs中文文档

Font Awesome

Font Awesome-中文文档

HttpWatch

网页数据分析工具

专业化网页抓包数据分析工具

ionic

http://www.ionic.wang/

ART-TEMPLATE—高性能 JavaScript 模板引擎

artTemplate

Underscore.js —JavaScript实用库

extjs

Atom_工具使用

由github发布的前端开发工具

非常强大和非常开发的开发工具平台

Atom的插件和主题安装和配置