js插件

 

 

 

待測/(待學習)插件

http://www.oschina.net/project/tag/287/color-picker 　　插件庫

http://www.jq22.com/ 　　插件庫

https://github.com/ChiperSoft/Kalendae 　　日曆選擇插件 Kalendae   （不依賴任何js庫，沒看過，可試用）2014-10-15

日曆插件1：　　jqueryUI自帶一個 　　http://jqueryui.com/datepicker/

 日曆插件2：　　bootstrap相關項目中（http://www.bootcss.com/）有一個：DateTime Picker　　http://www.bootcss.com/p/bootstrap-datetimepicker/

fullPage.js　　全屏滾屏的一個插件。（相關內容本身搜）

http://www.open-open.com/news/view/169c12b 　　15個插件　　2015-6-19

http://www.open-open.com/news/view/368486 　　2014年的50個插件　　2015-6-19

http://www.oschina.net/p/yahoo-pure 　　Pure 是來自雅虎的 CSS 框架（輕量級）

http://www.oschina.net/p/ztree 　　zTree 是利用 JQuery 的核心代碼，實現一套能完成大部分經常使用功能的 Tree 插件

http://www.oschina.net/p/kindeditor 　　KindEditor 是一套開源的在線HTML編輯器

http://ckeditor.com/demo　　CKEditor（HTML編輯器）　　　http://baike.baidu.com/view/1093993.htm　　2016-5-9

http://echarts.baidu.com/doc/example.html 　　baidu的ECharts

http://code.ciaoca.com/jquery/cxcolor/ 　　色彩選取

http://www.bejson.com/webInterface.html 　　接口　　2015-6-24

http://techbrood.com/　　踏得（這個網站有不少css特效，還能夠搜索。值得學習）　　2015-10-16

http://www.zhangxinxu.com/wordpress/?p=804 　　圖片旋轉+剪裁js插件(兼容各瀏覽器)　　http://www.zhangxinxu.com/wordpress/?p=359 　　圖像剪裁插件Jcrop

https://github.com/mrdoob/three.js　　THREE.js

jquery.qrcode.min.js　　二維碼（未使用）　　2015-11-25

jqzoom　　圖片放大插件　　2015-12-03

http://www.shearphoto.com/　　圖片剪切　　2015-12-8

Decimal.js 　　（像 "星圖"）任意精度的JS十進制類型。簡約、但應用程序界面強大，類庫獨立，只有8kb大小、可壓縮。　　2015-12-24

Fancy Form  一個基於jQuery的JS表單設計庫,能夠校驗和提交ajax庫，並增長開發人員的驗證類型，正則表達式和功能都很是好用　　2015-12-24

Particles.js 一個用來在網頁上建立顆粒效果的輕量級JS庫，設置方便、配置參數多樣，能夠達到客戶需求。　　2015-12-24

http://masonry.desandro.com/　　（下載jquery.masonry插件）　　masonry　　    jquery.masonry瀑布流插件（之前看過，有功夫時再看看）　　2016-1-12

http://www.w3dev.cn/download/20130409/jquery.zclip.js.aspx　　jquery.zclip.js jquery剪貼板插件（基於flash的）　　2016-1-20

http://www.bootcdn.cn/zeroclipboard/　　zeroclipboard.js（基於swf的剪貼板插件，www.bootcdn.cn使用了這個庫，可用也兼容）　　2017-3-31

http://www.zhangxinxu.com/wordpress/?p=1259　　jQuery頁面滾動圖片等元素動態加載實現　　jquery.scrollLoading.js 　　jquery.scrollLoading-min.js　　2016-2-1

http://www.jq22.com/demo/jquery-SweetAlert20151027/　　漂亮的提示框插件　　2016-3-1

http://www.shejidaren.com/13-web-dev-resources.html　　13款實用的JS插件&前端資源　　(Clipboard.Js 文字複製插件，文本框的進度條應用，Loaders.Css)　　2016-3-21

http://www.dowebok.com/77.html　　　http://www.jq22.com/jquery-info472　　　頁面插件fullPage.js（製做全屏滾動式網站的前端插件，功能很全）　　2016-4-15

http://www.geetest.com/exp_normal　　　　極驗驗證插件（拖動滑塊匹配圖形的驗證方式）　　2016-5-9

http://www.codeceo.com/article/5-useful-javascript-libs.html　　前端工程師都會喜歡的5個js庫　　2016-5-10

http://www.codeceo.com/article/12-useful-javascript-tips.html　　12個很是實用的js小技巧　　2016-5-10

https://pdfobject.com/　　pdfobject.js 是一個網頁能夠打開PDF文件的庫　　2016-6-23　　　　（下載： https://pdfobject.com/js/pdfobject.min.js ）

https://segmentfault.com/a/1190000008332220　　12個值得關注的頂級JS庫　　2017-9-22

http://www.itzjt.cc/2016/09/11/lib/　　一個博客裏收集的插件　　2017-11-27　　http://tieba.baidu.com/p/5213927279?see_lz=1

http://www.cnblogs.com/baka-sky/p/8001577.html　　使用cropper實現簡單的頭像裁剪並上傳　　2017-12-8

http://blog.csdn.net/andyliulin/article/details/78246906　　github上實用、經常使用的插件和庫　　2018-1-10

 

 

 

---

 

成熟插件：  

http://www.cnblogs.com/qq21270/p/3737456.html　　swiper插件：圖片輪播（幻燈片）。支持上下滾動、左右滾動；觸屏拖動；鼠標滾輪等

http://www.swiper.com.cn/ 　　Swiper中文網　　2015-10-15

http://www.cnblogs.com/qq21270/p/4961868.html 　　Hammer.js（插件：手機手勢事件）　　2015-11-13

http://www.cnblogs.com/qq21270/p/3824015.html　　圖片懶加載（小插件，好用）2015-12-9

http://www.bootcdn.cn/fastclick/　　FastClick 插件　　2016-1-27　　http://www.jmouse.cn/?p=524　　5步解決移動設備上的300ms點擊延遲【譯】

http://www.dowebok.com/demo/2014/98/　　animate.css – 齊全的CSS3動畫庫　　2016-1-28

抖動（shake）
閃爍（flash）
彈跳（bounce）
翻轉（flip）
旋轉（rotateIn/rotateOut）
淡入淡出（fadeIn/fadeOut）

 

 

http://momentjs.cn/　　Moment.js 2.10.6 JavaScript 日期處理類庫（功能挺強，有時間去研究）　　2016-4-18

http://momentjs.cn/docs/#/displaying/　　Moment.js　　API

script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/moment.js/2.11.2/moment.min.js"></script>
<script src="http://cdn.bootcss.com/moment.js/2.11.2/locale/zh-cn.js"></script>
<script type="text/javascript">
$(function(){
    $("#button").click(function(){
        var s;
        //s=moment().format('LL');
        //s=moment("20111031", "YYYYMMDD").format('LL');
        s=moment("20111031", "YYYYMMDD").format('YYYYMMDD  hh:mm:ss');
        alert(s);
    });
});
</script>
<div id="button">test</div>

 

 

http://www.jq22.com/jquery-info453　　jQuery下拉菜單插件Tendina 

<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://demo.jq22.com/tendina-master/tendina.js"></script>
<script>
$(function(){
    $('.ul-dropdown').tendina({
        animate: true,
        speed: 200,
        //openCallback: function($clickedEl) {
        //    console.log($clickedEl);
        //},
        //closeCallback: function($clickedEl) {
        //    console.log($clickedEl);
        //}
    })
});
</script>
<style type="text/css">
/*左側菜單*/
ol, ul {list-style: none;margin:0;padding:0;}
.ul-dropdown *{box-sizing:border-box;line-height: 1.5em;}
.ul-dropdown {position: fixed;left:0;top:150px;height:100%;width:200px;background-color: #f7f7f7;font-family: "微軟雅黑";font-size:14px;text-align:center;list-style: none;box-shadow:1px 1px 10px #999;padding-top:1em;border-top-right-radius:1em;}
.ul-dropdown > li {padding: 0px; }
.ul-dropdown > li.selected {background-color: #f2f2f2;}
.ul-dropdown > li.selected > a {background:linear-gradient(0deg,#333,#000);color:#fff;font-weight:bold;}
.ul-dropdown > li > a:hover {background:linear-gradient(0deg,#333,#000);color:#fff;font-weight:bold;}

.ul-dropdown > li.selected > ul {background:#e0e0e0;color:#000;}
.ul-dropdown > li a {display: block;width: 100%;padding:5px 0px;text-decoration: none;text-transform: uppercase;color: black; }
.ul-dropdown > li > ul{display:none;}
.ul-dropdown > li > ul > li {padding: 0 20px;}
.ul-dropdown > li > ul > li:hover {background:#f0f0f0;}
</style>
<!-- 左側菜單 -->
<ul class="ul-dropdown">
  <li>
    <a href="#">促銷管理</a>
    <ul>
      <li><a href="../a.html" target="main">社區活動</a></li>
      <li><a href="../a.html" target="main">精彩內容</a></li>
      <li><a href="../a.html" target="main">促銷商品</a></li>
    </ul>
  </li>
  <li>
    <a href="#">訂單管理</a>
    <ul>
      <li><a href="../b.html" target="main">訂單管理</a></li>
    </ul>
  </li>
</ul>

 

 

 

http://www.hcharts.cn 　　Highcharts功能強大、開源、美觀、圖表豐富、兼容絕大多數瀏覽器的純js圖表庫

http://kindeditor.net/demo.php 　　在線HTML編輯器 ★

http://www.cnblogs.com/qq21270/p/5518869.html　　zTree（樹形菜單插件）　　2016-5-23

 jQuery插件格式

<script type="text/javascript">
//jQuery插件格式：
(function($){
    $.fn.test111=function(){
        return "mmmmmmmmmmmm";
    }
})(jQuery);
</script>

 

 

插件網站

http://www.jq22.com 　　js插件網（一個js插件網站）2014-10-15

http://www.cnblogs.com/roucheng/archive/2016/05/31/jqueryjianyi.html　　jQuery插件使用經驗建議　　2016-5-31