前端插件资源整理

从入坑写代码到现在差不多一年了,当初很菜,现在还是很菜,不过总是每天都比前一天好,很享受这种状态,入坑时先进入的是前端领域,所以记录下自己做开发以来在前端领域发现并试用过的一些在自己看来不错的插件,作为自己一个阶段的集合,仅作为个人参考,如大神们发现坑的地方,欢迎指正!

以下是具体部分

1.font-awesome-最实用的web字体图标库

这个东西貌似有html也有css字体,有点蒙圈

  • github star:41000+
  • github fork:7000+

2.chosen-强大的jquery模拟下拉框(select)插件

  • github star:19000+
  • github fork:3700+

Chosen 是一个JavaScript插件，它能让丑陋的、很长的select选择框变的更好看、更方便。目前，它支持 jQuery 和 Prototype 两种JavaScript引擎。

1.引入jquery库和脚本


复制代码

2.选择框html片段


        
       United States 
       United Kingdom 
       Afghanistan 
       Albania 
                 ...

复制代码

3.初始化组件

$(".chzn-select").chosen();
复制代码

3.Sweet Alert-js超酷消息警告框插件

  • github star:13000+
  • github fork:1600+

SweetAlert是一款神奇的javascript弹出消息警告框插件。

1.要使用该插件，首先要在html的header中引入以下文件



复制代码

2.最基本的调用方法：

sweetAlert("Hello world!");
复制代码

3.带错误图标的警告框：

sweetAlert("Oops...", "Something went wrong!", "error");
复制代码

4.一个带有确认按钮的警告框，点击确认按钮可触发动画：

sweetAlert({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: false
}, function(){
  swal("Deleted!",
  "Your imaginary file has been deleted.",
  "success");
});
复制代码

亲测:UI很漂亮

4.echarts-可视化图标插件

  • github star:11000+
  • github fork:4000+

5分钟上手写ECharts的第一个图表

1、新建一个echarts.html文件，为ECharts准备一个具备大小（宽高）的Dom。



    
    ECharts
复制代码

2、新建script标签引入模块化单文件echarts.js.



    
    ECharts
复制代码

3.新建script标签中为模块加载器配置echarts和所需图表的路径（相对路径为从当前页面链接到echarts.js）



    
    ECharts
require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); 复制代码

4、script标签内动态加载echarts和所需图表，回调函数中可以初始化图表并驱动图表的生成.



    
    ECharts
require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); require( [ 'echarts', 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; myChart.setOption(option); } ); 复制代码

5.浏览器中打开echarts.html,就能看到效果

5.Swiper-滑动特效插件(pc)

  • github star:7700+
  • github fork:2800+
  • Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
  • Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果.
  • Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！



    
    Swiper demo
    
    

    
    
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 500px;
        height: 300px;
        margin: 20px auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10 复制代码

6.iScroll-实现下拉刷新，滚动翻页特效的JQuery插件

iScroll是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果都可以轻松实现。

  • github star:7200+
  • github fork:2100+

复制代码

曾用iScroll实现在安卓手机上触摸滚动兼容性问题

7.loader.css-css动画加载特效

  • github star:6000+
  • github fork:680+

Loaders.css是一款非常出色的加载动画框架，Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画，这些动画并不需要图片来辅助，而是仅仅需要CSS即可实现，因此运行效率比较不错。

Loaders.css的特点

  • 基于纯CSS，不需JavaScript脚本，也不需要图片，很干净。 默认提供近30个不同的Loading动画效果，你也可以发挥自己的想象来实现不同的加载动画。
  • Loaders.css比较轻巧，基本没什么臃肿的文件。 免费、开源，这是必须的。

1.引入 loaders.min.css 和 loaders.css.js，这个JS仅是为了简化动画的DIV标签，如果不加这个JS，那么你的动画就必须加上对应数量DIV标签才能正常显示动画，所以建议加上，这样语义化好会好些。



复制代码

2.HTML代码，给loading元素加入动画class

复制代码

3.改变加载动画颜色

.ball-grid-pulse > div {
 background: orange;
}
复制代码

8.VEX-小而美的jquery-css动画消息警告库

  • github star:5000+
  • github fork:300+

可用作幻灯片样式

1.引入文件




复制代码

2 

vex.dialog.confirm
    message: 'Are you absolutely sure you want to destroy the alien planet?'
    callback: (value) ->
        console.log if value then 'Successfully destroyed the planet.' else 'Chicken.'
复制代码

9.fancyBox-图片展示插件

  • github star:3600+
  • github fork:1000+

Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层效果。前面我们有文章介绍了facybox弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。


















复制代码
复制代码

复制代码

个人试验,适配移动端

10.jPlayer-基于HTML5/Flash的音频、视频…

  • github star:3500+
  • github fork:1100+

jPlayer是一个JavaScript写的完全免费和开源 (MIT) 的jQuery多媒体库插件 (现在也是一个Zepto插件) jPlayer可以让你迅速编写一个跨平台的支持音频和视频播放的网页. jPlayer的丰富API可以让你创建一个个性化多媒体应用，因此也获得越来越多的社区成员的支持和鼓励。

  • 简单:几分钟就可以上手编码、部署
  • 可定制:可以方便地用HTML和CSS换肤
  • 轻量:压缩的mini版只有12K
  • 免费开源:没有任何许可限制
  • 社区支持:不断增长的活跃社区
  • 插件丰富:主流平台上越来越多的免费插件
  • 跨平台:跨平台跨浏览器多解码器支持
  • 文档全面:完善的文档和入门指南
  • 接口统一:提供兼容浏览器、HTML5和Flash的统一接口
  • 扩展性:拥有高扩展性的架构体系


复制代码

3.获取HTML数据


html = editor.html();


editor.sync();
html = document.getElementById('editor_id').value; 
html = K('#editor_id').val(); 
html = $('#editor_id').val(); 


editor.html('HTML内容');
复制代码

14.projekktor-UI漂亮的一款HTML5播放器

15.touchSlide-滑动特效插件(mobile)

  • github star:100+
  • github fork:70+

TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端， 能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 插件开源、体积小、简单实用、功能强大，是你架构移动终端网站的重要选择！

1、引用TouchSlide.js

复制代码