asked on

jquery tutorial, don't get it

I am fairly new to jquery. after reading thru the plugin tutorial

http://docs.jquery.com/Plugins/Authoring

I got stuck on 3 things.

1. under Maintaining Chainability, what does the following statement do?

$this.width( $this.width() );

it seems it is looking up the element/s width, then set its width to what it already is.

2. under Defaults and options

(function( $ ){

$.fn.tooltip = function( options ) {

// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
'location' : 'top',
'background-color' : 'blue'
}, options);

return this.each(function() {

// Tooltip plugin code here

});

};
})( jQuery );

How is settings ever used? it seems to be a variable defined in the plugin scope, then never used for anything, unless the name "settings" has a special meaning, which would be hard to understand based on how it looks.

3. under plugin methods, here is a really tough one

$.fn.tooltip = function( method ) {

// Method calling logic
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}

};

the best I can tell
Array.prototype.slice.call( arguments, 1 ) is a way of converting "arguments" into an array from the first to the last part. But I can figure out what exactly is "arguments" here. I don't see any args passed in for any of the methods: init, show, etc.

please help with some "for dummies" explanation. this all still seem like black magic.

Scott Fell

This is a great tutorial http://www.codecademy.com/tracks/jquery

bhomass

ASKER

was that an answer or an advertisement?

Scott Fell

please help with some "for dummies" explanation. this all still seem like black magic.

It's a great source to get you started. Instead of just copy and pasting code, you should understand what you are doing. It contains interactive tutorials where you learn by doing.

It is an answer!

bhomass

ASKER

this forum as any other of its kind recommends responses be more than just a silly link. respond to what is asked if you are an expert. posters are looking for interactions not a "go read it yourself" instruction. that I can get from any old preacher.

Scott Fell

I did not post a go read it yourself link. I posted a link to a very good tutorial about jquery where if you spend some time getting to know and understand the basics you will understand what you are asking. Sometimes a link to an outside article is the very answer people are looking for and contains the answer in good format. Sometimes the link may not be what you need.

In either case, it's an answer that may or may not be what you want.

I know from starting out myself, trying to make sense of the jquery examples are not always easy and sometimes confuse more then they help. I have found codeacamey.com a great resource to learn.

To answer your questions more specifically,

1) the example you are pointing to was to really get the point across to use "this". Jquery loops through items in an array that can be a traditional array or an array of html. "this" referes to where it is in the loop. http://remysharp.com/2007/04/12/jquerys-this-demystified/

2) It's an example. It is trying to explain it is better practice to throw your variables in one call

3) It's an example. It is trying to explain the proper way to set up functions.

I don't see any args passed in for any of the methods: init, show, etc

That is because it is an example. They are assuming you are setting these things up in the top portion of the example. Where you see //THIS and //IS and //GOOD is where you difine things.

  var methods = {
    init : function( options ) { 
      // THIS 
    },
    show : function( ) {
      // IS
    },
    hide : function( ) { 
      // GOOD
    },
    update : function( content ) { 
      // !!! 
    }
  };

Open in new window

bhomass

ASKER

thanks for attempting to answer the specifics. I am sure it is all obvious to you. however, I asked for a "for dummies" answer precisely because it is all black magic to me.

if you are in good spirit, let me rephrase what I am looking for.

1. I get the intent to explain "this". my question is whether the example code
$this.width( $this.width() );

is truly as brain dead or am I misinterpreting the statement. the way I read it, it is reading the width and then turn around and set width to what was just read.

2. again, not looking for the intent. this is a technical question. I see "settings" defined, but never used. my question is whether you need to explicitly use "settings" in some other code not shown, or "settings" automatically mean something to jquery, even if you don't explicit use it.

3. your answer seems to be saying "arguments" are things that will be spelled out in the missing code (where the // comments are). however, from what little sense I can make of the code

methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));

is calling that method (such as init), and executing it using some input arguments. but, the two functions "show" and "hide" don't have any input arguments, so what happens when you call ( arguments, 1 )?

or am I completely off, and the arguments mean something totally different, as you are suggesting in your answer?

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

bhomass

ASKER

references a good article