JQuery – Write less, Do more
So essentially JQuery is that what makes the web building experience for beginners awesome. Also JQuery can be utilized to handle all core coding domains such as HTML, DOM, Ajax calls and so on and also used to perform almost any functionality with the help of simple plugins.
Free and Premium JQuery Plugins
Almost any functionality can be integrated into a webpage with the help of JQuery Plugins. The plugins can be utilized to do simple tasks such as adding elements, images, media content, videos, create slideshows, display maps to even complex functions such as transferring documents and manipulation, event handling, validation, filtering and so on with ease. Also the best JQuery plugins extend the available functionalities under your tool belt infinitely such as addition of accordion styled drop down menus, carousel sliders, and cool animations for image slides and so on.
- JQuery – Write less, Do more
- Free and Premium JQuery Plugins
- How to Create a Basic jQuery Plugin
- How to Install jQuery Plugins
- JQuery Slider Plugins
- JQuery Mobile Plugins
- JQuery Filter Plugins
- JQuery Validator Plugins
- JQuery Form Plugins
- JQuery UI Plugins
- JQuery Gallery Plugins
- JQuery Lightbox Plugins
- JQuery Calendar Plugins
- JQuery Table Plugins
- JQuery Menu Plugins
- JQuery Autocomplete Plugins
- JQuery Pagination Plugins
- Jquery Tabs Plugins
- Jquery Popup Plugins
- Jquery Search Plugins
How to Create a Basic jQuery Plugin
1. Make sure your code is documented. The name and version of the plugin should be included, as well as the function, example uses, parameters and contact or support information.
2. Make sure you add a self-invoking anonymous function to close your code. It protects all the variables from tampering by other codes and allowing you to send jQuery into function as a parameter.
3. Keep out static variables from all functions. Doing otherwise wastes memory and increases execution time.
4. Using the Getter/Setter pattern has become standard now. It might make the code’s functions more complicated, but the number of them decreases.
5. Default options should be added and extended. Adding options makes the plugin you’re working on flexible, which is always a bonus.
6. Make sure you return jQuery. It has become standard industry practice.
7. Keep all the selectors simple. Do not try and complicate matters unnecessarily.
8. Use CSS hooks API to get and set specific CSS values. You could hide browser specific implementations and expose a united UI for access to certain properties.
9. Use custom easing functions to add animation effects. This can help with the UI and adds appeal to your plugin.
10. Set global AJAX defaults. Otherwise you might end up with a slow and laggy plugin.
11. Make sure you use HTML5 attributes that help in the exchange of data between the server and the front end.
12. Use local storage to store client data. This gives control of data over to the client, always good in today’s world.
13. Use the latest version of jQuery to keep up with the times. Bleeding edge replaced cutting edge a long time ago.
14. Make sure your plugin is easy to use. For example, it can be self-initializing.
15. Make sure to use suitable nomenclature for the plugin and its versions.
16. Use an excellent template if you want your plugin to succeed. It is easier to build on a solid foundation.
17. Test your plugin over and over again in different environments and different browsers. Anticipate all problems users might face and have a contingency for all of them.
18. Advertise your plugin in places like GitHub or Google Code. Publicize it and demonstrate it anywhere you can!
How to Install jQuery Plugins
A number of plugin directories are available which allow free download of even premium plugins. The jQuery plugins will have a .js extension; be sure to check for it before download. Once you’re done, the rest of the procedure is as same as installing jQuery to your webpage. First unpack the contents of the plugin archive and store it in on your local hard disk; search for the .js extension file, if more than one file with same extension is present go for the last updated version.
Now open your webpage’s file in a HTML text editor, either notepad or even Dreamweaver. Scroll through the code to find the line that begins with “<script src=”jquery.js. You can also use the search option to locate the code and in advanced text editors, it will be highlighted in a different color. Tailing immediately after the code, you should see a line that has “<script src= ″jquery.plugin.js″></script> in it. If it is not there type it in yourself and replace the default plugin.js marker with the name of the plugin you want to include. Be sure that the file name matches exactly with code you’re writing. If you have more than one plugin, just add similar lines subsequently to the code.
Once you’re done, save the HTML file in the text editor and open the webserver. Find and locate the directory where your files are saved and update the previous HTML files with the new one with the plugin code. Also upload the plugin file in the same directory in the server. But if you wish to keep all your plugins files in one single folder, be sure to specify the path directory in your code. And that’s it, now your web page will feature the plugin you just included.
JQuery Slider Plugins
The JQuery slider plugins can be utilized to create cool slideshows of image galleries, ad banners, video recommendations, and animation montage and so on. Use the extensions to control the size and width of the slider and scale it to even up to the size of the complete page with simple customization options. Also the premium addons provide additional transition effects, pop out and full screen slider options, auto play ON and OFF options, etc.
JQuery Mobile Plugins
Enhance mobile usability of your plugins with the help of JQuery mobile plugins. The addons allow users to create custom, mobile friendly interfaces and applications with ease. Enable touch triggered slideshows, wheel rotary date and time pickers, compact event schedulers, mobile responsive maps and GPS integration, and compact sidebar menus optimized for mobiles using the best plugins. Also create ultra-responsive websites using the auto split view options, grid and layout options, and mobile pagination options as well using the awesome extensions.
JQuery Filter Plugins
Layouts are best served based on user browsing preferences, and the optimal way to do it is with the JQuery filter plugins. The easy to download addons automatically sort and filter out layouts based on preferences and shuffle them neatly for an enhanced viewing experience. Use the plugins to filter items by groups or family elements, sort items on the layout, create fast and synchronous shuffling, use CSS transitions and cool shuffling effects, and even filter based on search terms.
JQuery Validator Plugins
Create error free form submissions using the JQuery validator plugins. The plugins automatically check the forms created in the page for filled and unfilled elements and validate them to ensure that all fields are properly filled. Use the premium addons to check for specific characters in value entry fields, validate check boxes and radio buttons, highlight unfilled fields, mark necessary fields required, provide null options in download forms and even set minimum number of values to be added to the forms.
JQuery Form Plugins
The JQuery form plugins allow users to create a sort of feedback system in their webpages by allowing creation of forms. The free plugins allow developers to create simple name and age forms to complex survey forms with ease. Create checkboxes, drop down menus, slider option selects, date pickers, default auto fill options and even tabbed form fill options with ease. Download the plugins to also utilize the wizard flow option that allows automatic update of connected fields when a value is entered on one.
JQuery UI Plugins
Create stunning UI designs using the customizable premium JQuery ui plugins. Use the plugins to convert your entire webpage format into a book or a photo album, or include graphs and other interesting geometric representations, or include magnifying options on the webpage, or even add full width slider layouts with ease. The best plugins allow users to create customized backgrounds, featured color tiles, unique drop down items, background animations, hover- expand options and so on as well.
JQuery Gallery Plugins
Display your best photos in style using the JQuery gallery plugins. Include creative grid layout options, sort and filter features, search gallery options, one-click slideshow popup options, and sidebar preview option with ease using the free extensions. Also include options for users to select how many images to be displayed per page in gallery, options to enter and exit slideshows and also automatic reshuffling on the preview pane with the plugin as well. Use the included jQuery plugin tutorial to use the advanced features too.
JQuery Lightbox Plugins
The JQuery lightbox plugins allow users to present photos in frames while dimming the background, offering a professional look to the images. Use the premium plugins to create varying background effects such as complete light dim, color background, or a background based on the image color gradients as well. Also the plugins can be used to control the way the images are brought to the forefront, the size of the frame and the border styles and thickness, and also the text to be included with the images as well.
JQuery Calendar Plugins
Create sleek and stylish calendar applications in your website using the awesome JQuery calendar plugins. The plugins allow the developers to control the color and appearance of the calendar widget, the date and year format settings, and even the positioning of the calendar tiles with ease. Also the extensions allow users to add schedules, organize events, create milestones and timelines and even add images and pictures to specific dates to create an online photo journal as well.
JQuery Table Plugins
Gain complete control over tables using the JQuery table plugins. The plugins enable easy creation, modification and customization of tables and allow users to create anything from simple data table to price tables with ease. Adjust and set the width and height of table columns, set the background for the tables, include search and sort options, allow relevance based listing, and even toggle text position inside the table elements. The free extensions also allow users to create flexible grids as well.
JQuery Menu Plugins
The JQuery menu plugins allow for some of the best menu styles to be included in the web page. Use the addons to create accordion effects, smartphone styled popup effects, color changer styles and even neatly layered dropdown effects to your menu navigation bar. Also control the way the menus behave on expansion and collapse, and change the color, background, size and even the text within the menu bar. The options provided allow users to control the orientation of the menu bar as well.
JQuery Autocomplete Plugins
Enable google like search options, with the easy-to-use JQuery autocomplete plugins with ease. Create autofill dropdown lists and choose to include what your users want to see. Obtain data from the browser, or google or even your own webpage and display professional search alternatives. Use the plugins to create autocomplete dropdowns complete with description, or just keywords, or as date picker, or even in forms. Use the included jQuery plugin tutorial to add more options to the page as well.
JQuery Pagination Plugins
Manage the content in your site better with the best JQuery pagination plugins. Download the plugins to split and order your page into intelligent segments, link them effectively using hyperlinks, sort them based on preferences and even include dynamic pagination with ease. The plugins work perfectly with Twitter bootstrap and allow for a seamless integration. Also include cool options such as automatic page turn, smooth scroll browsing, key word search and sort, and also include delay between page links.
Jquery Tabs Plugins
Make navigation through your webpage more interesting with the Jquery Tabs Plugins. The free plugins allow users to create a tabbed navigation panel between various sections of the page, include awesome styles for the tabs, control the CSS and scripting for smoother transitions, and even change the color and fonts with ease. The premium plugins also allow developers to create the vertical feedback, social media integration, and page sharing tabs and create links within them as well.
Jquery Popup Plugins
The Jquery popup plugins enable developers to create interactive popups that can be controlled in every possible way. Change the appearance, popup behavior, size and width of the popup, the transparency and even the text styles from a single control panel using the extensions. Also choose from hundreds of skins and frames to be added to the popups as well using the plugins. Delay the close button appearance and include hover options as well in the popup page.
Jquery Search Plugins
Include intelligent search options to your page with the Jquery search plugins. Integrate page elements and keywords in the page to the database and allow easy navigation of the site, or borrow services from other search engines and create web searches within your page, or even link multiple websites or choose target websites for quick search returns using the best addons as well. And you can also include live search updates in the drop down as well.
Jquery is an awesome platform that not just reduces the workload of coding but also enhances the functionality of the site to new heights with its numerous plugins. With a jQuery plugin tutorial available with every plugin download, the platform also offers no strain to beginning developers and users as well.