basic.html revision 6027e48d02c33691decbb7d6a0f7d6b04e193c0c
<!doctype html>
<html>
<head>
<title>Y.StyleSheet simple example page</title>
<style type="text/css">
#x {
background-color: #eee;
color: #fff;
border: 10px solid #ccc;
width: 90%;
margin: 2em auto;
overflow: hidden;
}
.foo, .bar {
height: 3em;
width: 3em;
background: #fff;
margin: 1em;
display: inline;
float: left;
}
</style>
</head>
<body>
<h1>Y.CSS simple test</h1>
<div class="markup">
<div id="x">
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
<div class="foo"></div>
<div class="bar"></div>
</div>
</div>
<input type="button" name="set" id="set" value="set">
<input type="button" name="unset" id="unset" value="unset">
<script type="text/javascript" src="/build/yui/yui.js"></script>
<script type="text/javascript">
YUI({
base: '/build/',
filter: 'debug'
}).use('node','stylesheet',function (Y) {
Y.on('click',function (e) {
Y.StyleSheet('test').set('.foo', {
width: '4em',
background: '#000',
cssFloat: 'right',
opacity : .5
});
},'#set');
Y.on('click',function (e) {
Y.StyleSheet('test').unset('.foo', ['width','background','cssFloat','opacity']);
},'#unset');
});
</script>
</body>
</html>