- Replaced color picker form control with a more robust version.
This commit is contained in:
JT Smith
parent
6fe068e42d
commit
6e0470771e
1193 changed files with 342 additions and 223 deletions
79
www/extras/yui-webgui/accordion.js
vendored
79
www/extras/yui-webgui/accordion.js
vendored
|
|
@ -1,79 +0,0 @@
|
|||
// This is a modified version of the accordion tutorial from www.webthreads.de
|
||||
|
||||
|
||||
/*
|
||||
|
||||
var myAccordion = new Accordion(id [, height]);
|
||||
|
||||
id: The id of the div that contains the accordion structure.
|
||||
|
||||
height: An integer representing the height that the accordion should be drawn in pixels. Defaults to the viewport height minus one header width.
|
||||
|
||||
*/
|
||||
|
||||
function Accordion(id, accordionHeight) {
|
||||
// pointer to the accordion container
|
||||
this.accContainer = document.getElementById(id);
|
||||
|
||||
// all items with class = accordionItem
|
||||
this.accItems = YAHOO.util.Dom.getElementsByClassName("accordionItem", "div", this.accContainer);
|
||||
|
||||
// scale the acccordion to the appropriate height
|
||||
this.accordionHeight = 0;
|
||||
var headerHeight = YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div", this.accItems[0])[0].offsetHeight;
|
||||
if (accordionHeight > 0) {
|
||||
this.accordionHeight = accordionHeight;
|
||||
} else {
|
||||
this.accordionHeight = YAHOO.util.Dom.getViewportHeight() - headerHeight;
|
||||
}
|
||||
this.accContainer.style.height = this.accordionHeight + "px";
|
||||
var bodyHeight = this.accordionHeight - (headerHeight * this.accItems.length);
|
||||
YAHOO.util.Dom.getElementsByClassName("accordionBody", "div", this.accItems[0])[0].style.height = bodyHeight + "px";
|
||||
|
||||
// set the default accordion body height
|
||||
this.accItemBodyHeight = 0;
|
||||
|
||||
// iterate over all the accordian elements and store them in an array
|
||||
for (var i=0; i<this.accItems.length; i++) {
|
||||
// set current accordion element as parent to header and body
|
||||
this.accItems[i].parent = this;
|
||||
// set current accordion element's header and body
|
||||
this.accItems[i].header = YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div", this.accItems[i])[0];
|
||||
this.accItems[i].body = YAHOO.util.Dom.getElementsByClassName("accordionBody", "div", this.accItems[i])[0];
|
||||
|
||||
// determine and set the active accordion element
|
||||
if (this.accItems[i].body.offsetHeight > this.accItemBodyHeight) {
|
||||
this.accItemBodyHeight = this.accItems[i].body.offsetHeight;
|
||||
this.activeItem = this.accItems[i];
|
||||
this.activeItem.body.style.height = this.accItemBodyHeight + "px";
|
||||
}
|
||||
|
||||
// register the click event on the header for changing the active element in the accordion
|
||||
YAHOO.util.Event.addListener(this.accItems[i].header, "click", function(){
|
||||
// do nothing if they click on the active header
|
||||
if(this.parent.activeItem == this){
|
||||
return;
|
||||
}
|
||||
|
||||
// shrink animation
|
||||
var shrinkLastAccAnim = new YAHOO.util.Anim(this.parent.activeItem.body, {height:{from:this.parent.accItemBodyHeight, to:0}}, 0.1);
|
||||
|
||||
// expand animation
|
||||
var expandNewActiveAccAnim = new YAHOO.util.Anim(this.body, {height:{from:0, to:this.parent.accItemBodyHeight}}, 0.1);
|
||||
|
||||
// set the selected element as active
|
||||
expandNewActiveAccAnim.onStart.subscribe(function() { this.parent.activeItem = this; }, this, true);
|
||||
|
||||
// execute the animation
|
||||
shrinkLastAccAnim.animate();
|
||||
expandNewActiveAccAnim.animate();
|
||||
}, this.accItems[i], true);
|
||||
}
|
||||
|
||||
// only the active element remains expanded
|
||||
for(var i=0; i<this.accItems.length; i++){
|
||||
if(this.activeItem != this.accItems[i]){
|
||||
this.accItems[i].body.style.height = 0 + "px";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
||||
<title>Accordion Example</title>
|
||||
|
||||
<script type="text/javascript" src="/extras/yui/build/yahoo/yahoo-min.js"></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/event/event-min.js"></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/dom/dom-min.js"></script>
|
||||
<script type="text/javascript" src="/extras/yui/build/animation/animation-min.js"></script>
|
||||
<script type="text/javascript" src="/extras/yui-webgui/accordion.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="/extras/yui-webgui/resources/css/accordion.css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.util.Event.addListener(window, 'load', function () {var myAccordion = new Accordion("myAccordion");} );
|
||||
</script>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
.accordion {
|
||||
width: 300px;
|
||||
border: 1px solid #999999;
|
||||
font-family: Helvetica,Arial,sans-serif;
|
||||
font-size: 12px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.accordionHeader {
|
||||
height: 16px;
|
||||
background-color: #CFD8E4;
|
||||
border: 1px solid #999999;
|
||||
font-size: 14px;
|
||||
padding: 1px 0px 1px 3px;
|
||||
}
|
||||
|
||||
.accordionBody {
|
||||
padding: 0px 2px;
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="myAccordion" class="accordion">
|
||||
<div class="accordionItem">
|
||||
|
||||
<div class="accordionHeader">accordion header 1</div>
|
||||
<div class="accordionBody">
|
||||
accordion 1 accordion 1 accordion 1 accordion 1
|
||||
accordion 1 accordion 1 accordion 1 accordion 1
|
||||
accordion 1 accordion 1 accordion 1 accordion 1
|
||||
accordion 1 accordion 1 accordion 1 accordion 1
|
||||
accordion 1 accordion 1 accordion 1 accordion 1
|
||||
accordion 1 accordion 1 accordion 1 accordion 1
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordionItem">
|
||||
<div class="accordionHeader">accordion header 2</div>
|
||||
<div class="accordionBody">
|
||||
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
accordion 2 accordion 2 accordion 2 accordion 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordionItem">
|
||||
<div class="accordionHeader">accordion header 3</div>
|
||||
<div class="accordionBody">accordion body 3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.accordion { }
|
||||
|
||||
.accordionHeader {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.accordionBody {
|
||||
height: 0px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue