http:\/\/www.danwebb.net\/2006\/9\/3\/low-pro-unobtrusive-scripting-for-prototype<\/p>\n
Low Pro is a set of extensions to the Prototype library that make it easier to implement unobtrusive DOM scripting and forms the JavaScript component of the Unobtrusive JavaScript Plugin For Rails but can be used separately. It\u2019s essentially a compilation of various tried and tested, previously published techniques adapted for use with Prototype and mainly centres around enhancing event handling and DOM manipulation. Low Pro uses portions of code and\/or inspiration from Dean Edwards, Matthias Miller, Sylvian Zimmer, Justin Palmer and John Resig.<\/p>\n
To start out with Low Pro, download the 0.2 distribution from my Subversion repository and included it along with the Prototype JavaScript file. Low Pro depends on Prototype so don\u2019t forget to include it first:<\/p>\n
<script src=”\/js\/prototype.js” type=”text\/javascipt”><\/script><script src=”\/js\/lowpro.js” type=”text\/javascipt”><\/script>
\nIn the distribution is a standard commented version and a compressed version. Now for a quick tour of the features.<\/p>\n
DOM navigation and manipulation
\nAs Prototype\u2019s DOM manipulation is very innerHTML centred Low Pro adds few useful methods to elements to help you navigate and manipulate the DOM in the nice clean W3C way.<\/p>\n
$('doomed').remove(); \/\/ removes the element from the DOM and returns it$('item').nextElement(); \/\/ returns the next element in the document (excluding text nodes)$('item').previousElement(); \/\/ guess…$('thing').insertAfter(element); \/\/ the DOM gives you insertBefore but not this$('bong').replaceElement(element); \/\/ replaces an element and returns the substitute
\nYou can get to all of these methods via the DOM object as well.<\/p>\n
DOM.remove(element);DOM.insertAfter(oneElement, anotherElement);
\nAlso, Low Pro aids you in creating node structures via the DOM with a Prototype version of DOM Builder. Each HTML tag has a builder function called $[tag]. You can nest these to create complex DOM structures easily.<\/p>\n
var listItem = $li({ id : 'item-1' }, $strong(“Some text”) ); \/\/ returns a node equivilent to: <li id=”item-1″><strong>Some text<\/strong><\/li>$('a_list').appendChild(listItem);
\nRead more about DOM builder over at The Web\u2019s Bollocks.<\/p>\n
Events
\nThe event handling code in Prototype is one of it\u2019s weakest points so Low Pro replaces out Event.observe() and Event.stopObserving() totally with a version of Dean Edwards\u2019 addEvent() and removeEvent() routines. This offers much more consistency across browsers and a few neat fixes:<\/p>\n
Event.observe('thing', 'click', function(e) { this.hide() \/\/ this refers to the triggering element. return false; \/\/ stops the default behaviour (even in Safari!)});
\nAll other methods remain backwards compatible. For convenience, observe() and stopObserving() are mixed in to elements. A trigger method is also provided to allow you to trigger event handlers programmatically.<\/p>\n
Event.trigger(element, 'click');
\nEvent.onReady() allows you to stack up callbacks that will trigger as soon as the DOM is ready rather than onload which triggers after the whole page is loaded.<\/p>\n
Event.onReady(function() { $('thing').visualEffect('highlight');});
\nRepeated calls will simply stack up callbacks.<\/p>\n
Behaviours
\nLow Pro adds declaritive behaviours to Prototype. Event.addBehavior() allows you to specify element behaviours via CSS selectors.<\/p>\n
Event.addBehavior({ 'a.todo:click' : function(e) { new Ajax.Request('todo\/add', … ); }, 'div.feature:mouseover' : function(e) { this.hide(); }});
\nThese behaviours are applied as soon as the DOM is loaded and are reapplied to new elements after Ajax calls. An alternative more OO approach is to create a Behaviour \u2018class\u2019 which can be attached to elements. Each element gets it\u2019s own instance of the behaviour class that retains it\u2019s state throughout the life of the page. Within behaviour classes, this.element always points to the attached element.<\/p>\n
var Resize = Behavior.create({ initialize : function() { \/\/ gets called when the element is loaded. }, onclick : function(e) { \/\/ use on methods to set event handlers on a object }});
\nFinally, I\u2019ve included Sylvian Zimmer\u2019s optimisation of the $$ selector which speeds up node selections quite dramatically. It is, in my experience, a little bit buggy though so if you encounter problems you can revert to the normall $$ code.<\/p>\n
LowPro.optimize$$ = false;
\nSo, that\u2019s it. Any feature suggestions are much appreciated as are bug reports. Please log them on my Trac and I\u2019ll fix them ASAP.<\/p>\n
Update: Low Pro is compatible with any of the Prototype 1.5 releases but will not work with 1.4 or below.<\/p>\n","protected":false},"excerpt":{"rendered":"
http:\/\/www.danwebb.net\/2006\/9\/3\/low-pro-unobtrusive-scripting-for-prototype Low Pro is a set of exte… <\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[28],"tags":[],"class_list":["post-4","post","type-post","status-publish","format-standard","hentry","category-computer"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=\/wp\/v2\/posts\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4"}],"version-history":[{"count":0,"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=\/wp\/v2\/posts\/4\/revisions"}],"wp:attachment":[{"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/opgogo.com\/blog2\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}