码迷,mamicode.com
首页 > Web开发 > 详细

前端常用js插件

时间:2019-10-04 11:18:49      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:switch   extend   版本   提示   nbsp   div   art   lca   位置   

目前知道的插件有以下 下面有一部分我还是使用过的,但还有一部分是搜集资料了解到的 后边还会持续更新 后边我也会将这些插件的整合和全部的插件的例子放在个人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 &rarr;‘,
      /* 上一步按钮的显示名称 */
      prevLabel: ‘&larr; 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!”); } };

 

技术图片

 

前端常用js插件

标签:switch   extend   版本   提示   nbsp   div   art   lca   位置   

原文地址:https://www.cnblogs.com/webcyh/p/11621557.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!