50 most useful jQuery plug-ins for Web development-Comprehensive

This article is the 50 most useful for Web DevelopmentJQueryThe last article in the plug-in collection series, the entire series will share with you the 50 most helpful in website developmentJQueryThese plug-ins are mainly used in the following categories: webpage layout plug-ins, navigation plug-ins, table plug-ins, slide and turntable plug-ins, chart plug-ins, image effects plug-ins, video plug-ins, etc, other articles in the series are listed as follows:

Articles you may be interested in

• A collection of 50 most useful jQuery plug-ins: Form
• 50 most useful jQuery plug-ins featured image effects
• 50 most useful jQuery plug-ins featured webpage Layout
• 50 most useful jQuery plug-ins featured content slide
• 50 most useful jQuery plug-ins featured website navigation
• Collection of 50 most useful jQuery plug-ins-Icon Layout
  

 

Swipebox

Swipebox is a touchableJQueryThe lightbox effect plug-in can be used for desktops, mobile devices, and tablets.

Supports mobile device sliding gesture navigation. You can use a keyboard to navigate to the desktop.CSS3The browser with transition features uses jQuery to downgrade the processing, supports Retina display, and can be easily customized through CSS.

Example:

$("#gallery").click(function(e){e.preventDefault();$.swipebox([{href:'big/image1.jpg', title:'My Caption'}, {href:'big/image2.jpg', title:'My Second Caption'}]);});

Demo of plug-in download Effect

 

Tooltipster

Tooltipster is a lightweight and easy-to-use jQuery plug-in that allows you to easily create semantic and modern tooltip. Tooltipster allows you to use any HTML Tag that you can think of in the prompt content, which means you can insert images and text format tags in the prompt layer.

The effects can be customized. The default parameters are as follows:

$('.tooltip').tooltipster({   animation: 'fade',   arrow: true,   arrowColor: '',   content: '',   delay: 200,   fixedWidth: 0,   maxWidth: 0,   functionBefore: function(origin, continueTooltip) {      continueTooltip();   },   functionReady: function(origin, tooltip) {},   functionAfter: function(origin) {},   icon: '(?)',   iconDesktop: false,   iconTouch: false,   iconTheme: '.tooltipster-icon',   interactive: false,   interactiveTolerance: 350,   offsetX: 0,   offsetY: 0,   onlyOne: true,   position: 'top',   speed: 350,   timer: 0,   theme: '.tooltipster-default',   touchDevices: true,   trigger: 'hover',   updateAnimation: true});

Demo of plug-in download Effect

 

JQuery Transit

Transit is used to achieve ultra-smooth CSS 3 transition and transform animation effects. With this plug-in, you can easily implement many effects such as translate, rotate, scale, and skew.

Example of Transform effect:

$("#box").css({ x: '30px' });               // Move right$("#box").css({ y: '60px' });               // Move down$("#box").css({ translate: [60,30] });      // Move right and down$("#box").css({ rotate: '30deg' });         // Rotate clockwise$("#box").css({ scale: 2 });                // Scale up 2x (200%)$("#box").css({ scale: [2, 1.5] });         // Scale horiz and vertical$("#box").css({ skewX: '30deg' });          // Skew horizontally$("#box").css({ skewY: '30deg' });          // Skew vertical$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation$("#box").css({ rotateY: 30 });$("#box").css({ rotate3d: [1, 1, 0, 45] });

Example of Transition effect:

$("#box").transition({ opacity: 0.1, scale: 0.3 });$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500);                         // duration$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast');                      // easing$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in');                   // duration+easing$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..});             // callback$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..});  // everything

Demo of plug-in download Effect

 

Noty

The noty plug-in has a very brilliant effect! You can easily implement notifications, reminders, success, errors, warning prompts, confirmation prompts, and so on. You can customize text, animations, speeds, and buttons.

The default parameter configuration is as follows:

$.noty.defaults = {    layout: 'top',    theme: 'defaultTheme',    type: 'alert',    text: '',    dismissQueue: true, // If you want to use queue feature set this true    template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',    animation: {        open: {height: 'toggle'},        close: {height: 'toggle'},        easing: 'swing',        speed: 500 // opening & closing animation speed    },    timeout: false, // delay for closing event. Set false for sticky notifications    force: false, // adds notification to the beginning of queue when set to true    modal: false,    maxVisible: 5, // you can set max visible notification for dismissQueue true option    closeWith: ['click'], // ['click', 'button', 'hover'],    buttons: false // an array of buttons};

Demo of plug-in download Effect

 

JQuery Vector Maps

JQVMap is a practical map plug-in that uses Scalable Vector Graphics Technology (SVG) in modern browsers (Firefox, Safari, Chrome, Opera and Internet Explorer 9) to display maps, earlier versions of Internet Explorer 6-8 Use VML to provide map functions.

Sample Code:

<script src="js/jquery.vmap.js"></script><script src="js/jquery.vmap.world.js"></script><script src="js/jquery.vmap.sampledata.js"></script> <script>jQuery('#vmap').vectorMap({    map: 'world_en',    backgroundColor: null,    color: '#ffffff',    hoverOpacity: 0.7,    selectedColor: '#666666',    enableZoom: true,    showTooltip: true,    values: sample_data,    scaleColors: ['#C8EEFF', '#006491'],    normalizeFunction: 'polynomial'});</script> <div id="vmap" $(function() {    var BV = new $.BigVideo();    BV.init();    BV.show('http://video-js.zencoder.com/oceans-clip.mp4');});

In Firefox, you can configure to display videos in Ogg format:

$(function() {    var BV = new $.BigVideo({useFlashForFirefox:false});    BV.init();    BV.show('vids/river.mp4', {altSource:'vids/river.ogv'});});

For a background video, configure the following:

$(function() {    var BV = new $.BigVideo();    BV.init();    BV.show('http://video-js.zencoder.com/oceans-clip.mp4',{ambient:true});});

Demo of plug-in download Effect

 

Calendario

Calendario is a flexible calendar plug-in for responsive layout. The purpose is to provide an appropriate layout on the small screen and large screen to keep the calendar as fluid as possible. This plug-in comes from Codrops. For detailed tutorial, refer to "Calendario: A Flexible Calendar Plugin".

Demo of plug-in download Effect

 

Articles you may be interested in

• 60 awesome jQuery slide demos and downloads
• Recommendation of 15 excellent jQuery image effect extensions
• Several excellent jQuery Ajax paging plug-ins and tutorials
• 20 jQuery plug-ins that are essential for Web developers
• Sharing 23 beautiful jQuery image effects plug-ins

Link to this article: 50 jQuery plug-ins most useful for website development-comprehensive article

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources