oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgraded yui to 2.2.2 and yui-ext to 1.0.1a

Browse source
This commit is contained in:
JT Smith 2007-07-05 04:23:55 +00:00
parent 4d9af2c691
commit 547ced6500
1992 changed files with 645731 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

38
www/extras/yui/examples/dom/addclass.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: addClass</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.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">
YAHOO.namespace('example.dom');
YAHOO.example.dom.init = function() {
var add = function(e) {
YAHOO.util.Dom.addClass('test', 'bar');
alert(document.getElementById('test').className);
};
YAHOO.util.Event.addListener(document, 'click', add);
};
YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="css/dom.css">
</head>
<body>
<div id="doc">
<h1>DOM Example: addClass</h1>
<p>This example demonstrates how to use Dom.addClass to add a class to a given element.</p>
<p>Click anywhere to test.</p>
<div class="foo" id="test"></div>
</div>
</body>
</html>

79
www/extras/yui/examples/dom/css/dom.css Normal file
View file

@ -0,0 +1,79 @@
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.10.0
*/
body {
margin:0;
font:small arial;
}
h1 {
color:#666;
margin:0;
font:bold 150% palatino, georgia;
}
#hd img {
vertical-align:middle;
}
#hd h1 {
display:inline;
margin:0 0 0 20px;
vertical-align:middle;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#doc {
margin:10px;
}
#examples {
margin:60px 40px;
}
#examples li {
margin-bottom:1em;
}
#examples li a {
font:85% verdana;
}
#example li a:link {
color:#666;
}
#test {
background:#ccc;
font-size:0;
width:10px; height:10px;
position:absolute;
z-index:10;
}
#fade {
background:#ccc;
width:200px; height:200px;
}
#end {
background:red;
font-size:0;
position:relative;
top:300px;left:200px;
width:10px; height:10px;
}
#collection .test {
color:green;
}

49
www/extras/yui/examples/dom/getelementsbyclassname.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: getElementsByClassName</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.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">
YAHOO.namespace('example.dom');
YAHOO.example.dom.init = function() {
var count = function(e) {
var elements = YAHOO.util.Dom.getElementsByClassName('test');
alert(elements.length);
};
YAHOO.util.Event.addListener(document, 'click', count);
};
YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="css/dom.css">
</head>
<body>
<div id="doc">
<h1>DOM Example: getElementsByClassName</h1>
<p>This example demonstrates how to use Dom.getByClassName to get a collection of elements with a particular class name.</p>
<p>Click anywhere to test.</p>
<div class="test">div class=&quot;test&quot;</div>
<div class="test2 test">div class=&quot;test2 test&quot;</div>
<div class="test test2">div class=&quot;test test2&quot;</div>
<div class="test ">div class=&quot;test &quot;</div>
<div class=" test ">div class=&quot; test &quot;</div>
<div class=" test2 test">div class=&quot; test2 test&quot;</div>
<div class="test test2 ">div class=&quot;test test2 &quot;</div>
<div class="test2 test ">div class=&quot;test2 test &quot;</div>
<div class=" test2 test">div class=&quot; test2 test&quot;</div>
<div class=" test2 test ">div class=&quot; test2 test &quot;</div>
<div class="test3 test2 test">div class=&quot;test3 test2 test&quot;</div>
<div class="test2 test3">div class=&quot;test2 test3&quot;</div>
</div>
</body>
</html>

40
www/extras/yui/examples/dom/getstyle.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: getStyle</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.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">
YAHOO.namespace('example.dom');
YAHOO.example.dom.init = function() {
var change = function(e) {
var bgColor = YAHOO.util.Dom.getStyle('end', 'backgroundColor');
YAHOO.util.Dom.setStyle('test', 'backgroundColor', bgColor);
};
YAHOO.util.Event.addListener(document, 'click', change);
};
YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="css/dom.css">
</head>
<body>
<div id="doc">
<h1>DOM Example: getStyle</h1>
<p>This example demonstrates how to use Dom.getStyle to get the current style of an element.</p>
<p>Click anywhere to get the background color of the red element and apply it to the gray element.</p>
<div id="test"></div>
<div id="end"></div>
</div>
</body>
</html>

41
www/extras/yui/examples/dom/getxy.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: getXY</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.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">
YAHOO.namespace('example.dom');
YAHOO.example.dom.init = function() {
var move = function(e) {
var xy = YAHOO.util.Dom.getXY('end');
YAHOO.util.Dom.setXY('test', xy);
};
YAHOO.util.Event.addListener(document, 'click', move);
};
YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="css/dom.css">
</head>
<body>
<div id="doc">
<h1>DOM Example: getXY</h1>
<p>This example demonstrates how to use Dom.getXY to get an elements position.</p>
<p>Click anywhere and the grey element will move to the red element.</p>
<div id="test"></div>
<div id="end"></div>
</div>
</body>
</html>

37
www/extras/yui/examples/dom/hasclass.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: hasClass</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.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">
YAHOO.namespace('example.dom');
YAHOO.example.dom.init = function() {
var test = function(e) {
alert(YAHOO.util.Dom.hasClass('test', 'foo'));
};
YAHOO.util.Event.addListener(document, 'click', test);
};
YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="css/dom.css">
</head>
<body>
<div id="doc">
<h1>DOM Example: hasClass</h1>
<p>This example demonstrates how to use Dom.hasClass to test whether a class is assigned to a given element.</p>
<p>Click anywhere to test.</p>
<div class="foo2 foo bar" id="test"></div>
</div>
</body>
</html>

BIN
www/extras/yui/examples/dom/img/logo.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 705 B

27
www/extras/yui/examples/dom/index.html Normal file
View file

@ -0,0 +1,27 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library - Dom</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/dom.css">
</head>
<body>
<div id="doc">
<div id="hd">
<img src="img/logo.gif">
<h1>YUI Library - Dom</h1>
</div>
<div id="bd">
<ul id="examples">
<li><a href="setxy.html">Set X and Y coordinates</a></li>
<li><a href="getxy.html">Get X and Y coordinates</a></li>
<li><a href="setstyle.html">Set CSS style of an element</a></li>
<li><a href="getstyle.html">Get CSS style of an element</a></li>
<li><a href="hasclass.html">Testing for the presence of a className</a></li>
<li><a href="removeclass.html">Remove a given className from an element</a></li>
<li><a href="addclass.html">Add a given className to an element</a></li>
<li><a href="getelementsbyclassname.html">Get a collection of elements by className</a></li>
</ul>
</div>
</div>
</body>
</html>

38
www/extras/yui/examples/dom/removeclass.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: removeClass</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.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">
YAHOO.namespace('example.dom');
YAHOO.example.dom.init = function() {
var remove = function(e) {
YAHOO.util.Dom.removeClass('test', 'foo');
alert(document.getElementById('test').className);
};
YAHOO.util.Event.addListener(document, 'click', remove);
};
YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="css/dom.css">
</head>
<body>
<div id="doc">
<h1>DOM Example: removeClass</h1>
<p>This example demonstrates how to use Dom.addClass to remove a class from a given element.</p>
<p>Click anywhere to test.</p>
<div class="bar foo" id="test"></div>
</div>
</body>
</html>

38
www/extras/yui/examples/dom/setstyle.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: setStyle</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.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">
YAHOO.namespace('example.dom');
YAHOO.example.dom.init = function() {
var fade = function(e) {
YAHOO.util.Dom.setStyle('fade', 'opacity', .5);
};
YAHOO.util.Event.addListener(document, 'click', fade);
};
YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="css/dom.css">
</head>
<body>
<div id="doc">
<h1>DOM Example: setStyle</h1>
<p>This example demonstrates how to use Dom.setStyle to set the opacity of an element.</p>
<p>Click anywhere to set the element's opacity.</p>
<div id="fade">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat </div>
</div>
</body>
</html>

39
www/extras/yui/examples/dom/setxy.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DOM Example: setXY</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.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">
YAHOO.namespace('example.dom');
YAHOO.example.dom.init = function() {
var move = function(e) {
var xy = [YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)];
YAHOO.util.Dom.setXY('test', xy);
};
YAHOO.util.Event.addListener(document, 'click', move);
};
YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
</script>
<link rel="stylesheet" type="text/css" href="css/dom.css">
</head>
<body>
<div id="doc">
<h1>DOM Example: setXY</h1>
<p>This example demonstrates how to use Dom.setXY to set an elements position.</p>
<p>Click anywhere and the element will move to the click point.</p>
<div id="test"></div>
</div>
</body>
</html>