Friday, April 24, 2009

CSS for JQuery Plugins

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

If you wanted to change the layout of JQuery plugins according to your design, then you have to learn from where to search JQuery Plugins first

Enter in JQuery world / Search for the most suitable plugins
Open the JQuery official website from http://jquery.com/ then click on plugins section from where you can search the appropriate plugin. The direct link for JQuery plugins is http://plugins.jquery.com/. Here you can find thousands of attractive plugins.

Explore and Preview the plugins in action
  1. For instance we are searching for menu plugin. Enter in menu category or search menu from search box. You will find the list of JQuery menus.
  2. Open differnet menus in new windows, Click on "Try out demonstration".
  3. Here you will find the "Demonstration page", You can check the plugins output
Download the Plugin and Understand the existing folder structure
  1. Follow the "Download Example" page to download the source code (in zip format normally)
  2. Folder structure of the source code varies. But the common used folder structure of JQuery plugins is as follows
  • "index.html" / "demo.html" file
  • "css" folder includes the css of that particular plugin
  • "images" folder includes all the images used by the plugin and referent from HTML and/or CSS files
  • "include" / "js" folder this folder contains all javascripts used by that particular plugin, NOTE: Move Jquery.js (main file 1.1 - 1.3.2) if you are using multiple JQuery plugins from every plugins folder to some other location and refer all plugins to that file.
Embed the Plugin's Source code in your website
  1. Now copy the plugin folder to your root folder
  2. Considerable changes are < head > section for metadata reference locations
  3. < script > section (embeded) if any
  4. and < div > section (finally)
Posted by at
Labels: , , , ,

2 comments:

  1. jQuery TutorialsMay 10, 2009 at 9:55 PM

    Nice write up. Good tip on moving all jQuery library files out of plugins, sometimes people forget to do that. However, normally developers do not include jQuery main file in their plugins ...

    ReplyDelete
  2. ZainMay 11, 2009 at 9:43 AM

    I agreed, but as soon as the css developers include the jQuery plugins in their code. They will learn that jQuery main js file is necessary for each plugin and they will also learn that in the specific situation which you have mentioned they have to paste main jQuery file in the plugin folder / Or reference to generic JQuery file in case of multi plugins in the site to preview the plugin in action.

    ReplyDelete

Subscribe to: Post Comments (Atom)