40 jQuery plug-ins worth your attention and 40 jQuery plug-ins worth your attention

40 jQuery plug-ins worth your attention and 40 jQuery plug-ins worth your attention

The jQuery developer community should be one of the most diligent and active communities in website development. They continuously provide us with free and practical plug-ins. I will share with you 40 useful plug-ins recently collected.

 

I. Rolling plug-in

JQuery Waypoints

Waypoints is a jQuery plug-in used to capture various rolling events, such as page-less content browsing, or fixing an element to prevent scrolling. Supports mainstream browser versions.

 

 

 

Skrollr

JavaScript class library-Skrollr, which provides a UI front-end framework with a variety of special scrolling effects developed for 5 years!

 

 

Ii. document form

 

Handsontable

A simplest solution for editing HTML tables similar to Excel. Handsontable is a powerful jQuery plug-in that implements the table editing function on the HTML page and is similar to the Excel editing effect. In Excel, you can perform almost all operations on webpages, such as dragging and copying, Ctrl + C, and Ctrl + V. In addition, it supports the following browsers: IE7 +, FF, Chrome, Safari, and Opera.

 

 

JQuery Sparklines

A jQuery plug-in visualization tool. jQuery Sparklines can help you generate static or dynamic spectral charts on the page. This tool describes three features: "highlighting data display, simple design, and providing text-size images ". Compatible with most popular browsers: Firefox 2 +, Safari 3 +, Opera 9 and Internet Explorer 6 & 7 & 8. Well-developed 5-year UI front-end framework!

 

 

Teamwork Gantt

The jquery version of Gantt chart is very good for a free software. (I do not know what Gantt chart is)

 

 

DataTables

DataTables is a jQuery table plug-in. This is a highly flexible tool based on a step-by-step enhancement that will add advanced interactive control and support for any HTML table. Main features:

• Automatic Paging

• Real-time table data filtering the UI front-end Framework carefully developed for 5 years!

• Automatic data sorting and data type detection

• Automatically process column width

• You can customize styles through CSS.

• Columns can be hidden.

• Easy to use

• Scalability and flexibility

• Internationalization

• Dynamic table Creation

• Free

 

Arbor. js

Arbor. js provides efficient, force-directed layout algorithms, graphical organization abstraction, and screen re-painting functions. It is a visual Javascript Graphics Library Based on jquery and Web multithreading technology. This class library does not forcibly specify the drawing method. You can draw on canvas, svg, or even specified HTML labels. Arbor. js allows you to focus more on graphic data and styles without wasting time on physical mathematical algorithms.

 

 

3. layout plug-ins

 

Wookmark jQuery Plugin

Wookmark jQuery plugin is a jQuery plug-in used to implement the webpage layout effect of the popular waterfall stream. Well-developed 5-year UI front-end framework!

 

 

JQuery Masonry

JQuery Masonry is a jQuery layout plug-in which elements are arranged vertically and horizontally based on a grid to minimize vertical spaces between elements of different heights.

, You will know the purpose of the comparison chart below:

 

Isotope

Isotope is definitely an incredible jQuery plug-in that you can use to create dynamic and intelligent la S. You can hide, display, and filter projects, re-sort, sort, and even more. Meanwhile, Isotope also has many cool animations. Well-developed 5-year UI front-end framework!

 

 

 

FitVids. JS

If you need your video to automatically adapt to the webpage width, the jquery plug-in FitVids. js can help you

 

 

 

Gridster. js

Gridster. js is a jQuery plug-in used to build an intuitive drag-and-drop layout that supports multiple columns. You can also dynamically add and delete elements in a table. It is a good plug-in.

 

 

Freetile. js

Freetie comes from the built-in Layout engines of volume age and volume age Plus, inspired by Masonry, VGrid, and Wookmark, but compared with them, Freetie has the following unique features:

• The element of any size is allowed and a fixed column width is not required. Therefore, you do not need to specify the column width to cater to your element size.

• The built-in algorithm allows you to easily customize the Insert Location to suit different display methods. For example, align left or right or close to a specific element.

• Intelligent animation can determine whether animation effects are required. For example, the added elements and invisible elements. Well-developed 5-year UI front-end framework!

• As long as the website using the volume age and volume age Plus templates is using it, it is very stable.

 

 

Iv. Text plug-ins

 

JQuery TextExt Plugin

JQuery TextExt. This plug-in can help you quickly add tags and provide related powerful auxiliary functions to help you effectively input, automatically complete prompts, and provide AJAX support.

 

 

 

Jeditable

Jeditable is a jquery plug-in that can be edited locally and submitted to the server for processing. It is a rare plug-in for local editing. (Note: In-Place editing is also called Instant editing? The general process is as follows. When a user clicks a text on a webpage, the text appears in an editing box. After the user modifies the text, the user clicks the submit button, the new text is sent to the server, and the form disappears to display the latest edited text.

 

 

FitText

FitText is an interesting tool that supports automatic text size adjustment.

Well-developed 5-year UI front-end framework!

 

 

 

V. UI plug-in

 

JQuery Knob demo

If you are looking for a jQuery plug-in that generates a nice knob (knob), jQuery knob is definitely a good choice. It uses canvas to help us generate superb knob effects. You can use the plug-in options or HTML5 data attributes to customize and set the plug-in attributes, which is convenient, simple, and elegant.

 

 

Noty-A jQuery Notification Plugin

A jQuery message reminder plug-in. It helps us quickly create, warn, prompt, and error message boxes. You must have used the default alert ('..') code. With Nody, you can create more elegant and powerful message prompts.

 

 

 

 

PageSlide

It can control the display and closure of a hidden page. Specifically, the current page occupies a complete page, and the hidden page cannot be seen. You set a control place and click the control to trigger the event. The hidden page pops up. Click again to hide the space outside the page and it will be closed again.

This is suitable for placing important content on the home page in a limited space, while hiding some pages does not necessarily need to be displayed, but users need to expand the display content. Well-developed 5-year UI front-end framework!

 

 

 

JQuery Collapse

JQuery Collapse is a lightweight jQuery plug-in used to expand and Collapse elements. It supports Cookie state saving.

 

 

 

Avgrund

Avgrund is a jQuery plug-in used to display modal pop-up windows. It supports popular browsers including IE6 and requires jQuery 1.4 +. The file size is small and only 2 kb.

 

 

 

JQuery One Page Navigation

Single page design has become increasingly popular recently. websites that use single pages are simple, elegant, and easy to maintain. You do not need to modify many files for daily maintenance, furthermore, it is a good choice to use the cool dynamic scrolling method to display your personal or corporate website, today, we will introduce you to jQuery one page nav, a very good single-page rolling navigation plug-in. I hope you can apply it to your website design and development. Well-developed 5-year UI front-end framework!

 

 

What should I pay attention to when developing a jquery plug-in that can be used multiple times on a page?

This situation may be caused by the scope or execution context. Because you cannot see your code, you can only give my suggestions:
Use the new Keyword to declare an instance in the plug-in, as shown in figure
Assume that the main function of your plug-in is func.
Use new func () for plug-ins ()

What should I pay attention to when developing a jquery plug-in that can be used multiple times on a page?

Do not repeat public variables. Please refer to this article: www.gbin1.com/...ugins/ to help you develop high-quality jQuery plug-ins.