properties-source.mustache revision 4b5178c91f1de373c48d03d7675924a83f5573e5
<style>
.example #corn{
background: url({{{componentAssets}}}/images/corn.jpg);
width: 232px;
height: 181px;
-moz-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
margin: 2px 0 1em;
border: none;
}
.example #ruler{
width: 656px;
height: 42px;
background: url("{{{componentAssets}}}/images/ruler_ticks.png") repeat-x scroll -1px 24px #DDCEB7;
}
.example .yui3-button {
margin: 0 0.2em;
}
.example .btn-get{
margin-left: 4em;
}
#input {
height: 1.6em;
}
</style>
<body>
<div id="ruler"></div>
<div id="corn"></div>
<label>Width:</label>
<input id="input" size="2" value="550"> px
<button class="yui3-button btn-set">Set</button>
<button class="yui3-button btn-get">Get</button>
<label>Width:</label>
<span id="output"></span> px
<script>
YUI().use('node', 'button', function(Y) {
var corn = Y.one('#corn'),
getButton = Y.one('.example .btn-get'),
setButton = Y.one('.example .btn-set'),
input = Y.one('.example #input'),
output = Y.one('.example #output');
Y.one('.btn-get').on('click', function(e) {
var width = corn.get('offsetWidth');
output.setContent(width); // display width near the get button
});
Y.one('.btn-set').on('click', function(e) {
var value = input.get('value'),
width = corn.get('offsetWidth');
if (value == '') {
input.set('value', width);
} else if (!isNaN(parseInt(value))) { // if the value in the input is a number
corn.set('offsetWidth', value);
output.setContent(''); // clear out the value near the get button
}
});
});
</script>