basic.html revision 00f5227c72bff2a1b314aff7ee1829c303e74462
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Y.StyleSheet simple example page</title>
<link type="text/css" rel="stylesheet" href="/assets/dpSyntaxHighlighter.css">
<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" src="/build/oop/oop.js"></script>
<script type="text/javascript" src="/build/event/event.js"></script>
<script type="text/javascript" src="/build/dom/dom.js"></script>
<script type="text/javascript" src="/build/node/node.js"></script>
<script type="text/javascript" src="/build/stylesheet/stylesheet.js"></script>
<script type="text/javascript">
YUI().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>
<script type="text/javascript" src="/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript" src="/assets/dpSyntaxHighlightExample.js"></script>
</body>
</html>