Your SlideShare is downloading. ×
jQuery Plugin
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jQuery Plugin

727
views

Published on

This was my presentation at Silicon Valley Code Camp 09. The material can be downloaded from : http://my/personal/rbiggs/Blog/default.aspx

This was my presentation at Silicon Valley Code Camp 09. The material can be downloaded from : http://my/personal/rbiggs/Blog/default.aspx

Published in: Technology, Business

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
727
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery Plugins
    • Authoring Code for Reuse
  • 2. Modularization
    • Write once, throw it away.
    • Write once use it again.
    • Initial cost in time to implement, savings realized later.
  • 3. jQuery Integration
    • Attach it directly to the jQuery object.
    • $.plugIn1 = function() {
      • console.log("This is plugin ONE!");
      • };
  • 4.
    • Put your code inside a jQuery closure:
    • (function($) {
    • // Define method here.
    • $.plugIn2 = function() {
    • console.log("Plugin TWO is working!");
    • };
    • })(jQuery);
  • 5.
    • Use jQuery’s extend method:
    • $.fn.extend({
    • plugIn4 : function() {
      • this.plugIn4.number = 1;
        • return this.each(function(){
      • console.log("This is element number: "
      • + $.fn.plugIn4.number );
    • $.fn.plugIn4.number += 1;
    • });
    • }
    • });
  • 6.
    • We can enclose the extended plugin in a jQuery closure and give it options:
    • (function($) {
      • $.fn.extend({
      • hilite : function(options) {
          • return this.each(function() {
      • // Define what you want to do with your items.
    • });
    • }
      • });
    • })(jQuery);
  • 7.
    • Attaching code directly to the jQuery object is the most limited type of plugin. This is a very poor choice.
    • Using a jQuery closure provides namespacing, but lacks built-in jQuery functionality. This is appropriate for many types of widgets
    • Using the jQuery extend method gives your plugin all the built-in power that native jQuery methods have.
  • 8. We’re Hiring!
    • Bee Tan, Hiring Manager
    • 510 307-8225

×