Post
Ask Question

Create JQuery Plugin

  1. (function ($)  
  2. {  
  3.     $.fn.changebg = function (options)  
  4.     {  
  5.         var settings = $.extend(  
  6.         {  
  7.             speed: "1000",  
  8.             color: "#556b2f",  
  9.             backgroundColor: "white",  
  10.             width: "200px"  
  11.         }, options);  
  12.         return this.css(  
  13.         {  
  14.             color: settings.color,  
  15.             backgroundColor: settings.backgroundColor,  
  16.             width: settings.width  
  17.         });  
  18.     };  
  19.     $.fn.moveright = function (options)  
  20.     {  
  21.         var settings = $.extend(  
  22.         {  
  23.             position: "200px"  
  24.         }, options);  
  25.         return this.css(  
  26.         {  
  27.             'margin-left': settings.position,  
  28.             '-webkit-transition': 'margin-left 2s',  
  29.             transition: 'margin-left 2s'  
  30.         });  
  31.         return this;  
  32.     };  
  33. }(jQuery));  
Save The above as "myplugin.js",
  1. <html>  
  2.   
  3.     <head>  
  4.         <title>My jQuery Plugin</title>  
  5.         <script src="http://code.jquery.com/jquery-1.11.0.js"></script>  
  6.         <script src="myplugin.js"></script>  
  7.         <script>  
  8.         $(document)  
  9.             .ready(function ()  
  10.             {  
  11.                 $(".animate")  
  12.                     .click(function ()  
  13.                     {  
  14.                         $(this)  
  15.                             .changebg(  
  16.                             {  
  17.                                 backgroundColor: "green",  
  18.                                 color: "white"  
  19.                             })  
  20.                             .moveright(  
  21.                             {  
  22.                                 position: "300px"  
  23.                             })  
  24.                     });  
  25.                 $(".animate1")  
  26.                     .click(function ()  
  27.                     {  
  28.                         $(this)  
  29.                             .moveright(  
  30.                             {  
  31.                                 position: "500px"  
  32.                             })  
  33.                     });  
  34.             });  
  35.         </script>  
  36.         <style type="text/css">  
  37.         .animate {  
  38.             height: 100px;  
  39.             width: 100px;  
  40.             background-color: red;  
  41.             position: relative;  
  42.         }  
  43.           
  44.         .animate1 {  
  45.             height: 200px;  
  46.             width: 200px;  
  47.             background-color: yellow;  
  48.             position: relative;  
  49.         }  
  50.         </style>  
  51.     </head>  
  52.   
  53.     <body>  
  54.         <div class="animate"> my Plugin Animation </div>  
  55.         <div class="animate1"> my Plugin Animation </div>  
  56.         </div>  
  57.     </body>  
  58.   
  59. </html>