jQuery Plugins

8:00 AM in , , , , Posted by Delicious Dot Net

The word plugin is often used by software developers to describe a third party application that "hooks" into a main application to extend its functionality. Movable Type hosts an active plugin developer community whose plugins have greatly enhanced the capabilities of Movable Type.

A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods. There are plenty of jQuery plug-in available which you can download from repository link at http://jquery.com/plugins.

Using a Jquery Plugin

  • we have to include plug-in file very similar to jQuery library file in the <head> of the document, to make plug-in methods available to our application or page.
  • We must include the plug-in after the main jQuery source file or Jquery library file, and before our custom JavaScript code.
  • Following example shows how to include jquery.plug-in.js plugin:
    • Ex:- <script src="jquery.plug-in.js" type="text/javascript"></ script>


  • As with all jQuery scripts we need to first call the jQuery library. I have recently started linking to the google hosted library rather than downloading it directly to my server. This ensures that I’ll always have the latest version without having to continually download it. The google hosted library will also be in the cache of most computers as most people will have visited google at some point. The main advantage of this is that it will reduce loading times. To do this we put the following code in the head section of our page.
    • Ex:- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>




    • <html>
<head>
<title> Title </title>
   <script type="text/javascript" src="/jquery/jquery-1.4.2.js"> </script>

   <script src="jquery.plug-in.js" type="text/javascript"> </script>

   <script src="custom.js" type="text/javascript"> </script>

   <script type="text/javascript" language="javascript">
   
   $(document).ready(function() {

    /* Our custom code */

   });

   </script>
</head>
<body>

   /*...........*/

</body>
</html>

    Share it

    0 comments:

    Post a Comment