properties.mustache revision 090376d4be54e832a15be873e1561b95d3e94e0a
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<link href="{{componentAssets}}/node.css" rel="stylesheet" type="text/css">
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<div class="intro">
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff <p>This example demonstrates how to retrieve and use a `Node` instance
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff and access DOM properties.</p>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff <p>Press a button to get or set the `offsetWidth` of the `div`
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff containing the corn image.</p>
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<div class="example">
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney{{>properties-source}}
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff<div style="color:#aaa; display:block; font-size:90%; margin-top:1em;">Image derived from
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff<a href="http://www.flickr.com/photos/29278394@N00/3934433763/" target="_blank">
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff"ear of corn"</a>, by normanack</div>
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<h2>Setting up the HTML</h2>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff <div id="ruler"></div>
1b57eed871e84e86e34de2de10184018815651cfJeff Conniff <div id="corn">
dc594731d57088253362cec2c434267c76058461Jeff Conniff <div class="ruler-marker"></div>
dc594731d57088253362cec2c434267c76058461Jeff Conniff <div id="output">? px</div>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff <label>Width:</label>
1b57eed871e84e86e34de2de10184018815651cfJeff Conniff <input id="input" size="2" value="550"> px
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff <button class="yui3-button btn-set">Set</button>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff <button class="yui3-button btn-get">Get</button>
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<h2>Getting a Node Instance</h2>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff<p>The `Y.one` method accepts a Selector or HTML element and
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffreturns a Node instance. First we'll set up some variables
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Connifffor the node's representing our HTML.</p>
1b57eed871e84e86e34de2de10184018815651cfJeff Conniff var corn = Y.one('#corn'),
1b57eed871e84e86e34de2de10184018815651cfJeff Conniff input = Y.one('.example #input'),
1b57eed871e84e86e34de2de10184018815651cfJeff Conniff output = Y.one('.example #output');
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<h2>Accessing Node Properties</h2>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff<p>The properties of a node can be accessed via its `set` and
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff`get` methods.</p>
090376d4be54e832a15be873e1561b95d3e94e0aJeff Conniff<p>In most cases, simple type of properties (strings, numbers, Booleans)
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffpass directly to/from the underlying DOM node, however properties representing
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffother DOM nodes return `Node` or `NodeList` instances.</p>
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<h3>The Get Method</h3>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff<p>We can use the `get` method to read the `offsetWidth` of the `div`
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffcontaining the corn image,
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffwhich includes the style width, padding, and border.</p>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffwidth = corn.get('offsetWidth');
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<h3>The Set Method</h3>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff<p>The Set method can be used to set the value of objects
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff<p>The `offsetWidth` property of an HTML element is read only, however YUI
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffmakes this writeable. This assures that the final `offsetWidth`
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffmatches the value that is set, regardless of borders, padding, or box model.</p>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffcorn.set('offsetWidth', value);
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<h2>Listening for Node Events</h2>
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff<p>We will update the value `offsetWidth` property of the `div`
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniffcontaining the corn image when the Set button is pressed.
1b57eed871e84e86e34de2de10184018815651cfJeff ConniffY.one('.example .btn-set').on('click', function(e) {
4b5178c91f1de373c48d03d7675924a83f5573e5Jeff Conniff corn.set('offsetWidth', value);
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney<h2>Complete Example Source</h2>
3e6a3b2c757d9137fa6f80d05b85fd282c2d55b6Matt Sweeney{{>properties-source}}