jquery plugin basics tasks

0
votes

I'm trying to develop a simple jquery plugin...

I read the jquery documentation and now I'm just trying to change the div where I appended the plugin, but I honestly don't know what's happening.

this is the jfiddle link: http://jsfiddle.net/9eLqm/

html:

<script type="text/javascript">
$(document).ready(function() {
    $('dropdown').pifo_dropdown({'width': 300, 'fontsize' : 18 }); 
    $('dropdown').pifo_dropdown('show');
});
</script>


<div id="dropdown"> div</div>

javascript:

(function( $ ) { var settings = $.extend( { 'width' : 200, 'maxheight' : 200, 'fontsize' : 13, 'defaultlbl' : 'Select an option' });

var methods = { init : function( options ) {
settings = $.extend(options); // Applying settings } };

 $.fn.pifo_dropdown = function( method, options ) {

// Methods
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.pifo_dropdrown' );
}   

this.fadeOut();

};
}) ( jQuery );

anyone can help me? Thank in advance

1
jqueryjquery-plugins

1 Answers

2
votes

You can not use id element like $('dropdown') this. for using id u need to declare it with $('#dropdown') and suppose if you using class $('.dropdown')

replace

$('dropdown').pifo_dropdown({'width': 300, 'fontsize' : 18 }); 
$('dropdown').pifo_dropdown('show');

With

$('#dropdown').pifo_dropdown({'width': 300, 'fontsize' : 18 }); 
$('#dropdown').pifo_dropdown('show');