Js commonly used front-end plug-ins

There are currently aware of the following plug-ins part I used, but some of it is behind will continue to collect information learned back I will update and integrate all of the examples of plug-ins that are placed above personal github Welcome star

fontAwesome fonts have been introduced 
SweetAlert have introduced 
toastr notice has been introduced 

jquerylazyload lazy loading already introduced 
Bootstrap - Switch switch plug-in has been introduced 
intro.js user guide has a brief 
jqcloud word cloud has been introduced 
validate form validation 
layPage pagination plugin 
supersized images full-screen 
iCheck box beautification 
fullPage.js full-screen scroll 
zyUpload.js upload the plugin 
zTree.js tree plugin 
fullcalendar calendar plugin 
iscroll.js end of the phone to scroll plugin 
Bootstrap -datetimepicker time plug-ins

fontAwesome fonts
 official address http://fontawesome.dashgame.com/
use cdn  
domestic recommend the use of < Link rel = " stylesheet " href = " https://cdn.staticfile.org/font-awesome/4.7.0/css/font -awesome.css " > foreign recommend the use of < Link rel = " stylesheet " href = " https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css " > simple to use

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

effect

SweetAlert 
official address https://sweetalert.bootcss.com/ 
use cdn

Simple to use javascript inside at the bottom add the following script

Swal ({ 
        title: "Payment Successful" , 
        type: "Success" , 
        confirmButtonText: "OK" , 
        closeOnConfirm: to false 
    });

Effects (more parameters can view the official documentation) recommend a blog here to use this plugin explain very well https://www.cnblogs.com/lvxisha/p/9791931.html

toastr notice
 cdn 
style link <link href = "https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel = "stylesheet"> 
script link <script src = "https: / /cdn.bootcss.com/toastr.js/latest/js/toastr.min.js "> </ script> 
The basic parameters

 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 
    };


Simple to use

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

effect

jquerylazyload picture lazy loading 

cdn js links 
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 library connection 

is simple to use

$ ( Function () { 
        $ ( "img" ) .lazyload ({ 
            Effect: "fadeIn", // display 
            threshold: 200, // see first before loading 200 pixels Image 
            placeholder: './ 1.jpg', // equivalent of placeholders 
            event: 'Sporty', // block the loading of images before the gray placeholder image is clicked or the click 
            // . here you can combine a timer event starting this $ ( "img") after 5 seconds trigger ( "Sporty") 

        }); 
    });

bootstrap- Switch Switch Plug
 official address 
http://www.bootcss.com/p/bootstrap-switch/  
CDN

<! - the latest version of Bootstrap core CSS file -> 
< Link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min. CSS " > 
< Script type =" text / JavaScript " the src =" https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js " > </ Script > <-! must be introduced - > 
<! - the latest Bootstrap core JavaScript file -> 
< Script src = "https://cdn.jsdelivr.net/npm/[email protected]/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">

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

effect

User guide intro.js

Step guide for adding beautiful effects using the website or mobile app to Home

Documents needed

intro.js

introjs.css

Parameter Description

 / * Displays the name of the next button * / 
      nextLabel: 'the Next & rarr;' ,
       / * Displays the name of the Back button * / 
      prevLabel: '& larr; the Back' ,
       / * Skip Displays the name of the button * / 
      skipLabel: 'Skip ' ,
       / * displays the name of the end button * / 
      doneLabel: ' the Done ' ,
       / * the guide relative to the frame location described highlighted area * / 
      tooltipPosition: ' bottom ' ,
       / * guidance instructions text box style * / 
      toolTipClass: ' ' ,
       / * DESCRIPTION highlighted region pattern * /
      highlightClass: '' ,
       / * use a keyboard Esc to exit * / 
      exitOnEsc: to true ,
       / * if allowed to exit the space click * / 
      exitOnOverlayClick: to true ,
       / * whether data described in steps * / 
      showStepNumbers: to true ,
       / * Allow keyboard to operate * / 
      KeyboardNavigation: to true ,
       / * if buttons to operate * / 
      showButtons: to true ,
       / * whether to use the little dot display progress * / 
      showBullets: to true ,
       / *Whether to display the progress bar * / 
      ShowProgress: to false ,
       / * if slid to the highlighted area * / 
      scrollToElement: to true ,
       / * transparency mask layer * / 
      overlayOpacity: 0.8 ,
       / * when the position of the automatic selection, when the position of arrangement priority * / 
      positionPrecedence: [ "bottom", "Top", "right", "left" ],
       / * prohibit correlated with element * / 
      disableInteraction: to false ,
       / * default prompt location * / 
      hintPosition: 'Top -middle ' ,
       / * default prompt contents * /
      hintButtonLabel: 'Got it'

Unfinished

jqcloud tag cloud

cdn

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

Simple to use

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
    });
    }
}

parameter

html: html setting properties, such as {class = obj.html: "CustomClass", title: "A title" }; 

Link: Set the link, such as obj.link = { "http://blog.wange21.top" }; 

afterWordRender: set the function of the word rendered after the call. 
handlers: Object will be bound to a specific word in the event handler, such obj.handlers = {the Click: function () {Alert ( "IT Works!");}};

Js commonly used front-end plug-ins

Guess you like