MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

11 useful jQuery plugins

This article will discuss about several jQuery plugins and there uses and also implementation for some.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

JQuery is a very popular language over the programmers because of its amazing functionalities. It has a wonderful community of software engineer that create incredible things and designs. JQuery works like a scripting language. This is why, in this article, you will introduce some jQuery pluggin, which save tremendous effort from programmers. You know that query can be very useful over the web browser.

Therefore, for this post, we have rounded up some jQuery plug-in that can help you accomplish some amazing things when it comes to enhancing web page layouts and user interfaces.

jQuery Avgrund

The jQuery Avgrund is fresh dialog explanation-language. It is not as feature-rich as acetify, but it has the amazing factor that your web app needs. The dialog is shown by the impressive animation that brings it into a focal point, while blurring and darkening the background field.

The forms are tedious and boring. Everyone hates filling them. The plug-in in this section attempts to make things better by enhancing your forms with useful functionality. And this plug-in has the power to process the client side validation.

jQuery Avgrund

Figure 1: jQuery Avgrund

Alertify.js

Alertify.js is another kind of jQuery plug-in. It is a small library for presenting beautiful dialog bog through the window frame and shows notifications. It is easy to customize with a Cascade style sheet, has a simple API and doesn’t depend on third party libraries but it can play sweetly with them. To call global object the plug-in is used nicely.

Listing 1: Alertify

	// alert dialog
alertify.alert("Message");

// confirm dialog
alertify.confirm("Message", function (e) {
    if (e) {
        // user clicked "ok"
    } else {
        // user clicked "cancel"
    }
});
Alertify.js

Figure 2: Alertify.js

iCheck:

iCheck is another kind of jQuery plug-in. It is a jQuery plugin that changes the frame control of your browser and help you a lot. It is perfectly customizable, works on mobile and comes with beautiful flat-style skins point. To use it, include the JavaScript and CSS files in your page, and convert all your radio and check boxes with a few lines of jQuery. Therefore this is a very useful plug-in and widely used framework nowadays.

Listing 2: iCheck

    $(document).ready(function(){
    $('input').iCheck({
        checkboxClass: ' icheckbox_minimal ',
        radioClass: 'iradio_minimal'
    });
});
iCheck

Figure 3: iCheck

jQuery File Upload:

The file upload is an important feature for any programming language. The jQuery File Upload provides an excellent feature over the developers. It has widget with multiple file assortment, drag and drop support, progress bars and preview images. It also wires cross-domain, chunked and reusable file uploads and client-side image resizing. Therefore, it is an amazing plug-in that provides by jQuery. If you work with any server-side platform like PHP, Python, and Ruby on Rails, Java, Node.js and Go, you will get more flexibility by using it.

jQuery File upload

Figure 4: jQuery File upload

jQuery Knob:

JQuery Knob is another important feature of jQuery. The jQuery Knob is a plug-in for turning input elements into the substantial query dials board. It is built using canvas, and is fully customizable by setting data attributes on the inputs by this way.

Listing 3: JQuery Knob:

    <input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness="0.4" value="29">
The dials can be illicit using the mouse and moving like a wheel. By using the plugin developer can do various things. jQuery Knob

Figure 5: jQuery Knob

Pickadate.js:

The Pickadate.js is a jQuery plug-in that creates an approachable and mobile friendly date selection doodad. It is very easy and user friendly feature. It is easy to use and can be modified with CSS. To use it, include the js file and the style sheet, and call the plug-in on your input element as per your requirement:

The plug-in takes lots of options which you can find in the document.

Listing 4: Pickadate

    $('.datepicker').pickadate();
Pickadate.js

Figure 6: Pickadate.js

Windows:

Windows is such kind of plugging that allows various kinds of facilities. It is a plug-in that lets you build single page websites with sections that take up the whole browser. The plug-in gives you callbacks that are called when new sections come into visibility and handles snapping, therefore, you can easily extend it with custom navigation menus or more options. Some example code is presented here for your preview:

Listing 5: Windows

    $('.window').windows({
    snapping: true,
    snapSpeed: 500,
    snapInterval: 1100,
    onScroll: function(scrollPos){
        // scrollPos:Number
    },
    onSnapComplete: function($el){
        // after window ($el) snaps into place
    },
    onWindowEnter: function($el){
        // when new window ($el) enters viewport
    }
});

Stellar.js:

Stellar. js has been just amazing. It is a jquery plug-in that provides parallax scrolling effects to any scrolling element to the user. The user always loves to watch this kind of previews and shape. It looks for any parallax backgrounds or fundamentals inside the particular component, and repositions them when the element moves. If you want, you can control the scroll speed of the elements by using data attributes for a true parallax effect. To trigger the plug-in, simply call it on your root element (or on a window):

Listing 6: Stellar:

    $('#main').stellar();    }
Stellar.js

Figure 7: Stellar.js

Chart.js:

Chart. js is extensive kinds of feature of jQuery. The Chart. js is a latest charting documents that use the HTML5 canvas element and provides fallbacks for Mozilla and IE7/8. Recently, the library supports 6 chart types that are animated and fully reusable. Chart. js doesn’t have any dependency and is less than 5kb in size and its size is quite small to use it. It is a great replacement of flash. The reusable feature of it gives it an importance over the web developer. This feature presents various kinds of charting facilities like a bar chart, pie chart, line chant and many more.

Chart. js

Figure 8: Chart. js

jQuery PointPoint:

This is another sweet jQuery plug-in. The jQuery point-to-point is a plug-in that helps you draw users’ attention to some portion of the page and web browser. It presents a small arrow next to the mouse pointer. For various reasons, you can use it, depending on your requirement. This can be useful for pointing to missed form fields, the buttons that need to be hard-pressed, or validation errors that need to be scrolled into view.

jQuery PointPoint

Figure 9: jQuery PointPoint

jQuery Countdown:

jQuery Countdown is the another example of jQuery extender plug-in. It is a plug-in that shows the remaining timetable like days, hours, minutes and seconds to an event, and updates the left over time with a moving picture every moment. It is very simple to fit the web browser and it is easy to use it with the plug-in of JS, Cascade Style Sheet files, and triggers.

Listing 7: Countdown:

    $('#countdown').countdown({
    timestamp   : new Date(2013, 0, 5) 
}
jQuery Countdown

Figure 10: jQuery Countdown

jQuery has lots of plug-in that easily fit with the web browser. The developer can work on it quite perfectly. The uses of jQuery increases day-by-day. Here, in this article, we present some example of jQuery plug-in that helps you lot.

This is all for this article. Hope you liked it.



My main area of specialization is Java and J2EE. I have worked on many international projects like Recorders,Websites,Crawlers etc.Also i am an Oracle Certified java professional as well as DB2 certified

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login