Skip to content

Latest commit

 

History

History
1078 lines (714 loc) · 40.9 KB

lib.md

File metadata and controls

1078 lines (714 loc) · 40.9 KB
Raw

js分页

Piwik open-source analytics platform

http://unslider.com/ http://www.woothemes.com/flexslider/

https://www.meteor.com/

常用lib(TODO 分类整理)

选择原则: Do one thing do good, K.I.S.S., micro, NO dependency, CN

常用组合

  • 基础库: jQuery | Zepto(IE10+) | Backbone/Vue.js + AmplifyJS | Angular | Avalon | React
  • 前端框架: Bootstrap | Pure.css

在项目中运用过的

RequireJS 2.x

jQuery, Zepto

Backbone 1.x, Angular 1.2.x

Bootstrap 3.x, Font Awesome

Undercore 1.x, Moment, crypto-js, jStorage, Cordova 3.x

iScroll 5.x, jquery.animate-enhanced, Transit, Highcharts, BxSlider, iCheck, Brute Select, DataTables

正在整理的

timeline

tag input

cdn.code.baidu.com 看到 oj.js

一站式解决方案

MDL Material Design Lite Components in HTML/CSS/JS 太惊艳了, OMG~ 谁用谁知道啊!

Bootstrap | Material design theme for Bootstrap | Materialize

generator-aio-angular Material Design by LumX

Foundation

UIkit A lightweight and modular front-end framework for developing fast and powerful web interfaces. 相当于bootstrap, 但组件更为丰富一些

Pure.css CSS with a minimal footprint. Pure is ridiculously tiny. The entire set of modules clocks in at 4.0KB minified and gzipped.

  • Base
  • Grids
  • Forms
  • Buttons
  • Tables
  • Menus

Kube 风格相当简洁

SUI 基于bootstrap开发的前端组件库, 同时也是一套设计规范 国产的当然有很多符合国情的组件啦

Framework7 Mobile HTML framework to develop web apps with iOS & Android native look and feel. 对 Android 兼容性不是很好, 可以选择试一试Framework7-Plus 其他可选Light7 兼容性和 SUI Mobile 一样

WeUI | weui.js | vux | jquery-weui WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一

技术选型

Yo@Qunar 一款基于 Mobile First 理念而设计的 CSS Framework

GMU 基于zepto的ui组件库，适用于移动端由百度GMU小组开发

NovaUI 奇舞团基于Zepto的移动UI组件库

Motion 基于ZeptoJS，为移动终端Web应用量身定制的组件库，重点开发结合HTML5新特征的创新实用组件

OnsenUI CSS 组件都是独立的, 可以选择性使用, 非常方便

AdminLTE Dashboard & Control Panel Template

  • Responsive admin template
  • Built with Bootstrap 3

FrozenUI 腾讯移动端UI框架, FrozenUI的CSS组件库,基于腾讯手Q样式规范

Ant Design 蚂蚁金服体验技术部出品, 提供了很多炫酷的组件, 值得借鉴, 特别是 QueueAnim 进出场动画

UXCore 为企业级后端应用而生. UXCore is a set of React Components that is designed for enterprise-class pc backend application.

radon-ui 基于 Vue 开发的高质量UI组件

基础库

RequireJS

jQuery | Zepto | You Don't Need jQuery

Backbone | Angular | Avalon

AlloyTeam/Nuclear Some HTML + Scoped CSS + JS === Reusable Component

colors Better colors for the web

Buttons

HaloJS 基于 Zepto 并采用 CMD 规范面向移动端提供各种实用工具的组件库

工具库

  • lodash JavaScript utility library
  • 模版引擎

    • laytpl 1KB 具备转义安全机制

      Laytpl Error：TypeError: Cannot read property 'name' of undefined

    <h3>{{= d.title }}</h3>
    <p class="intro">{{= d.intro }}</p>
    <ul>
    {{# for(var i = 0, len = d.list.length; i < len; i++){ }}
        <li>
            <span>{{ d.list[100].name }}</span>
            <span>所在城市：{{ d.list[i].city }}</span>
        </li>
    {{# } }}
    </ul>

    • artTemplate 5KB 相比 laytpl 拥有更好的调错机制, 支持 include 语句和预编译, 也可以试一试小巧的Juicer

      Template Error

<filename>
tpl1

<name>
Render Error

<message>
Cannot read property 'name' of undefined

<line>
6

<source>
<span>{{ value1.name }}</span>

常用(UI)组件

SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！ 从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！ 还可以多个SuperSlide组合创造更多效果哦~

很久之前我也是一个网站新手，在制作网页过程中，经常需要用到各种特效，于是到网上找合适的插件。找到后要熟悉它的参数、用法等，如果用到几种不同特效，就要找几个不同插件，结果页面代码臃肿，加载缓慢，还要害怕会不会冲突！实在痛苦。 于是我就想可不可以将多个特效合一，以后只需要调用一个插件就能实现网页大部分特效。经过千锤百炼后一个能实现各种效果的插件就浮出水面了，为了表示其异于常人的能力，我给它起了一个霸气的名字 -- SuperSlide！

  • 弹窗 layer alert, confirm, prompt, msg, load, tips, iframe(window) 还有移动设备版本

  • lightgallery lightbox gallery plugin for jQuery

  • nice-validator

  • 微信广告通用库

    WxMoment 是由微信朋友圈广告团队面向广告详情页开发者提供的一个 JavaScript 库 通过使用 WxMoment，开发者可以简单的实现详情页中的常见功能，例如：微信分享、横屏提示、网页统计等。

    • 横屏提示
    • 资源预加载
    • 滑屏组件 PagerSlider
      • 移动端滑屏组件，支持上下滑动，左右滑动
      • 支持 dom 绑定动画
      • 手势跟随
      • 锁定禁止滑动
      • 记住页面索引
      • 翻页时，页面元素动画只执行一次
      • 内容超出一屏先滚完再翻页
      • 第一次向下/向上滑时不触发翻页，第二次时再翻页
    • 腾讯视频

工具

moment

crypto-js https://github.com/brix/crypto-js | JSEncryptA

jStorage | PouchDB

Cordova

async

wNumb 格式化数字

Sugar.js 可以参考其中一些工具方法的实现

Platform 平台检测

vConsole

is.js Check types, regexps, presence, time

SimpleStateManager A responsive state manager which allows you to run different javascript at different browser widths

enquire.js programmatically responding to media queries.

oj build websites with objects

绑定input

EventEmitter Evented JavaScript for the browser

jquery-bridget makes a jQuery plugin out of a constructor

director a tiny and isomorphic URL router

  • Layzr.js dependency-free library for lazy loading img or iframe, 2kb
  • jquery_lazyload
  • unveil.js A very lightweight jQuery|Zepto plugin to lazy load images, with retina displays - less than 1k.
  • LazyLoad

Echo.js Echo is a standalone JavaScript lazy-loading image micro-library. Echo is fast, 2KB, and uses HTML5 data-* attributes for simple.

Hammer.js recognize gestures made by touch, mouse and pointerEvents. It doesn't have any dependencies

store.js localStorage wrapper for all browsers without using cookies or flash. Uses localStorage, globalStorage, and userData behavior under the hood

A finite state machine javascript micro framework

AlloyTeam/AlloyFinger super tiny size multi-touch gestures library for the web

动画

  • Popmotion motion engine. Make it pop with animation, physics, and input tracking.

  • Velocity an animation engine with the same API as jQuery's $.animate(). It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.

  • GSAP TweenLite, TimelineLite, TweenMax, TimelineMax, Draggable and SplitText, 早在 flash 时代就已经称霸动画界了

  • Tweene Tweene is an animation proxy: used as a wrapper of your chosen library, it may allow you to write animations easily, thanks to its versatile interface that adapts itself to your programming style gain extra features (play, pause, reverse, resume, restart and speed control, Timelines) switch easily from one library to another any time you want.

  • Shifty A teeny tiny tweening engine

var tweenable = new Tweenable();
var pre = document.querySelector('pre');

tweenable.tween({
  from:     { 'x': 0  },
  to:       { 'x': 10 },
  duration: 1000,
  step: function (state) {
    pre.innerHTML += state.x + '\n';
  },
  finish: function (state) {
    pre.innerHTML += 'Hooray, all done!  Final value: ' + state.x;
  }
});
var coords = { x: 0, y: 0 };
var tween = new TWEEN.Tween(coords)
    .to({ x: 100, y: 100 }, 1000)
    .onUpdate(function() {
        console.log(this.x, this.y);
    })
    .start();

requestAnimationFrame(animate);
function animate(time) {
    requestAnimationFrame(animate);
    TWEEN.update(time);
}

  • Textillate 实现文字动画效果, 例如打字机效果

  • anime.js works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects.

  • lining.js 可以控制每一行文字的样式, 并可以使用动画, 让文字一行行显示出来

  • kute.js

UI

这里的还未整理分类

jquery-fracs determines some fractions for an HTML element (visible fraction, fraction of the viewport, ...) and also provides the coordinates of these areas. As a bonus there is a page outline feature as seen on the right.

Draggabilly Make that shiz draggable

jquery.dad.js

  • Horizontal D&D
  • Vertical D&D
  • Multiline D&D
  • Set draggable child area:
  • Droppable areas

tabulous.js A jQuery tabs module for todays web!

Covering-Bad A simple jQuery Plugin for cover an item by another item with dragging ability

Sequence Responsive animation framework for creating unique sliders, presentations, banners, and other step-based applications

notify

iNotify JS achieve the browser title flashing , scrolling, voice prompts , browser notice.

Bootstrap Notify turns standard Bootstrap alerts into "Growl-like" notifications.

tip

opentip

Snap 侧边栏菜单, app上流行的UI模式

Slideout A touch slideout navigation menu for your mobile web apps.

jQuery.Stacky create UIs with panels that open horizontally using jQuery.

jQuery.mmenu app look-alike on- and off-canvas menus with sliding submenus for your website and webapp

Shadow

AppScroll a tiny JS library that fixes the "website dragging" issue caused on iDevices

数字滚动动画 jquery-animateNumber

sigma.js

recorder Using Capture API (HTML5) to capture video / photo via the camera of your device.

3D

code editor

D3.js 数据可视化, 自定义图形

web based file manager 桌面, 文件管理, 代码编辑器, 文件预览、编辑、上传下载、在线解压缩、音乐视频播放

favicon

图形/可视化

http://paperjs.org

提示信息

自动完成

dnd sortable list

引导

interact.js drag and drop, resizing and multi-touch gestures

  • Dragging
  • Drag and drop
  • Snapping
  • Resizing
  • Multi-touch Rotation
  • Pinch-to-zoom
  • Use in SVG files
  • Tap, doubletap and hold

fabric.js 比较适合 PC 端, 功能强大 a powerful and simple Javascript HTML5 canvas library. You can then scale, move, and rotate these objects with the mouse

剪切板

SVG Snap.svg

图片裁剪 http://odyniec.net/projects/imgareaselect/

image-cropper

Cropper

Store

EXIF image metadata

音乐播放器 flash http://www.schillmania.com/projects/soundmanager2

HTML5 video player

图像处理

jQuery Mouse Wheel Plugin

keyboard

easing

pjax smoothState.js Unobtrusive page transitions with jQuery

SlipHover SlipHover apply direction aware hover animation for the caption of an image.

vTicker BreakingNews – jQuery间歇滚动插件

SlotMachine SlotMachine 是一个基于 jQuery 的插件，它能够制作类似老虎机的效果

pace An automatic web page progress bar.

ProgressJS

NProgress

MixItUp animated filtering and sorting

wPaint

Split.js adjustable split views

图标

排版

  • yue.css a typography stylesheet for readable content

  • Fonts.css 跨平台 CSS 中文字体解决方案 一直以来跨平台的中文字体 CSS 设置都是一件让人很头疼的事情，这个库打包了一些常见字体的名字(例如黑体, 楷体, 宋体, 仿宋, 明体)，希望能覆盖 Windows、Mac 以及 Linux 的常见字体，方便引用

  • i18next internationalization library for browser or any other javascript environment (eg. node.js).

  • translater.js 利用HTML注释来翻译页面的解决方案

  • Globalize internationalization and localization that leverages the official Unicode CLDR JSON data

  • Open color Color scheme for UI design

  • ProgressBar.js Responsive and slick progress bars with animated SVG paths.

单页(活动页)常用

one-page-nav Smooth scrolling and smart navigation when user scrolls on one-page sites.

http://www.zcool.com.cn/special/znote2014/

stickUp sticky navigation menus.

One Page Scroll one page scroll website that allows users to scroll one page at a time. It is perfect for creating a website in which you want to present something to the viewers.

Zepto One Page Scroll

scrollReveal.js Easily reveal elements as they enter the viewport. 最方便使用, 无需依赖动画样式(例如 animate.css)

var sr = ScrollReveal({
    origin: 'top',     // translate 的方向
    distance: '100px', // translate 的距离, 还有 rotate, opacity, scale 都是指初始化时元素怎么变形
                       // 例如: transform: translateY(-100px) scale(0.9) rotateX(20deg) rotateY(30deg);
    viewFactor: 0.2,   // 判断元素多少百分比出现在视野中则认为元素是显示出来了
    reset: true        // 重复触发动画
});
sr.reveal('[data-animate]');

Animate trigger animations on elements when they are within the viewport, 方便配合动画样式(例如 animate.css)使用,  与WOW.js 类似

// <div data-animate data-animation-classes="fadeInLeft animated" data-animation-reverse="true" data-animation-offset="0.1, 0.5" data-animation-delay="0"></div>
// 只监听了 window 上的 scroll 事件
var animate = new Animate({        
    offset: [0.5, 0.5], // 元素在垂直和水平方向上有多少百分比的内容出现在视野中才触发动画
    reverse: true       // 再次出现在视野中时又会触发动画
});
animate.init();

ScrollWatch Easily add lazy loading, infinite scrolling, or any other dynamic interaction based on scroll position (with no dependencies). 类似的有 VisSense, Waypoints

  • Watch any scrolling element, not just the window
  • Executes callbacks when elements enter/leave view
  • Tracks the first time something enters/leaves view or every time
  • Watches vertical and horizontal scrolling
  • Supports infinite scrolling out of the box
  • Scroll/Resize handlers are throttled or debounced, so your cpu lives to see tomorrow
new ScrollWatch({
    watch: '.element',
    watchOffset: -200, // 正数表示滚动位置距离元素显示还差多少, 负数表示滚动位置超过元素多少
    watchOnce: false,
    onElementInView: function(event) {
        $(event.el).addClass('active');
    },
    onElementOutOfView: function(event) {
        $(event.el).removeClass('active');
    }
});

VisSense observing visibility changes of DOM elements. Immediately know when an element becomes hidden, partly visible or fully visible.

var nodeList = document.querySelectorAll('[data-animate]');
for (var i = 0, length = nodeList.length; i < length; i++) {
    var visibility_monitor = VisSense(nodeList[i], {
        fullyvisible: 0.1 // 元素多少百分比显示出来则认为元素为全显示了
    }).monitor({
        fullyvisible: function(visMon) {
            var classList = visMon._visobj._element.getAttribute('data-animation-classes').split(' ');
            classList.forEach(function(clazz) {
                visMon._visobj._element.classList.add(clazz);
            });
        },
        hidden: function(visMon) {
            var classList = visMon._visobj._element.getAttribute('data-animation-classes').split(' ');
            classList.forEach(function(clazz) {
                visMon._visobj._element.classList.remove(clazz);
            });
        }
    }).start();
}

ScrollMagic animate based on scroll position

SuperScrollorama

jquery-smoove scrolling effects using CSS3

fullPage.js

zepto.fullpage

fullpage

fullscreen page scroll

scrollme adding simple scrolling effects to web pages.

multiscroll A simple plugin to create multi scrolling websites with two vertical scrolling panels.

jquery-smooth-scroll

jQuery.scrollIntoView When a DIV is scrolled into or out of the visible part of browser it executes a function.

jQuery.Pin Make your stuff stick

pagePiling.js create beautiful fullscreen scrolling websites

animate-scroll

AniJS Raise your Web Design without Coding data-anijs="if: click, do: flipInY, to: .container-box" 比较适合滚动到页面某个元素时才显示动画

Headroom.js Hide your header until you need it

cta.js animate any element ("action") onto any other element ("effect") on the page.

roll.js keep track of position, scrolling, and pagination.

jquery.scrollTo animated scrolling

抽奖/活动

滑动图片

iSlider 可用于幻灯片(可手势缩放), 滑动组件(图片或者DOM元素, 可实现滑动tab页), 支持水平或垂直滑动, 可用于做单页的活动推广页

Swiper 功能强大到没话说, 还有中文文档

slick

  • 功能超多
  • Responsive/CSS3/Swipe/Desktop mouse dragging
  • Infinite looping/Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks

OWL Carousel

  • 不支持垂直滑动
  • Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

BxSlider

  • Responsive
  • Horizontal, vertical
  • Slides can contain images, video, or HTML content
  • Advanced touch / swipe support built-in
  • Uses CSS transitions for slide animation (native hardware acceleration!)
  • IE7+

Flux-Slider 支持很多动画效果

simple-jQuery-slider Simple jQuery CSS3 slider. Simple to use and supports every browser! (IE7+)

Dragdealer Drag-based JavaScript component, embracing endless UI solutions 2d dragging and tapping, mouse and touch, ~12KB. No dependency. 可以通过这个drag解决方案实现多种组件效果: slider, scroller, slide to unlock, carousel, zoom

skippr A super simple slideshow plugin for jQuery.

ResponsiveSlides Simple & lightweight responsive slider plugin (in 1kb)

Pogo Slider 很多Slide Transitions和Element Animations

All-In-One Banner multiple effects, animated text

hero-slider

Orbit

jQuery.Switchable

Sly

Glide

Swipe 简单

lightslider lightweight responsive Content slider with carousel thumbnails navigation

表单组件

Checkboxradio

cxCalendar

Pikaday No dependencies Datepicker

flatpickr datetime picker

pickadate mobile-friendly, responsive, jQuery date & time input picker

省市区三级联动选择器

multi-select 双 select 左右选择

iCheck

selectbox 糖饼 select Chosen making long, unwieldy select boxes more user friendly Select2 Awesomplete autocomplete with zero dependencies

Switchery iOS 7 style switches for your checkboxes

Brute Select Simple select implementation with customizable styles. It retains default browser behavior for dropdown list itself while making possible adjusting all aspects of collapsed view of select.

Selectize custom <select> UI control. It's useful for tagging, contact lists, country selectors

Bootstrap Switch Turn checkboxes and radio buttons in toggle switches.

Plupload

Uploadify

webuploader 以HTML5为主，FLASH为辅的现代文件上传组件

Dropzone.js

rangeslider Simple, small and fast JavaScript/jQuery polyfill for the HTML5 slider element.

range

ng-range

clockpicker

Color Picker Photoshop-like interface

jscolor

Spectrum The No Hassle JavaScript Colorpicker

wColorPicker

wCheck

wSelect

jquery_chained Chained Selects for jQuery and Zepto.

UEditor

Simditor 富文本编辑器, 出自彩程设计, 还有其他表单组件

wangEditor 还有移动版

Thinker-md

editor.md markdown 编辑器

jQuery Form unobtrusively upgrade HTML forms to use AJAX

wPaginate

zTree / jstree

jQuery-Knob touchable, jQuery dial

superplaceholder.js

MuPlayer

validform jQuery-Form-Validator

cleave.js Format input text content when you are typing

Fuse Lightweight fuzzy-search

var options = {
  keys: ['title', 'author.firstName']
}
var fuse = new Fuse(books, options);

fuse.search('old');

滚动条

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

AlloyTeam/AlloyTouch 触摸运动

iScroll 主要用于移动端的Web App

xscroll Taobao FED

jQuery.NiceScroll

custom scrollbar plugin Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.

ScrollUp create a customisable 'Scroll to top' feature that will work with any website

stickOnScroll Making elements fixed on the top of the page when scrolling and scrolling that item up when it a specified footer element gets "close".

Freewall create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts.

jquery-scrollpanel

infinity speeds up scrolling through long lists and keeps your infinite feeds smooth and stable

图形

  • Highcharts

  • Chartx

    • 折线/柱状/饼图/雷达/散点/混合
    • 地图
    • 拓扑图(树形图)
    • progress进度图表
    • 和旋图
    • 韦恩图
    • 力导向布局图
    • 温度计图占比/扇形一维比例图/标签星系图/多触点关联图/环形关联图/等比流失图/流入流出关系图

  • ECharts 图形类型非常非常丰富 Why ECharts?

  • G2

  • Chart.js All six core chart types are only 11.01kb when minified

  • jsPlumb Visual connectivity

  • Kity Minder 百度脑图

  • two.js

  • Qunee 拓扑图

  • JointJS visualization and interaction with diagrams and graphs.

  • Mapv

    基于百度地图的大数据可视化开源库，可以用来展示大量的点、线、面的数据，每种数据也有不同的展示类型，如直接打点、热力图、网格、聚合等方式展示数据

  • my-mind Online Mindmapping Software

  • vis network 关系图

表格

多列布局(瀑布流)

Wookmark

angular-masonry Static brick issue 如何hack静态元素与动态元素一起组成瀑布流时带来的bug

isotope Filter & sort magical layouts

Packery Bin-packing layout library

salvattore A jQuery Masonry alternative with CSS-driven configuration.

Gridster.js makes building intuitive draggable layouts from elements spanning multiple columns

gridstack.js for widget layout. This is drag-and-drop multi-column grid.

Shapeshift A dynamic grid system with drag and drop functionality.

waterfall

Dragula Drag and drop so simple it hurts

待测试的

AmplifyJS jStorage 可以淘汰了 AmplifyJS is a set of components designed to solve common web application problems with a simplistic API. AmplifyJS solves the following problems:

  • Ajax Request Management - amplify.request
  • Client Side Component Communication - amplify.publish/subscribe
  • Client Side Browser & Mobile Device Storage - amplify.store

http://sentsin.com/ http://www.layui.com/

http://prinzhorn.github.io/skrollr/

Reel The premier 360° solution

Parallax Parallax Engine that reacts to the orientation of a smart device

Modernizr detects HTML5 and CSS3 features in the user’s browser

FitText FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines. fontflex

Spritely animating CSS sprites and dynamic scrolling backgrounds

正在试用的框架

qslider http://ued.qunar.com/ QSlider是轻量级, 无任何插件依赖的手机平台javascript滑动组件, 专门为Touch端宣传类专题所开发的解决方案 支持循环效果, 水平/垂直滑动 做出类似这样的专题页面: http://ued.qunar.com/qnext/6/index.html

游戏类

boilerplate

html5-boilerplate

mobile-boilerplate

play The High Velocity Web Framework For Java and Scala 相当于Java界的rails

Web 桌面应用

Build cross platform desktop apps with web technologies

参考

前端 TOP 100

印记中文

Web 前端常用框架汇总

前端开发仓库

Arale 一个开放、简单、易用的前端基础类库 http://animajs.org/#standard/

Alice

NEC

常用JavaScript

CDN 从CDN中搜集各种js/css框架找到合适的

CODYHOUSE A free library of HTML, CSS, JS nuggets

开放静态文件 CDN

Libscore

Github资源收集

Use getAwesomeness()

一些移动Web开发的干货

awesome-javascript-cn

YOU MIGHT NOT NEED JQUERY PLUGINS

plainJS

Vanilla List: The Vanilla Javascript Repository

非WEB前端

TODO 整理 Android 端和 iOS 端常用的库