The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 69 more by this user. Created: 06/2/10
Last CDN Push: 02/9/11
Build Tag: gallery-2011.02.09-21-32
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.1
Free for use.
An extension of Widget that provides many useful enhancements, such as the ability to clone a widget, passing in a css class per instance, toggling visibility, and a convenient way to create new widgets and components.
All AlloyUI widgets inherit from this base class.
To view all available events and configuration attributes, view the documentation.
You can utilize the component in a variety of ways, like so:
<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2011.02.09-21-32',
modules: {
'gallery-aui-skin-base': {
fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
type: 'css'
},
'gallery-aui-skin-classic': {
fullpath: 'http://yui.yahooapis.com/gallery-2011.02.09-21-32/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
type: 'css',
requires: ['gallery-aui-skin-base']
}
}
}).use('gallery-aui-component', function(Y) {
// Just this instance of the component will have the css class "lfr-panel" on it's boundingBox
// and "lfr-panel-content" on it's contentBox
var component1 = new Y.Component({
cssClass: 'lfr-panel'
}).render();
// Create a component to clone from
var component2 = new Y.Component({
visible: false,
width: 30
}).render();
// Clone component2
var component3 = component2.clone();
// Clone component2 with new options
var component4 = component2.clone({
width: 100
});
// Toggle component4
component4.toggle(); // component4 is now visible
// Creating new Component classes
var UserComponent = Y.Component.create({
NAME: 'usercomponent',
ATTRS: {
age: {
value: 0
},
firstName: {
value: ''
},
lastName: {
value: ''
}
},
UI_ATTRS: ['age', 'firstName', 'lastName'],
prototype: {
renderUI: function() {
this.ageField = Y.Node.create('<input id="age" />');
this.firstNameField = Y.Node.create('<input id="firstName" />');
this.lastNameField = Y.Node.create('<input id="lastName" />');
this.get('contentBox').append([this.ageField, this.firstNameField, this.lastNameField]);
},
_uiSetAge: function(value) {
this.ageField.set('value', value);
},
_uiSetFirstName: function(value) {
this.firstNameField.set('value', value);
},
_uiSetLastName: function(value) {
this.lastNameField.set('value', value);
}
}
});
// Create a new instance of our custom component
var nateCavanaugh = new UserComponent({
age: 10,
firstName: 'Nate',
lastName: 'Cavanaugh'
}).render();
// Updating the data (ui is automatically synced)
nateCavanaugh.set('age', 30);
});
Subject | Author | Date |
---|---|---|
Why? | John Lindal | 06/9/10 |
Re: Why? | Murray Macchio | 06/10/10 |
Re: Why? | Murray Macchio | 06/10/10 |
Styling | Eike Hirsch | 06/11/10 |
Re: Why? | Eduardo Lundgren | 06/11/10 |
Re: Styling | Eduardo Lundgren | 06/11/10 |
Re: Why? | Murray Macchio | 06/11/10 |
Re: Why? | Eduardo Lundgren | 06/11/10 |
Re: Styling | Eike Hirsch | 06/14/10 |
Parallel thinking | Peter Peterson | 06/15/10 |
All code on this site is licensed under the BSD License unless stated otherwise.