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

upgrading to YUI 2.6

Browse source 
data tables are going to need some work yet, but the other stuff seems to be working 100%
This commit is contained in:
JT Smith 2008-10-22 23:53:29 +00:00
parent a041e93da8
commit 20f8df1291
2106 changed files with 993560 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

186
www/extras/yui/examples/carousel/csl_selection_clean.html Normal file
View file

@ -0,0 +1,186 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Spotlight example</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="../../build/carousel/assets/skins/sam/carousel.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/carousel/carousel-beta-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* Style the spotlight container */
#spotlight {
border: 1px solid #ccc;
height: 180px;
margin: 10px auto;
padding: 1px;
width: 240px;
}
#container {
margin: 0 auto;
}
.yui-carousel-element li {
height: 75px;
opacity: 0.6;
width: 75px;
}
.yui-carousel-element .yui-carousel-item-selected {
opacity: 1;
}
.yui-skin-sam .yui-carousel-nav ul li {
margin: 0;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Spotlight example</h1>
<div class="exampleIntro">
<p>
This example uses the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a> to showcase a simple spotlight
example using its <code>itemSelected</code> event. In this example, you can use arrow
keys to select items as well as click on an item to select it.
</p>
<p>
Though this functionality looks a little complicated, it is very easy to
implement. This is because the YUI Carousel Control handles the keyboard
event and the mouse click event for setting the selection. When an item is
selected, the YUI Carousel Control triggers an <code>itemSelected</code> event. This
example subscribes to the <code>itemSelected</code> event to display the selected
image in the spotlight.
</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!-- The Carousel container -->
<div id="container">
<ol id="carousel">
<li>
<img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
</li>
<li>
<img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
</li>
<li>
<img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
</li>
<li>
<img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
</li>
<li>
<img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
</li>
<li>
<img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
</li>
<li>
<img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
</li>
<li>
<img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
</li>
<li>
<img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
</li>
</ol>
</div>
<!-- The spotlight container -->
<div id="spotlight"></div>
<style type="text/css">
/* Style the spotlight container */
#spotlight {
border: 1px solid #ccc;
height: 180px;
margin: 10px auto;
padding: 1px;
width: 240px;
}
.yui-carousel-element li {
opacity: 0.6;
}
.yui-carousel-element .yui-carousel-item-selected {
opacity: 1;
}
</style>
<script>
(function () {
var carousel;
// Get the image link from within its (parent) container.
function getImage(parent) {
var el = parent.firstChild;
while (el) { // walk through till as long as there's an element
if (el.nodeName.toUpperCase() == "IMG") { // found an image
// flickr uses "_s" suffix for small, and "_m" for big
// images respectively
return el.src.replace(/_s\.jpg$/, "_m.jpg");
}
el = el.nextSibling;
}
return "";
}
YAHOO.util.Event.onDOMReady(function (ev) {
var el, item,
spotlight = YAHOO.util.Dom.get("spotlight"),
carousel = new YAHOO.widget.Carousel("container");
carousel.render(); // get ready for rendering the widget
carousel.show(); // display the widget
// display the first selected item in the spotlight
item = carousel.getElementForItem(carousel.get("selectedItem"));
if (item) {
spotlight.innerHTML = "<img src=\"" + getImage(item) + "\">";
}
carousel.on("itemSelected", function (index) {
// item has the reference to the Carousel's item
item = carousel.getElementForItem(index);
if (item) {
spotlight.innerHTML = "<img src=\""+getImage(item)+"\">";
}
});
});
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>