10 essential source code components for web Front-end jQuery developers, jquery developers

10 essential source code components for web Front-end jQuery developers, jquery developers

1. Conditioniz-Detects the browser and conditional loading of JavaScript and CSS

Conditioniz is a fast, lightweight (3 kb) JavaScript tool that detects browsers and resolutions and loads JavaScript and CSS files with conditions. Conditioniz rebuilt from its jQuery predecessor, and now it is 50% faster. The script and style loading function integrated with the Conditionizr added by class name allows you to specify the script and style to be loaded for different browsers. Browser sniffing is often considered unreliable. The establishment of Conditionizr is to overcome this problem. The core function of Conditionizr is to detect and implement conditional loading scripts and styles for IE browsers. With this in mind, Google Analytics is used to detect browsers.

Online Demo

Source code download

2. Use CSS3 Transforms to build a circular navigation

In this tutorial, I will show you how to use CSS transformations to create a circular navigation. The tutorial explains how to implement this style one by one. It involves some basic mathematical knowledge and uses CSS transformations to create these styles. But don't worry. The mathematical knowledge used here is really very simple. The tutorial uses easy-to-understand language to introduce the mathematical logic, so that you can clearly understand the technology behind it.

Online Demo

Source code download

3. MixItUp: A filtering and sorting plug-in based on CSS3 & jQuery

MixItUp is a lightweight but powerful jQuery plug-in that provides beautiful animation filtering and sorting functions for classified and ordered content. It is particularly suitable for portfolio websites, galleries, image blogs, and any classified or ordered content. How does it work? MixItUp determines which content is hidden, displayed, or located based on your filtering conditions, and then applies the CSS3 transitions smooth animation to the new position. This is a very effective method, with the help of modern browser rendering capabilities, and avoid using jQuery too much for DOM operations.

Online Demo

Source code download

4. Impressive jQuery modal box plug-in-iLightBox

The modal box can attract the user's attention to the content. There are many plug-ins on the network that implement this function. ILightBox is a new plug-in that replaces jQuery lightbox effects. It can display images, videos (YouTube, VIimeo, HTML5 videos, etc.) and other HTML content. It has an optional full screen mode. Gallery mode displays other items in a thumbnail and allows browsing through the keyboard, scroll wheel, and touch events. A skin that supports retina rendering can be fully customized. iLightbox can also be used as a better solution to replace JavaScript prompts and confirmation dialog boxes.

Online Demo

Source code download

5. Fabric. js-simple and powerful JavaScript Canvas Library

Fabric. js is a simple and powerful JavaScript Canvas library. It provides an interactive Object Model on top of the HTML5 Canvas Element and also contains the Canvas-to-SVG parser. With Fabric. js, you can create and populate objects on the canvas, from simple ry to complex graphics composed of hundreds of paths. You can easily move, scale, and rotate these objects with the mouse, modify their attributes (color, transparency, stacked order), and so on.

Online Demo

Source code download

6. Excellent jQuery text input box plug-in

The Automatic completion and prompt functions in the text box can help you quickly complete operations and provide a great product experience. Here, we recommend an excellent jQuery text input box auto-completion & Auto-Prompt plug-in to help you easily add the auto-completion and auto-prompt functions of the input box to your website. In this article, we use jQuery to position the cursor in the smart input box. It does not need images. It is implemented using pure CSS3 and is real-time and accurate. This means that it will automatically adapt when you add or delete text. Use the event proxy mechanism, so you don't have to worry about performance issues.

Online Demo

Source code download

7. More useful jQuery drop-down selection box plug-in

FancySelect is a better choice for the drop-down box feature in Web development. FancySelect is easy to use. You only need to bind any Select element on the page and call it. fancySelect. By default, FancySelect uses native selection features and styles on mobile devices.

Online Demo

Source code download

8. Ultra-smooth CSS transition and transform animation effect plug-in

Transit is a jQuery plug-in 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. Supported browsers: IE 10 +, Firefox 4 +, Safari 5 +, Chrome 10 +, Opera 11 +, and Mobile Safari.

Online Demo

Source code download

9. jQuery Flat Shadow-easy to achieve beautiful long Shadow effect

A long shadow extends the projection of an object. It is a shadow that is exposed to light. Generally, a projection with an angle of 45 degrees is used to add a stereoscopic effect to the object. Long shadows rapidly develop into popular design trends and are often applied to flat design objects. For more details, read the article "the latest trend of flat design-Long Shadow". I believe you will have a better understanding of the Shadow design after reading it.

Online Demo

Source code download

10. use Sticky-Kit to implement jQuery-Based Element Fixation

Fixed element effects are widely used in Web pages. Common Use Cases include improved navigation and advertisement display. Sticky-Kit is a very convenient jQuery plug-in that simplifies the creation/management of sticking elements and provides complex functions. These functions include processing multiple fixed elements. The enable/disable behavior depends on the position of the element in the viewport and the callback. It also has a function to recalculate the size, which simplifies the use of browser resizing.

Online Demo

Source code download

> Fixed link: http://www.i7758.com/archives/874.html