i'm experimenting writing plugin jquery doesn't follow pattern outlined int document: http://docs.jquery.com/plugins/authoring
it follows:
(function( $ ){ $.fn.insert = { 'hello': function(text){ $(this).text(text); }, 'goodbye': function(){ alert('goodbye'); } } })( jquery ); the page instantiates plugin code:
$(document).ready( function(){ $('#test').insert.goodbye(); $('#test').insert.hello('blahblahblah'); }); in form, .goodbye() initializes correct, obvious, .hello() not. on inspecting this in firebug, shows scope belong containing function. (cue facepalm).
how give function inside 'hello' access selected dom objects? i'm not interested in having discussion why or why not 1 should create plugin in fashion. it's more academic exercise me.
p.s. should note error when hello() portion attempts run: doc.createdocumentfragment not function.
update
(function( $ ){ $.fn.insert = { 'el': this, 'hello': function(text){ $(this.el).text(text); }, 'goodbye': function(){ alert('goodbye'); } } })( jquery ); made update code. fyi, firebug does show this.el references dom object in question, , text still carrying passed string, it's still not inserting text element, , still giving me aforementioned error.
i'm not sure... works:
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> (function($){ $.fn.myinsert = function(){ this.hello = function(text){ $(this).text(text); }; this.goodbye = function(){ alert('goodbye'); }; return this; //this gotcha }; })(jquery); $(function(){ var test = $('#test'); test.myinsert().goodbye(); test.myinsert().hello('heyo'); }); </script> </head> <body> <div id="test">my name is</div> </body> </html> 
Comments
Post a Comment