att
The att
plugin is used to update DOM attributes on the spirits element and/or listening for DOM attributes being updated. It supports the following methods.
this.att.set('name','value'); // set attribute
this.att.del('name'); // delete attribute
this.att.get('name'); // get attribute
this.att.getmap(); // get atributes as map
this.att.setmap(obj); // set attributes with map
this.att.all(); // get attributes as array
this.att.add('name'); // add attribute listener
this.att.remove('name'); // remove attribute listener
You can set an attribute like this.
gui.Spirit.extend({
onenter: function() {
this.super.onenter();
this.att.set('title', 'Return');
}
});
If you set it to null
, the attribute will be removed. Or you can do this:
this.att.del('title');
You can check if the attribute is specified.
this.att.has('title'); // true
You can of course also get the attribute value.
this.att.get('title'); // 'Return'
Or you can get all the attributes in the form of an object
.
var atts = this.att.getmap();
console.log(atts.title); // 'Return'
You can also set the attributes with an object
.
this.att.setmap({
title: 'Return',
href: '/index.html'
});
You can even get the attributes as an array (of DOM attributes).
var atts = this.att.all();
var att = atts[0];
console.log(att.name, att.value); // 'title', 'Return'
Attribute listeners
You can setup to get a callback whenever an attribute is updated. You'll recieve a simple object with the properties name
and value
.
gui.Spirit.extend({
onconfigure: function() {
this.super.onconfigure();
this.att.add('title');
},
onatt: function(a) {
this.super.onatt(a);
if(a.name === 'title') {
console.log(a.value); // 'Return'
}
}
});
When you are done with an attribute, you can remove the listener.
this.att.remove('title');
When you add or remove attribute listeners, you can use an array or space-separated string to add or remove more than one.
this.att.add('title href').remove(['rel', 'rev']);