前端常用js插件

Posted 2022-12-20 webcyh

目前知道的插件有以下 下面有一部分我还是使用过的，但还有一部分是搜集资料了解到的 后边还会持续更新 后边我也会将这些插件的整合和全部的插件的例子放在个人github上面 欢迎star

fontAwesome 字体 已经介绍
SweetAlert 已经介绍
toastr通知 已经介绍

jquerylazyload 懒加载 已经介绍
bootstrap-switch 开关插件 已经介绍
intro.js 用户引导 已经简单介绍
jqcloud 云词 已经介绍
validate 表单验证 
layPage分页插件
supersized图片全屏
iCheck 复选框美化
fullPage.js全屏滚动
zyUpload.js 上传插件
zTree.js 树插件
fullcalendar日历插件
iscroll.js手机端滚动插件
bootstrap-datetimepicker时间插件

fontAwesome 字体
官方地址 http://fontawesome.dashgame.com/
使用cdn  
国内建议使用<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
国外建议使用 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
简单使用

<i class="fa fa-area-chart"></i>

效果

 

 

 

 

SweetAlert
官方地址 https://sweetalert.bootcss.com/
使用cdn

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

简单使用 在底部javascript里边添加下面的脚本

swal(
        title : "支付成功",
        type : "success",
        confirmButtonText : "确定",
        closeOnConfirm : false
    );

效果（更多参数可以查看官方文档） 推荐一个博客这里对于这个插件的使用讲解的很好 https://www.cnblogs.com/lvxisha/p/9791931.html

 

 

 

toastr 通知
cdn
样式链接 <link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
脚本链接 <script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
基本参数

 toastr.options =   
        closeButton: false,  
        debug: false,  
        progressBar: true,  
        positionClass: "toast-top-center",  
        onclick: null,  
        showDuration: "300",  
        hideDuration: "1000",  
        timeOut: "2000",  
        extendedTimeOut: "1000",  
        showEasing: "swing",  
        hideEasing: "linear",  
        showMethod: "fadeIn",  
        hideMethod: "fadeOut" ,
        newestOnTop: true,
        preventDuplicates: true,
        preventOpenDuplicates: true,
        maxOpened:1 
    ;

 

简单的使用

toastr.success(‘Hello world!‘, ‘Toastr fun!‘);

效果

 

 

 

 

 

 

 

jquerylazyload 图片懒加载

cdn js链接
https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js jquery库连接

简单使用

$(function()  
        $("img").lazyload( 
            effect : "fadeIn", //显示效果
            threshold : 200,//看到图片之前先加载200像素
            placeholder:‘./1.jpg‘,//相当于占位符
            event:‘sporty‘,//在灰色占位图片被点击之前阻止加载图片 或者click
            //这里可以结合 定时器在5秒之后出发这个事件 $("img").trigger("sporty")

        ); 
    ); 

 

bootstrap-switch 开关插件
官方地址
http://www.bootcss.com/p/bootstrap-switch/ 
cdn

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><!--必须引入-->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>

html

<input type="checkbox" name="test">

js

 $("[name=‘test‘]").bootstrapSwitch()

效果

 

 

 

 

用户引导 intro.js

 用于向首页使用网站或者移动应用添加漂亮的分布指南效果

需要的文件

intro.js

introjs.css

参数说明

 /* 下一步按钮的显示名称 */
      nextLabel: ‘Next →‘,
      /* 上一步按钮的显示名称 */
      prevLabel: ‘← Back‘,
      /* 跳过按钮的显示名称 */
      skipLabel: ‘Skip‘,
      /* 结束按钮的显示名称 */
      doneLabel: ‘Done‘,
      /* 引导说明框相对高亮说明区域的位置 */
      tooltipPosition: ‘bottom‘,
      /* 引导说明文本框的样式 */
      tooltipClass: ‘‘,
      /* 说明高亮区域的样式 */
      highlightClass: ‘‘,
      /* 是否使用键盘Esc退出 */
      exitOnEsc: true,
      /* 是否允许点击空白处退出 */
      exitOnOverlayClick: true,
      /* 是否显示说明的数据步骤*/
      showStepNumbers: true,
      /* 是否允许键盘来操作 */
      keyboardNavigation: true,
      /* 是否按键来操作 */
      showButtons: true,
      /* 是否使用点点点显示进度 */
      showBullets: true,
      /* 是否显示进度条 */
      showProgress: false,
      /* 是否滑动到高亮的区域 */
      scrollToElement: true,
      /* 遮罩层的透明度 */
      overlayOpacity: 0.8,
      /* 当位置选择自动的时候，位置排列的优先级 */
      positionPrecedence: ["bottom", "top", "right", "left"],
      /* 是否禁止与元素的相互关联 */
      disableInteraction: false,
      /* 默认提示位置 */
      hintPosition: ‘top-middle‘,
      /* 默认提示内容 */
      hintButtonLabel: ‘Got it‘

未完

 

 

 

jqcloud 云标签

cdn

https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js

<link href="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud.min.css" rel="stylesheet">

<script src="//cdn.bootcss.com/jqcloud/1.0.4/jqcloud-1.0.4.min.js"></script>

 

简单使用

var arr = [‘算法‘,‘java‘,‘web前端‘,‘php服务端‘,‘linux‘];

function createobj()
    var rst = ;
    var i = Math.ceil(Math.random(0,5)*10);
    console.log(i);
    rst.text = arr[i];
    rst.weight = Math.floor(Math.random(2,10)*10);
    return rst;

var test = [];
for(var i=0;i<30;i++)
    test.push(createobj());
    if(test.length == 30)
        $("#cloud").jQCloud(test, 
        removeOverflowing: true,
        shape: "elliptic",
        height: 200
    );
    

参数

html : 设置html属性，如 obj.html = class: "customclass", title: "A title";

link : 设置链接，如 obj.link = "http://blog.wange21.top";

afterWordRender:设置这个词在渲染后调用的函数。
handlers : 一个指定将绑定到单词的事件处理程序的对象，如 obj.handlers = click: function()  alert(“it works!”);  ;