This plugin aims at providing some extra functionalities for MooTools Core and MooTools more. It adds a few more methods to the natives Array, Element, Elements, Function, and String. It also expands the flexibility of the Cookie class, provides three more useful mutators, and include other utility classes to make your coding lives easier.
Since this plugin simply extends the existing code of MooTools, no extra setup is required beside making sure this is included after MooTools Core and MooTools More. Please refer to (http://tiger-inc.com/manuals/tiframework/) for the API documentation for this plugin.
Since version 0.3, the class HtmlOptionsJS has been added. It allows you to specify configuration data within the HTML using valid HTML. You won't need to make up some random attributes that would break the W3C validators, add hacks in to use the HTML5 data attributes, or add a whole bunch of class names to your element.
In most cases, people would use this class only if their class can automatically initialize upon the DOM loading. Take for example a class that handles DHTML layers. Rather than adding a bunch of JavaScript calls in a bunch of places, you have one piece of code that looks for the layers and this class is used to specify the configurations. Some code might make this easier.
var MyDHTMLLayerClass = new Class({
Implements: HtmlOptionsJS,
init: function(element, options) {
element = document.id(element);
this.loadAllOptions(element, options);
}
});
document.addEvent('domready', function() {
document.getElements('dhtml_layers').each(function(item) {
new MyDHTMLLayerClass(item);
});
});
// ------------- //
<html>
<head><title>My Page</titl></head>
<body>
<div class="dhtml_layers">
<div class="htmloptionsjs" style="display: none;">
<div class="boolean" title="url">http://some.url.com</div>
</div>
<div class="content">Some other content</div>
</div>
</body>
</html>
Since this class implements the Events and Options class, you automatically gain both of those classes functionalities as well. Refer to the documentation for more information.
Since version 0.2, the class NamedChainJS has been added. It is very similar to the Chain class that comes with the core. However, it associates a key with each function so that you can pass the chain around and allow others to add their function call anywhere within the chain. This allows for more reuseablity with your code.
Take for example, you have a tabs class that uses this chain to show the tab:
var chain = new NamedChainJS();
chain.append('fire_event', function(widget) {
widget.fireEvent('show', [widget, this]);
this.run(); // 'this' is the chain
}, this);
chain.append('show_tab', function(widget) {
// Some code here
this.run();
}, this);
chain.append('show_content', function(widget) {
// Some code here
this.run();
}, this);
chain.run();
Now elsewhere, you add a handler for the show event and you can insert something to happen at certain parts of the chain. Lets say you want to alert a message before the content is shown and slide the wrapper of the content after it is shown, you would have something like the following.
// Observer of the show event
function(widget, chain) {
// Add to chain
chain.insertBefore('show_content', 'alert_message', function() {
// Alert the message
this.run(); // 'this' is the chain
});
chain.insertAfter('show_content', 'slide', function() {
// Run the sliding effect
this.run();
});
}
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus