If you find this article useful, consider making a small donation to show your support for this web site and its content.
DiscountASP
AboutMe
About me:
Hi. My name is Farooq Kaiser and I'm a software developer from Toronto, Canada.

Did you know.. How to develop Jquery Plugin?

by Farooq Kaiser 26. February 2010 06:34

jQuery is a lightweight cross-browser JavaScript library. It is very easy to build a plugin that can extend the jquery functionality and that Plugin can be reused. Here is Jquery plugin structure.

   1: jQuery.fn.pluginName = function(){};

Let's put together a working sample. Here is jquery input validation plugin.

   1: <html xmlns="http://www.w3.org/1999/xhtml" >
   2: <head>
   3:     <title>Test Page</title>
   4:      <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
   1:  
   2:      <script type="text/javascript"> 
   3:       $(document).ready(function() {
   4:            jQuery.fn.validate = function() {
   5:                 return this.each(function(){
   6:                 if(this.value == "" || this.value == undefined)
   7:                 alert(this.id + " is required field");
   8:               });
   9:               };
  10:             });
  11:             
  12:         function testPlugin()
  13:         {
  14:             $("input").validate();
  15:         }
  16:         
</script>
   5: /head>
   6: body>
   7: ile Name <br />
   8: <input id="fileName" name="fileName" type="text" />
   9: <input id="Validate" type="button" onclick="return testPlugin();"  value="Validate"  />
  10: /html>

Please feel free to leave any comments. Thanks

Currently rated 3.0 by 1 people

  • Currently 3/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , ,

Did you know

Comments

Jobs Autos Real estate Videos Power by Google