removing old version of yui
This commit is contained in:
JT Smith
parent
d1d368dcd1
commit
4fd23d094f
766 changed files with 0 additions and 262230 deletions
|
|
@ -1 +0,0 @@
|
|||
#container { float: none; }
#header h1 { margin-left: 24px; }
#content { margin-left: 25px; }
#pageTitle {top:10px;}
|
||||
|
|
@ -1,301 +0,0 @@
|
|||
html, body { padding: 0px 0px 10px 0px; border: 0; }
|
||||
body { font: normal 11px verdana, sans-serif; color: #333; line-height: 19px; margin: 0; }
|
||||
#container { clear: both; text-align: left; padding: 0 0; margin: 0 0; }
|
||||
#containerTop { height:48px; }
|
||||
#pad { padding: 0px 20px 0px 20px; }
|
||||
a { text-decoration: underline; color: #46546C; }
|
||||
a:hover { text-decoration: underline; color: #C57323; }
|
||||
h1, h2, h3, h4, h5, h6 { font-family: palatino, georgia, "Times New Roman", serif; }
|
||||
h2 { font-size:16px; font-weight: bold; margin: 0 0 11px 0; }
|
||||
.border_2px { border: 1px solid #D8D8D8; padding: 2px; background: #fff; }
|
||||
.border_5px { border: 1px solid #D8D8D8; padding: 5px; background: #fff; margin: 0 0 4px 0; }
|
||||
img { padding: 0; margin: 0; border: 0; }
|
||||
form { padding: 0; margin: 0; }
|
||||
.input { width: 85px; font-size: 9px; }
|
||||
.submit { font-size: 9px; }
|
||||
#pageTitle { position:absolute;top:0px;left:90px; }
|
||||
#pageTitle H3 { font-size:14pt; color:#666666 }
|
||||
#header h1 { float:left; margin-top: 19px; margin-left: 50px; border:0 }
|
||||
#header h1 a { display: block; height: 19px; text-decoration: none; }
|
||||
#header { height: 60px; border: 0px solid #CFFB00; margin-bottom:0px; }
|
||||
#header h4 { position: relative; float: right; font-size:11px; letter-spacing: 1px; top: 10px; right: 30px; line-height: 15px; padding: 0 0 0 13px; margin: 0px; }
|
||||
#content { float: left; width: 550px; min-height:400px; padding:10px 0px; border: 0px solid #C13B00; margin-left: 50px; top:0px; }
|
||||
#content h1 { font-size:18px; margin:0px; }
|
||||
.newsItem { padding-bottom:25px; margin-bottom:25px; overflow: hidden; }
|
||||
.newsItem h3 { font-size:18px; margin:0px; }
|
||||
.newsItem h3 a { text-decoration:none; color:#6A7981; }
|
||||
.newsItem h3 a:hover { text-decoration:underline; color:#000; }
|
||||
.newsItemFooter, .newsItemFooter a { font-size:9px; color:#999; font-weight:normal; }
|
||||
.newsItemFooter a:hover { color:#222; }
|
||||
#footer { padding: 0px 0px 20px 0px; clear: both; color: #999; border-top:0px #CCC solid; margin:0px 26px 0px 30px }
|
||||
#footer a { color: #999; }
|
||||
#footer a:hover { color: #222; }
|
||||
#footerContainer { clear: both; }
|
||||
#rightbar {
|
||||
float: right;
|
||||
padding: 5px 5px 5px 5px;
|
||||
width: 304px; /* for IE5-Win */
|
||||
width: 300px;
|
||||
border: 1px solid #333333;
|
||||
position:relative;
|
||||
right:48px;
|
||||
top:0px;
|
||||
background-color:#eeeeee;
|
||||
}
|
||||
#rightbar h2, #rightbar h3 {
|
||||
font-size:12px;
|
||||
text-align:center;
|
||||
color:#FFF;
|
||||
|
||||
border-bottom:#848B8F solid 1px;
|
||||
border-right:#949B9F solid 1px;
|
||||
border-top:#eee solid 1px;
|
||||
padding:1px;
|
||||
margin:0px 0px 0px 0px;
|
||||
background-color:#383e45;
|
||||
width:100%;
|
||||
}
|
||||
#rightbar h2 a, #rightbar h3 a {
|
||||
font-size:12px;
|
||||
color:#FFF;
|
||||
text-decoration:none;
|
||||
display:block;
|
||||
}
|
||||
#rightBarPad {
|
||||
margin:0px;
|
||||
}
|
||||
#sidenav {
|
||||
margin: 0px 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
#sidenav ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
}
|
||||
#sidenav ul li {
|
||||
list-style: none;
|
||||
list-style-image: none !important;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
#sidenav ul li a {
|
||||
text-decoration: none;
|
||||
padding: 5px 0px 5px 0px;
|
||||
color: #4C5250;
|
||||
display: block;
|
||||
width: 187px;
|
||||
font-size: 11px !important;
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #aaa;
|
||||
border-left: 1px solid #C7CBD0;
|
||||
text-shadow: -2px -2px 0px #FFF;
|
||||
}
|
||||
|
||||
#sidenav ul li a:hover {
|
||||
|
||||
/* background: url(../img/navHover2.png) top no-repeat; */
|
||||
border-top: 1px solid #A1AAAF;
|
||||
border-bottom: 1px solid #CCC;
|
||||
border-right: 0px solid #C3C7CA;
|
||||
border-left: 1px solid #C3C7CA;
|
||||
text-shadow: 4px 4px 0px #C3C7CA;
|
||||
}
|
||||
|
||||
.testSquare {
|
||||
border:4px solid #666;text-align:center;color:#fff;cursor:move;position:absolute;height:100px;width:100px;
|
||||
|
||||
}
|
||||
|
||||
.testSquareOn {
|
||||
border:4px solid purple;text-align:center;color:#fff;cursor:move;position:absolute;height:100px;width:100px;
|
||||
}
|
||||
|
||||
.sortList { cursor:move; width:100px; font-size:14px; }
|
||||
.sortListHidden { width:100px; font-size:14px;visibility:hidden }
|
||||
|
||||
.listGroup1 { border:2px solid #dddddd; }
|
||||
.listGroup2 { border:2px solid #dddddd; background-color:#eeeeee; }
|
||||
|
||||
#workArea { height: 420px; }
|
||||
|
||||
#ylogo { position:absolute;top:5px;left:5px; }
|
||||
|
||||
/* slider */
|
||||
|
||||
.dragPanel {
|
||||
position: relative;
|
||||
background-color: #eeeeee;
|
||||
margin: 4px;
|
||||
/*
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
*/
|
||||
width: 260px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.dragPanel h4 {
|
||||
background-color: #bbbbbb;
|
||||
height: 10px;
|
||||
margin: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
|
||||
input { font-size: .85em }
|
||||
.thumb {
|
||||
cursor:default;
|
||||
width:18px;
|
||||
height:18px;
|
||||
z-index: 9;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position:absolute;
|
||||
left:10px;
|
||||
height:18px;
|
||||
width:146px;
|
||||
border: 0px solid #aaaaaa;
|
||||
}
|
||||
|
||||
.bg span, .bg p {
|
||||
cursor:default;
|
||||
position: relative;
|
||||
font-size: 2px;
|
||||
overflow: hidden;
|
||||
color: #aaaaaa;
|
||||
top: 4px;
|
||||
height: 10px;
|
||||
width: 4px;
|
||||
display: block;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.bg span {
|
||||
border-top:1px solid #cccccc;
|
||||
border-bottom:1px solid #cccccc;
|
||||
}
|
||||
|
||||
.bg .lb {
|
||||
border-left:1px solid #cccccc;
|
||||
}
|
||||
|
||||
.bg .rb {
|
||||
border-right:1px solid #cccccc;
|
||||
}
|
||||
#valdiv { position:absolute; top: 100px; left:10px; }
|
||||
|
||||
#rBG {top:30px}
|
||||
#gBG {top:50px}
|
||||
#bBG {top:70px}
|
||||
|
||||
#rgbSwatch {
|
||||
position:absolute;
|
||||
left:160px;
|
||||
top:34px;
|
||||
height:50px;
|
||||
width:50px;
|
||||
border:1px solid #aaaaaa;
|
||||
}
|
||||
|
||||
#rgbPanel {
|
||||
/*
|
||||
top: 400px;
|
||||
left: 20px;
|
||||
*/
|
||||
width: 360px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* picker */
|
||||
|
||||
#hueThumb {
|
||||
cursor:default;
|
||||
width:18px;
|
||||
height:18px;
|
||||
z-index: 9;
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
#hueBg {
|
||||
position:absolute;
|
||||
left:216px;
|
||||
height:198px;
|
||||
width:18px;
|
||||
background:url(../img/hue.png) no-repeat;
|
||||
top:18px;
|
||||
}
|
||||
|
||||
#pickerDiv {
|
||||
position:absolute;
|
||||
left:10px;
|
||||
height:187px;
|
||||
width:188px;
|
||||
/*
|
||||
background:url(../img/pickerbg.png) no-repeat;
|
||||
*/
|
||||
top:20px;
|
||||
}
|
||||
|
||||
#pickerbg {
|
||||
position:absolute;
|
||||
z-index: 1;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
#selector {
|
||||
cursor:default;
|
||||
width:11px;
|
||||
height:11px;
|
||||
z-index: 9;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
#pickerSwatch {
|
||||
position:absolute;
|
||||
left:260px;
|
||||
top:30px;
|
||||
height:60px;
|
||||
width:60px;
|
||||
border:2px solid #aaaaaa;
|
||||
}
|
||||
|
||||
#pickervaldiv { text-align:right; position:absolute; top: 86px; left:246px; }
|
||||
|
||||
#pickerPanel {
|
||||
/*
|
||||
top: 200px;
|
||||
left: 20px;
|
||||
*/
|
||||
width: 360px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* standard horizontal and vertical sliders */
|
||||
#horizHandleDiv {
|
||||
cursor:default;
|
||||
width:18px;
|
||||
height:18px;
|
||||
position:absolute;
|
||||
left: 100px; /* the default position is the center of the bg */
|
||||
top: 8px; /* force the image down a bit */
|
||||
}
|
||||
|
||||
|
||||
|
||||
#horizWrapper {position:relative; margin-left:60px;width:218px;float:left;}
|
||||
#horizBGDiv {position:relative; top:60px; background:url(../img/horizBg.png) no-repeat; height:26px; width:218px;z-index:5 }
|
||||
#horizValueDiv { position:relative; top: 70px; left:66px; }
|
||||
|
||||
#vertWrapper {position:relative; width:90px;float:left}
|
||||
#vertHandleDiv { cursor:default; width:20px; height:18px; position:absolute; }
|
||||
#vertBGDiv {position:relative;top:0px; float:left; width:26px; left:10px;background:url(../img/vertBg.png) no-repeat;height:218px; }
|
||||
#vertValueDiv { position:relative; top: 100px; left:40px; }
|
||||
|
||||
|
||||
|
|
@ -1,201 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.DDApp = function() {
|
||||
var dd, dd2, dd3;
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
dd = new YAHOO.util.DD("dragDiv1");
|
||||
|
||||
/*
|
||||
dd.onDragDrop = function(e, id) {
|
||||
var draggedEl = this.getEl();
|
||||
var targetedEl = document.getElementById(id);
|
||||
var DOM = YAHOO.util.Dom;
|
||||
DOM.setX(draggedEl, DOM.getX(targetedEl));
|
||||
};
|
||||
*/
|
||||
|
||||
dd2 = new YAHOO.util.DD("dragDiv2");
|
||||
dd3 = new YAHOO.util.DD("dragDiv3");
|
||||
}
|
||||
}
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
|
||||
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#dragDiv1 {
|
||||
background:url(img/sq1.png) 0 0 no-repeat;
|
||||
background-color:#6D739A;top:240px; left:105px;
|
||||
}
|
||||
|
||||
#dragDiv2 {
|
||||
background:url(img/sq2.png) 0 0 no-repeat;
|
||||
background-color:#566F4E;top:350px; left:215px;
|
||||
}
|
||||
|
||||
#dragDiv3 {
|
||||
background:url(img/sq3.png) 0 0 no-repeat;
|
||||
background-color:#7E5B60;top:460px; left:325px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="pageTitle"><h3>Drag and Drop - YAHOO.util.DD</h3></div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Basic Implementation of YAHOO.util.DragDrop</h3>
|
||||
<p>
|
||||
In this implementation of YAHOO.util.DragDrop, we keep track of the position of the clicked element
|
||||
so that we can move it along with cursor during the drag operation, maintaining the relationship
|
||||
between the location of the element and the location of the click.
|
||||
This class also provides a way to
|
||||
define other elements that modify the way the drag operation works. </p>
|
||||
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dragDiv1" class="testSquare" >YAHOO.util.DD</div>
|
||||
<div id="dragDiv2" class="testSquare" >YAHOO.util.DD</div>
|
||||
<div id="dragDiv3" class="testSquare" >YAHOO.util.DD</div>
|
||||
<form name="formTest" action="http://www.yahoo.com" method="get">
|
||||
<!--
|
||||
<input type="text" id="txtTest" />
|
||||
-->
|
||||
|
||||
<script>
|
||||
//YAHOO.util.Event.addListener('txtTest','keypress',txtTest_keydown);
|
||||
|
||||
/*
|
||||
function txtTest_keydown (e) {
|
||||
YAHOO.util.Event.stopEvent(e);
|
||||
alert(YAHOO.util.Event.getCharCode(e));
|
||||
// return false;
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
</form>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,178 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style type="text/css">
|
||||
body { background: url("img/grid.png") }
|
||||
|
||||
#dragDiv1 {
|
||||
background:url(img/sq1.png) 0 0 no-repeat;background-color:#6D739A;
|
||||
top:237px; left:113px;border:0px solid white;
|
||||
}
|
||||
|
||||
#dragDiv2 {
|
||||
background:url(img/sq2.png) 0 0 no-repeat;background-color:#566F4E;
|
||||
top:362px; left:238px; border:0px solid white;
|
||||
}
|
||||
|
||||
#dragDiv3 {
|
||||
background:url(img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;
|
||||
top:487px; left:363px; border:0px solid white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.DDApp = function() {
|
||||
var dd, dd2, dd3;
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
dd = new YAHOO.util.DD("dragDiv1");
|
||||
dd.setXConstraint(1000, 1000, 25);
|
||||
dd.setYConstraint(1000, 1000, 25);
|
||||
|
||||
dd2 = new YAHOO.util.DD("dragDiv2");
|
||||
dd2.setXConstraint(1000, 1000, 25);
|
||||
dd2.setYConstraint(1000, 1000, 25);
|
||||
|
||||
dd3 = new YAHOO.util.DD("dragDiv3");
|
||||
dd3.setXConstraint(1000, 1000, 25);
|
||||
dd3.setYConstraint(1000, 1000, 25);
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
|
||||
|
||||
</script>
|
||||
v
|
||||
<div id="pageTitle">
|
||||
<h3>Drag and Drop - YAHOO.util.DD</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>YAHOO.util.DD Grid</h3>
|
||||
<p> </p>
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dragDiv1" class="testSquare">YAHOO.util.DD</div>
|
||||
<div id="dragDiv2" class="testSquare">YAHOO.util.DD</div>
|
||||
<div id="dragDiv3" class="testSquare">YAHOO.util.DD</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 203 B |
Binary file not shown.
|
Before Width: | Height: | Size: 172 B |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 450 B |
Binary file not shown.
|
Before Width: | Height: | Size: 416 B |
Binary file not shown.
|
Before Width: | Height: | Size: 519 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 705 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 875 B |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 385 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 B |
Binary file not shown.
|
Before Width: | Height: | Size: 192 B |
Binary file not shown.
|
Before Width: | Height: | Size: 298 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 572 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 481 B |
|
|
@ -1,74 +0,0 @@
|
|||
|
||||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
|
||||
<body style="height:100%">
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Drag and Drop</h3>
|
||||
</div>
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
|
||||
<p><a href="drag.html?mode=dist">Drag test</a>:
|
||||
All three squares can be dragged, and are drop targets</p>
|
||||
|
||||
<p><a href="ontop.html?mode=dist">Always on top</a>:
|
||||
Same as the drag test, except the object being dragged is
|
||||
displayed on top of the others.</p>
|
||||
|
||||
<p><a href="proxy.html?mode=dist">Proxy drag</a>:
|
||||
The actual element is not moved during a drag operation.
|
||||
Instead, an absolutely positioned div (created once for all instances) is resized to the dimensions
|
||||
of the linked element and moved to the location of the drag operation.
|
||||
</p>
|
||||
|
||||
<p><a href="list.html?mode=dist">Sortable list</a>:
|
||||
When a list item is dragged past the center
|
||||
of another list item, it is inserted before that item.
|
||||
The items in the first two columns can interact with items in the other
|
||||
column. The items in the third column are defined as a separate group,
|
||||
so they can only interact with other items in the third column.
|
||||
</p>
|
||||
|
||||
<p><a href="multihandle.html?mode=dist">Multiple drag handles</a>:
|
||||
Shows how you can create multiple "hot spots" on your draggable item.
|
||||
</p>
|
||||
|
||||
<p><a href="targetable.html?mode=dist">Targetable afforance</a>:
|
||||
Demonstrates how multiple interaction groups and the events exposed
|
||||
by the utility can be used to provide user feedback during the drag.
|
||||
</p>
|
||||
|
||||
<p><a href="grid.html?mode=dist">Grid</a>:
|
||||
Demonstrates the graduated movement feature of drag and drop.
|
||||
</p>
|
||||
|
||||
<p><a href="resize.html?mode=dist">Resize</a>:
|
||||
Demonstrates one approach to creating a draggable and resizable module.
|
||||
</p>
|
||||
|
||||
|
||||
<p> </p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,147 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var dd, dd2, dd3;
|
||||
|
||||
function dragDropInit() {
|
||||
dd = new YAHOO.util.DragDrop("dragDiv1");
|
||||
dd2 = new YAHOO.util.DragDrop("dragDiv2");
|
||||
dd3 = new YAHOO.util.DragDrop("dragDiv3");
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", dragDropInit);
|
||||
|
||||
</script>
|
||||
<body>
|
||||
<div id="pageTitle">
|
||||
<h3>Drag and Drop - YAHOO.util.DragDrop</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>No Implementation</h3>
|
||||
<p>By implementing the base drag and drop class, the manager class will
|
||||
keep track of the element's virtual position, but not actually move anything.
|
||||
You can click on any of the
|
||||
three squares and watch the various events that the Drag and Drop Manager fires in
|
||||
logger window. </p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dragDiv1" class="testSquare" style="background:url(img/sq1.png) 0 0 no-repeat;background-color:#6D739A;top:240px; left:105px ">DragDrop</div>
|
||||
<div id="dragDiv2" class="testSquare" style="background:url(img/sq2.png) 0 0 no-repeat;background-color:#566F4E;top:350px; left:215px">DragDrop</div>
|
||||
<div id="dragDiv3" class="testSquare" style="background:url(img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;top:460px; left:325px">DragDrop</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
102
www/extras/yui/examples/dragdrop/js/DDList.js
vendored
102
www/extras/yui/examples/dragdrop/js/DDList.js
vendored
|
|
@ -1,102 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/**
|
||||
* @class a YAHOO.util.DDProxy implementation. During the drag over event, the
|
||||
* dragged element is inserted before the dragged-over element.
|
||||
*
|
||||
* @extends YAHOO.util.DDProxy
|
||||
* @constructor
|
||||
* @param {String} id the id of the linked element
|
||||
* @param {String} sGroup the group of related DragDrop objects
|
||||
*/
|
||||
YAHOO.example.DDList = function(id, sGroup, config) {
|
||||
|
||||
if (id) {
|
||||
this.init(id, sGroup, config);
|
||||
this.initFrame();
|
||||
this.logger = this.logger || YAHOO;
|
||||
}
|
||||
|
||||
var s = this.getDragEl().style;
|
||||
s.borderColor = "transparent";
|
||||
s.backgroundColor = "#f6f5e5";
|
||||
s.opacity = 0.76;
|
||||
s.filter = "alpha(opacity=76)";
|
||||
};
|
||||
|
||||
// YAHOO.example.DDList.prototype = new YAHOO.util.DDProxy();
|
||||
YAHOO.extend(YAHOO.example.DDList, YAHOO.util.DDProxy);
|
||||
|
||||
YAHOO.example.DDList.prototype.startDrag = function(x, y) {
|
||||
this.logger.log(this.id + " startDrag");
|
||||
|
||||
var dragEl = this.getDragEl();
|
||||
var clickEl = this.getEl();
|
||||
|
||||
dragEl.innerHTML = clickEl.innerHTML;
|
||||
dragEl.className = clickEl.className;
|
||||
dragEl.style.color = clickEl.style.color;
|
||||
dragEl.style.border = "1px solid blue";
|
||||
|
||||
};
|
||||
|
||||
YAHOO.example.DDList.prototype.endDrag = function(e) {
|
||||
// disable moving the linked element
|
||||
};
|
||||
|
||||
YAHOO.example.DDList.prototype.onDrag = function(e, id) {
|
||||
|
||||
};
|
||||
|
||||
YAHOO.example.DDList.prototype.onDragOver = function(e, id) {
|
||||
// this.logger.log(this.id.toString() + " onDragOver " + id);
|
||||
var el;
|
||||
|
||||
if ("string" == typeof id) {
|
||||
el = YAHOO.util.DDM.getElement(id);
|
||||
} else {
|
||||
el = YAHOO.util.DDM.getBestMatch(id).getEl();
|
||||
}
|
||||
|
||||
var mid = YAHOO.util.DDM.getPosY(el) + ( Math.floor(el.offsetTop / 2));
|
||||
this.logger.log("mid: " + mid);
|
||||
|
||||
if (YAHOO.util.Event.getPageY(e) < mid) {
|
||||
var el2 = this.getEl();
|
||||
var p = el.parentNode;
|
||||
p.insertBefore(el2, el);
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.example.DDList.prototype.onDragEnter = function(e, id) {
|
||||
// this.logger.log(this.id.toString() + " onDragEnter " + id);
|
||||
// this.getDragEl().style.border = "1px solid #449629";
|
||||
};
|
||||
|
||||
YAHOO.example.DDList.prototype.onDragOut = function(e, id) {
|
||||
// I need to know when we are over nothing
|
||||
// this.getDragEl().style.border = "1px solid #964428";
|
||||
};
|
||||
|
||||
YAHOO.example.DDList.prototype.toString = function() {
|
||||
return "DDList " + this.id;
|
||||
};
|
||||
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
YAHOO.example.DDListBoundary = function(id, sGroup, config) {
|
||||
if (id) {
|
||||
this.init(id, sGroup, config);
|
||||
this.logger = this.logger || YAHOO;
|
||||
this.isBoundary = true;
|
||||
}
|
||||
};
|
||||
|
||||
// YAHOO.example.DDListBoundary.prototype = new YAHOO.util.DDTarget();
|
||||
YAHOO.extend(YAHOO.example.DDListBoundary, YAHOO.util.DDTarget);
|
||||
|
||||
YAHOO.example.DDListBoundary.prototype.toString = function() {
|
||||
return "DDListBoundary " + this.id;
|
||||
};
|
||||
|
||||
48
www/extras/yui/examples/dragdrop/js/DDMy.js
vendored
48
www/extras/yui/examples/dragdrop/js/DDMy.js
vendored
|
|
@ -1,48 +0,0 @@
|
|||
|
||||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/**
|
||||
* @class a ygDDFramed implementation where the frame only moves vertically, and
|
||||
* the DOM elements are swapped when one is dropped on another
|
||||
*
|
||||
* @extends YAHOO.util.DDProxy
|
||||
* @constructor
|
||||
* @param {String} id the id of the linked element
|
||||
* @param {String} sGroup the group of related DragDrop objects
|
||||
*/
|
||||
YAHOO.example.DDMy = function(id, sGroup, config) {
|
||||
|
||||
if (id) {
|
||||
this.init(id, sGroup, config);
|
||||
this.initFrame();
|
||||
this.logger = this.logger || YAHOO;
|
||||
}
|
||||
|
||||
// The frame should only move vertically... this makes it so the user can
|
||||
// only move content channels up and down within a column
|
||||
this.setXConstraint(0, 0);
|
||||
};
|
||||
|
||||
// YAHOO.example.DDMy.prototype = new YAHOO.util.DDProxy();
|
||||
YAHOO.extend(YAHOO.example.DDMy, YAHOO.util.DDProxy);
|
||||
|
||||
YAHOO.example.DDMy.prototype.onDragDrop = function(e, id) {
|
||||
this.logger.log(this.id + " onDragDrop");
|
||||
|
||||
var el;
|
||||
|
||||
if ("string" == typeof id) {
|
||||
el = YAHOO.util.DDM.getElement(id);
|
||||
} else {
|
||||
el = YAHOO.util.DDM.getBestMatch(id).getEl();
|
||||
}
|
||||
|
||||
YAHOO.util.DDM.swapNode(this.getEl(), el);
|
||||
};
|
||||
|
||||
YAHOO.example.DDMy.prototype.endDrag = function(e) {
|
||||
// we default behavior is to move the element to the end point when
|
||||
// the drag is ended. In our case, we only want to move the element
|
||||
// when it is dropped on another dd element. To override the default,
|
||||
// we simply need to create an empty endDrag function.
|
||||
};
|
||||
62
www/extras/yui/examples/dragdrop/js/DDMy2.js
vendored
62
www/extras/yui/examples/dragdrop/js/DDMy2.js
vendored
|
|
@ -1,62 +0,0 @@
|
|||
|
||||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/**
|
||||
* @class a YAHHO.util.DDProxy implementation like DDMy, but the content
|
||||
* channels are * not restricted to one column, and we drag a miniature
|
||||
* representation of the * content channel rather than a frame of the channel.
|
||||
*
|
||||
* @extends YAHOO.util.DDProxy
|
||||
* @constructor
|
||||
* @param {String} id the id of the linked element
|
||||
* @param {String} sGroup the group of related DragDrop objects
|
||||
*/
|
||||
YAHOO.example.DDMy2 = function(id, sGroup, config) {
|
||||
|
||||
if (id) {
|
||||
this.init(id, sGroup, config);
|
||||
this.initFrame();
|
||||
this.logger = this.logger || YAHOO;
|
||||
}
|
||||
|
||||
// Change the style of the frame to be a miniature representation of a
|
||||
// content channel
|
||||
var s = this.getDragEl().style;
|
||||
s.background = "url(img/channel.png) 0 0 no-repeat";
|
||||
s.height = "92px";
|
||||
s.width = "100px";
|
||||
// s.opacity = 0.66;
|
||||
// s.filter = "alpha(opacity=66)";
|
||||
|
||||
// Specify that we do not want to resize the drag frame... we want to keep
|
||||
// the drag frame the size of our miniature content channel image
|
||||
//this.resizeFrame = false;
|
||||
|
||||
// Specify that we want the drag frame centered around the cursor rather
|
||||
// than relative to the click location so that the miniature content
|
||||
// channel appears in the location that was clicked
|
||||
// this.centerFrame = true;
|
||||
};
|
||||
|
||||
// YAHOO.example.DDMy2.prototype = new YAHOO.util.DDProxy();
|
||||
YAHOO.extend(YAHOO.example.DDMy2, YAHOO.util.DDProxy);
|
||||
|
||||
YAHOO.example.DDMy2.prototype.onDragDrop = function(e, id) {
|
||||
this.logger.log(this.id + " onDragDrop");
|
||||
|
||||
var el;
|
||||
if ("string" == typeof id) {
|
||||
el = YAHOO.util.DDM.getElement(id);
|
||||
} else {
|
||||
el = YAHOO.util.DDM.getBestMatch(id).getEl();
|
||||
}
|
||||
|
||||
YAHOO.util.DDM.swapNode(this.getEl(), el);
|
||||
};
|
||||
|
||||
YAHOO.example.DDMy2.prototype.endDrag = function(e) {
|
||||
// we default behavior is to move the element to the end point when
|
||||
// the drag is ended. In our case, we only want to move the element
|
||||
// when it is dropped on another dd element. To override the default,
|
||||
// we simply need to create an empty endDrag function.
|
||||
};
|
||||
49
www/extras/yui/examples/dragdrop/js/DDOnTop.js
vendored
49
www/extras/yui/examples/dragdrop/js/DDOnTop.js
vendored
|
|
@ -1,49 +0,0 @@
|
|||
|
||||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/**
|
||||
* @class a DragDrop implementation that moves the object as it is being dragged,
|
||||
* and keeps the object being dragged on top. This is a subclass of DD rather
|
||||
* than DragDrop, and inherits the implementation of most of the event listeners
|
||||
* from that class.
|
||||
*
|
||||
* @extends YAHOO.util.DD
|
||||
* @constructor
|
||||
* @param {String} id the id of the linked element
|
||||
* @param {String} sGroup the group of related DragDrop items
|
||||
*/
|
||||
YAHOO.example.DDOnTop = function(id, sGroup, config) {
|
||||
if (id) {
|
||||
this.init(id, sGroup, config);
|
||||
this.logger = this.logger || YAHOO;
|
||||
}
|
||||
};
|
||||
|
||||
// YAHOO.example.DDOnTop.prototype = new YAHOO.util.DD();
|
||||
YAHOO.extend(YAHOO.example.DDOnTop, YAHOO.util.DD);
|
||||
|
||||
/**
|
||||
* The inital z-index of the element, stored so we can restore it later
|
||||
*
|
||||
* @type int
|
||||
*/
|
||||
YAHOO.example.DDOnTop.prototype.origZ = 0;
|
||||
|
||||
YAHOO.example.DDOnTop.prototype.startDrag = function(x, y) {
|
||||
this.logger.log(this.id + " startDrag");
|
||||
|
||||
var style = this.getEl().style;
|
||||
|
||||
// store the original z-index
|
||||
this.origZ = style.zIndex;
|
||||
|
||||
// The z-index needs to be set very high so the element will indeed be on top
|
||||
style.zIndex = 999;
|
||||
};
|
||||
|
||||
YAHOO.example.DDOnTop.prototype.endDrag = function(e) {
|
||||
this.logger.log(this.id + " endDrag");
|
||||
|
||||
// restore the original z-index
|
||||
this.getEl().style.zIndex = this.origZ;
|
||||
};
|
||||
169
www/extras/yui/examples/dragdrop/js/DDPlayer.js
vendored
169
www/extras/yui/examples/dragdrop/js/DDPlayer.js
vendored
|
|
@ -1,169 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////
|
||||
|
||||
/**
|
||||
* @class a YAHOO.util.DDFramed implementation. During the drag over event, the
|
||||
* dragged element is inserted before the dragged-over element.
|
||||
*
|
||||
* @extends YAHOO.util.DDProxy
|
||||
* @constructor
|
||||
* @param {String} id the id of the linked element
|
||||
* @param {String} sGroup the group of related DragDrop objects
|
||||
*/
|
||||
YAHOO.example.DDPlayer = function(id, sGroup, config) {
|
||||
this.initPlayer(id, sGroup);
|
||||
};
|
||||
|
||||
// YAHOO.example.DDPlayer.prototype = new YAHOO.util.DDProxy();
|
||||
YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy);
|
||||
|
||||
YAHOO.example.DDPlayer.TYPE = "DDPlayer";
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.initPlayer = function(id, sGroup, config) {
|
||||
if (!id) { return; }
|
||||
|
||||
this.init(id, sGroup, config);
|
||||
this.initFrame();
|
||||
|
||||
this.logger = this.logger || YAHOO;
|
||||
var s = this.getDragEl().style;
|
||||
s.borderColor = "transparent";
|
||||
// s.backgroundColor = "#cccccc";
|
||||
s.opacity = 0.76;
|
||||
s.filter = "alpha(opacity=76)";
|
||||
|
||||
// specify that this is not currently a drop target
|
||||
this.isTarget = false;
|
||||
|
||||
this.originalStyles = [];
|
||||
|
||||
this.type = YAHOO.example.DDPlayer.TYPE;
|
||||
this.slot = null;
|
||||
|
||||
this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
|
||||
this.logger.log(id + " startpos: " + this.startPos);
|
||||
};
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.startDrag = function(x, y) {
|
||||
this.logger.log(this.id + " startDrag");
|
||||
|
||||
var dragEl = this.getDragEl();
|
||||
var clickEl = this.getEl();
|
||||
|
||||
dragEl.innerHTML = clickEl.innerHTML;
|
||||
dragEl.className = clickEl.className;
|
||||
dragEl.style.color = this.DDM.getStyle(clickEl, "color");;
|
||||
dragEl.style.backgroundColor = this.DDM.getStyle(clickEl, "backgroundColor");
|
||||
|
||||
var s = clickEl.style;
|
||||
s.opacity = .1;
|
||||
s.filter = "alpha(opacity=10)";
|
||||
|
||||
var targets = YAHOO.util.DDM.getRelated(this, true);
|
||||
this.logger.log(targets.length + " targets");
|
||||
for (var i=0; i<targets.length; i++) {
|
||||
|
||||
var targetEl = this.getTargetDomRef(targets[i]);
|
||||
|
||||
if (!this.originalStyles[targetEl.id]) {
|
||||
this.originalStyles[targetEl.id] = targetEl.className;
|
||||
}
|
||||
|
||||
targetEl.className = "target";
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.getTargetDomRef = function(oDD) {
|
||||
if (oDD.player) {
|
||||
return oDD.player.getEl();
|
||||
} else {
|
||||
return oDD.getEl();
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.endDrag = function(e) {
|
||||
// reset the linked element styles
|
||||
var s = this.getEl().style;
|
||||
s.opacity = 1;
|
||||
s.filter = "alpha(opacity=100)";
|
||||
|
||||
this.resetTargets();
|
||||
};
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.resetTargets = function() {
|
||||
|
||||
// reset the target styles
|
||||
var targets = YAHOO.util.DDM.getRelated(this, true);
|
||||
for (var i=0; i<targets.length; i++) {
|
||||
var targetEl = this.getTargetDomRef(targets[i]);
|
||||
var oldStyle = this.originalStyles[targetEl.id];
|
||||
if (oldStyle) {
|
||||
targetEl.className = oldStyle;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.onDragDrop = function(e, id) {
|
||||
// get the drag and drop object that was targeted
|
||||
var oDD;
|
||||
|
||||
if ("string" == typeof id) {
|
||||
oDD = YAHOO.util.DDM.getDDById(id);
|
||||
} else {
|
||||
oDD = YAHOO.util.DDM.getBestMatch(id);
|
||||
}
|
||||
|
||||
var el = this.getEl();
|
||||
|
||||
// check if the slot has a player in it already
|
||||
if (oDD.player) {
|
||||
// check if the dragged player was already in a slot
|
||||
if (this.slot) {
|
||||
// check to see if the player that is already in the
|
||||
// slot can go to the slot the dragged player is in
|
||||
// YAHOO.util.DDM.isLegalTarget is a new method
|
||||
if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
|
||||
this.logger.log("swapping player positions");
|
||||
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
|
||||
this.slot.player = oDD.player;
|
||||
oDD.player.slot = this.slot;
|
||||
} else {
|
||||
this.logger.log("moving player in slot back to start");
|
||||
YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
|
||||
this.slot.player = null;
|
||||
oDD.player.slot = null
|
||||
}
|
||||
} else {
|
||||
// the player in the slot will be moved to the dragged
|
||||
// players start position
|
||||
oDD.player.slot = null;
|
||||
YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
|
||||
}
|
||||
} else {
|
||||
// Move the player into the emply slot
|
||||
// I may be moving off a slot so I need to clear the player ref
|
||||
if (this.slot) {
|
||||
this.slot.player = null;
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.util.DDM.moveToEl(el, oDD.getEl());
|
||||
this.resetTargets();
|
||||
|
||||
this.slot = oDD;
|
||||
this.slot.player = this;
|
||||
};
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.swap = function(el1, el2) {
|
||||
var dom = YAHOO.util.Dom;
|
||||
var pos1 = dom.getXY(el1);
|
||||
var pos2 = dom.getXY(el2);
|
||||
dom.setXY(el1, pos2);
|
||||
dom.setXY(el2, pos1);
|
||||
};
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.onDragOver = function(e, id) {};
|
||||
|
||||
YAHOO.example.DDPlayer.prototype.onDrag = function(e, id) {};
|
||||
|
||||
46
www/extras/yui/examples/dragdrop/js/DDResize.js
vendored
46
www/extras/yui/examples/dragdrop/js/DDResize.js
vendored
|
|
@ -1,46 +0,0 @@
|
|||
|
||||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/**
|
||||
* @extends YAHOO.util.DragDrop
|
||||
* @constructor
|
||||
* @param {String} handle the id of the element that will cause the resize
|
||||
* @param {String} panel id of the element to resize
|
||||
* @param {String} sGroup the group of related DragDrop items
|
||||
*/
|
||||
YAHOO.example.DDResize = function(panelElId, handleElId, sGroup, config) {
|
||||
if (panelElId) {
|
||||
this.init(panelElId, sGroup, config);
|
||||
this.handleElId = handleElId;
|
||||
this.setHandleElId(handleElId);
|
||||
this.logger = this.logger || YAHOO;
|
||||
}
|
||||
};
|
||||
|
||||
// YAHOO.example.DDResize.prototype = new YAHOO.util.DragDrop();
|
||||
YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop);
|
||||
|
||||
YAHOO.example.DDResize.prototype.onMouseDown = function(e) {
|
||||
var panel = this.getEl();
|
||||
this.startWidth = panel.offsetWidth;
|
||||
this.startHeight = panel.offsetHeight;
|
||||
|
||||
this.startPos = [YAHOO.util.Event.getPageX(e),
|
||||
YAHOO.util.Event.getPageY(e)];
|
||||
};
|
||||
|
||||
YAHOO.example.DDResize.prototype.onDrag = function(e) {
|
||||
var newPos = [YAHOO.util.Event.getPageX(e),
|
||||
YAHOO.util.Event.getPageY(e)];
|
||||
|
||||
var offsetX = newPos[0] - this.startPos[0];
|
||||
var offsetY = newPos[1] - this.startPos[1];
|
||||
|
||||
var newWidth = Math.max(this.startWidth + offsetX, 10);
|
||||
var newHeight = Math.max(this.startHeight + offsetY, 10);
|
||||
|
||||
var panel = this.getEl();
|
||||
panel.style.width = newWidth + "px";
|
||||
panel.style.height = newHeight + "px";
|
||||
};
|
||||
|
||||
106
www/extras/yui/examples/dragdrop/js/DDResize2.js
vendored
106
www/extras/yui/examples/dragdrop/js/DDResize2.js
vendored
|
|
@ -1,106 +0,0 @@
|
|||
|
||||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/**
|
||||
* @extends YAHOO.util.DragDrop
|
||||
* @constructor
|
||||
* @param {String} handle the id of the element that will cause the resize
|
||||
* @param {String} panel id of the element to resize
|
||||
* @param {String} sGroup the group of related DragDrop items
|
||||
*/
|
||||
YAHOO.example.DDResize = function(panelElId, nwHandle,
|
||||
neHandle, seHandle, swHandle, sGroup, config) {
|
||||
if (panelElId) {
|
||||
this.init(panelElId, sGroup, config);
|
||||
this.nwHandle = nwHandle;
|
||||
this.neHandle = neHandle;
|
||||
this.seHandle = seHandle;
|
||||
this.swHandle = swHandle;
|
||||
this.setHandleElId(nwHandle);
|
||||
this.setHandleElId(neHandle);
|
||||
this.setHandleElId(seHandle);
|
||||
this.setHandleElId(swHandle);
|
||||
this.logger = this.logger || YAHOO;
|
||||
}
|
||||
};
|
||||
|
||||
// YAHOO.example.DDResize.prototype = new YAHOO.util.DragDrop();
|
||||
YAHOO.extend(YAHOO.example.DDResize, YAHOO.util.DragDrop);
|
||||
|
||||
YAHOO.example.DDResize.prototype.lockAspectRatio = false;
|
||||
|
||||
YAHOO.example.DDResize.prototype.onMouseDown = function(e) {
|
||||
var panel = this.getEl();
|
||||
this.startWidth = panel.offsetWidth;
|
||||
this.startHeight = panel.offsetHeight;
|
||||
this.panelStartPos = YAHOO.util.Dom.getXY(panel);
|
||||
|
||||
this.aspectRatio = this.startWidth/this.startHeight;
|
||||
this.direction = this.getDirection(YAHOO.util.Event.getTarget(e, true).id);
|
||||
this.logger.log("direction " + this.direction);
|
||||
|
||||
this.startPos = [YAHOO.util.Event.getPageX(e),
|
||||
YAHOO.util.Event.getPageY(e)];
|
||||
};
|
||||
|
||||
YAHOO.example.DDResize.prototype.onDrag = function(e) {
|
||||
var newPos = [YAHOO.util.Event.getPageX(e),
|
||||
YAHOO.util.Event.getPageY(e)];
|
||||
|
||||
var offsetX = newPos[0] - this.startPos[0];
|
||||
var offsetY = (this.lockAspectRatio) ? offsetX : newPos[1] - this.startPos[1];
|
||||
|
||||
var newWidth = Math.max(this.startWidth + offsetX, 10);
|
||||
var newHeight = Math.max(this.startHeight + offsetY, 10);
|
||||
|
||||
var panel = this.getEl();
|
||||
|
||||
|
||||
var panelPos = YAHOO.util.Dom.getXY(panel);
|
||||
var movePos = [this.panelStartPos[0], this.panelStartPos[1]];
|
||||
var doMove = false;
|
||||
|
||||
if (this.direction == "nw" || this.direction == "sw") {
|
||||
movePos[0] = this.panelStartPos[0] + offsetX;
|
||||
newWidth = Math.max(this.startWidth - offsetX, 10);
|
||||
doMove = true;
|
||||
}
|
||||
|
||||
if (this.direction == "ne" || this.direction == "nw") {
|
||||
offsetY = newPos[1] - this.startPos[1];
|
||||
offsetX = offsetY;
|
||||
movePos[1] = this.panelStartPos[1] + offsetY;
|
||||
newHeight = Math.max(this.startHeight - offsetY, 10);
|
||||
newWidth = Math.max(this.startWidth - offsetX, 10);
|
||||
doMove = true;
|
||||
}
|
||||
|
||||
|
||||
switch (this.direction) {
|
||||
case "nw":
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (doMove) {
|
||||
YAHOO.util.Dom.setXY(panel, movePos);
|
||||
}
|
||||
|
||||
panel.style.width = newWidth + "px";
|
||||
panel.style.height = newHeight + "px";
|
||||
};
|
||||
|
||||
YAHOO.example.DDResize.prototype.getDirection = function(handle) {
|
||||
if (handle == this.nwHandle) {
|
||||
return "nw";
|
||||
} else if (handle == this.neHandle) {
|
||||
return "ne";
|
||||
} else if (handle == this.seHandle) {
|
||||
return "se";
|
||||
} else if (handle == this.swHandle) {
|
||||
return "sw";
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
170
www/extras/yui/examples/dragdrop/js/DDSwap.js
vendored
170
www/extras/yui/examples/dragdrop/js/DDSwap.js
vendored
|
|
@ -1,170 +0,0 @@
|
|||
|
||||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
/**
|
||||
* @class a YAHOO.util.DDProxy implementation that swaps positions with the
|
||||
* target when dropped
|
||||
*
|
||||
* @extends YAHOO.util.DDProxy
|
||||
* @constructor
|
||||
* @param {String} id the id of the linked element
|
||||
* @param {String} sGroup the group of related DragDrop items
|
||||
*/
|
||||
YAHOO.example.DDSwap = function(id, sGroup, config) {
|
||||
this.swapInit(id, sGroup, config);
|
||||
};
|
||||
|
||||
YAHOO.extend(YAHOO.example.DDSwap, YAHOO.util.DDProxy);
|
||||
|
||||
YAHOO.example.DDSwap.prototype.swapInit = function(id, sGroup, config) {
|
||||
if (!id) { return; }
|
||||
|
||||
this.init(id, sGroup, config);
|
||||
this.initFrame();
|
||||
this.logger = this.logger || YAHOO;
|
||||
|
||||
/**
|
||||
* css style to use when items are not being hovered over.
|
||||
*/
|
||||
this.offClass = "testSquare";
|
||||
|
||||
/**
|
||||
* css style to use when hovered over
|
||||
*/
|
||||
this.onClass = "testSquareOn";
|
||||
|
||||
/**
|
||||
* cache of the elements we have changed the style so we can restore it
|
||||
* later
|
||||
*/
|
||||
this.els = [];
|
||||
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap.prototype.onDragDrop = function(e, id) {
|
||||
var dd = YAHOO.util.DDM.getDDById(id);
|
||||
this.swap(this.getEl(), dd.getEl());
|
||||
this.resetConstraints();
|
||||
dd.resetConstraints();
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap.prototype.swap = function(el1, el2) {
|
||||
this.logger.log(this.id + " onDragDrop swap");
|
||||
|
||||
// Swap out the position of the two objects. This only works for absolutely
|
||||
// positioned elements. See for an implementation that
|
||||
// works for relatively positioned elements
|
||||
var s1 = el1.style;
|
||||
var s2 = el2.style;
|
||||
|
||||
var l = s1.left;
|
||||
var t = s1.top;
|
||||
|
||||
s1.left = s2.left;
|
||||
s1.top = s2.top;
|
||||
|
||||
s2.left = l;
|
||||
s2.top = t;
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap.prototype.onDragEnter = function(e, id) {
|
||||
this.logger.log(this.id + " dragEnter " + id);
|
||||
|
||||
// store a ref so we can restore the style later
|
||||
this.els[id] = true;
|
||||
|
||||
// set the mouseover style
|
||||
var el = YAHOO.util.DDM.getElement(id);
|
||||
if (el.className != this.onClass) {
|
||||
el.className = this.onClass;
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap.prototype.onDragOut = function(e, id) {
|
||||
this.logger.log(this.id + " dragOut " + id);
|
||||
|
||||
// restore the style
|
||||
YAHOO.util.DDM.getElement(id).className = this.offClass;
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap.prototype.endDrag = function(e) {
|
||||
this.logger.log(this.id + " endDrag");
|
||||
this.resetStyles();
|
||||
|
||||
/*
|
||||
var el = this.getDragEl();
|
||||
el.style.visibility = ""; // show the element first
|
||||
var position = [100, 100];
|
||||
var duration = 0.4;
|
||||
var oAnim = new YAHOO.util.Motion(
|
||||
el, { points: { to: position } }, duration, YAHOO.util.Easing.easeOut );
|
||||
|
||||
oAnim.onComplete.subscribe( function() { el.style.visibility = "hidden" } );
|
||||
*/
|
||||
|
||||
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap.prototype.resetStyles = function() {
|
||||
// restore all element styles
|
||||
for (var i in this.els) {
|
||||
var el = YAHOO.util.DDM.getElement(i);
|
||||
if (el) { el.className = this.offClass; }
|
||||
}
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap.prototype.onDrag = function(e) { };
|
||||
|
||||
YAHOO.example.DDSwap.prototype.onDragOver = function(e) { };
|
||||
|
||||
|
||||
//-------------------------------------------------------------------------
|
||||
// Intersect mode
|
||||
//-------------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
YAHOO.example.DDSwap_i = function(id, sGroup) {
|
||||
this.swapInit(id, sGroup);
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap_i.prototype = new YAHOO.example.DDSwap();
|
||||
|
||||
YAHOO.example.DDSwap_i.prototype.onDragDrop = function(e, dds) {
|
||||
// this.logger.log(this.id + " onDragDrop swap");
|
||||
var dd = YAHOO.util.DDM.getBestMatch(dds);
|
||||
this.swap(this.getEl(), dd.getEl());
|
||||
|
||||
this.resetConstraints();
|
||||
dd.resetConstraints();
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap_i.prototype.onDragEnter = function(e, dds) {
|
||||
// this.logger.log(this.id + " dragEnter " + id);
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap_i.prototype.onDragOver = function(e, dds) {
|
||||
|
||||
this.resetStyles();
|
||||
|
||||
var dd = YAHOO.util.DDM.getBestMatch(dds);
|
||||
|
||||
this.els[dd.id] = true;
|
||||
|
||||
// set the mouseover style
|
||||
var el = dd.getEl();
|
||||
if (el.className != this.onClass) {
|
||||
el.className = this.onClass;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
YAHOO.example.DDSwap_i.prototype.onDragOut = function(e, dds) {
|
||||
// this.logger.log(this.id + " dragOut " + id);
|
||||
|
||||
// restore the style
|
||||
for (var i=0; i<dds.length; ++i) {
|
||||
dds[i].getEl().className = this.offClass;
|
||||
}
|
||||
};
|
||||
|
||||
101
www/extras/yui/examples/dragdrop/js/color.js
vendored
101
www/extras/yui/examples/dragdrop/js/color.js
vendored
|
|
@ -1,101 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Color = new function() {
|
||||
|
||||
// Adapted from http://www.easyrgb.com/math.html
|
||||
// hsv values = 0 - 1
|
||||
// rgb values 0 - 255
|
||||
this.hsv2rgb = function (h, s, v) {
|
||||
var r, g, b;
|
||||
if ( s == 0 ) {
|
||||
r = v * 255;
|
||||
g = v * 255;
|
||||
b = v * 255;
|
||||
} else {
|
||||
|
||||
// h must be < 1
|
||||
var var_h = h * 6;
|
||||
if ( var_h == 6 ) {
|
||||
var_h = 0;
|
||||
}
|
||||
|
||||
//Or ... var_i = floor( var_h )
|
||||
var var_i = Math.floor( var_h );
|
||||
var var_1 = v * ( 1 - s );
|
||||
var var_2 = v * ( 1 - s * ( var_h - var_i ) );
|
||||
var var_3 = v * ( 1 - s * ( 1 - ( var_h - var_i ) ) );
|
||||
|
||||
if ( var_i == 0 ) {
|
||||
var_r = v;
|
||||
var_g = var_3;
|
||||
var_b = var_1;
|
||||
} else if ( var_i == 1 ) {
|
||||
var_r = var_2;
|
||||
var_g = v;
|
||||
var_b = var_1;
|
||||
} else if ( var_i == 2 ) {
|
||||
var_r = var_1;
|
||||
var_g = v;
|
||||
var_b = var_3
|
||||
} else if ( var_i == 3 ) {
|
||||
var_r = var_1;
|
||||
var_g = var_2;
|
||||
var_b = v;
|
||||
} else if ( var_i == 4 ) {
|
||||
var_r = var_3;
|
||||
var_g = var_1;
|
||||
var_b = v;
|
||||
} else {
|
||||
var_r = v;
|
||||
var_g = var_1;
|
||||
var_b = var_2
|
||||
}
|
||||
|
||||
r = var_r * 255 //rgb results = 0 ÷ 255
|
||||
g = var_g * 255
|
||||
b = var_b * 255
|
||||
|
||||
}
|
||||
return [Math.round(r), Math.round(g), Math.round(b)];
|
||||
};
|
||||
|
||||
this.rgb2hex = function (r,g,b) {
|
||||
return this.toHex(r) + this.toHex(g) + this.toHex(b);
|
||||
};
|
||||
|
||||
this.hexchars = "0123456789ABCDEF";
|
||||
|
||||
this.toHex = function(n) {
|
||||
n = n || 0;
|
||||
n = parseInt(n, 10);
|
||||
if (isNaN(n)) n = 0;
|
||||
n = Math.round(Math.min(Math.max(0, n), 255));
|
||||
|
||||
return this.hexchars.charAt((n - n % 16) / 16) + this.hexchars.charAt(n % 16);
|
||||
};
|
||||
|
||||
this.toDec = function(hexchar) {
|
||||
return this.hexchars.indexOf(hexchar.toUpperCase());
|
||||
};
|
||||
|
||||
this.hex2rgb = function(str) {
|
||||
var rgb = [];
|
||||
rgb[0] = (this.toDec(str.substr(0, 1)) * 16) +
|
||||
this.toDec(str.substr(1, 1));
|
||||
rgb[1] = (this.toDec(str.substr(2, 1)) * 16) +
|
||||
this.toDec(str.substr(3, 1));
|
||||
rgb[2] = (this.toDec(str.substr(4, 1)) * 16) +
|
||||
this.toDec(str.substr(5, 1));
|
||||
// gLogger.debug("hex2rgb: " + str + ", " + rgb.toString());
|
||||
return rgb;
|
||||
};
|
||||
|
||||
this.isValidRGB = function(a) {
|
||||
if ((!a[0] && a[0] !=0) || isNaN(a[0]) || a[0] < 0 || a[0] > 255) return false;
|
||||
if ((!a[1] && a[1] !=0) || isNaN(a[1]) || a[1] < 0 || a[1] > 255) return false;
|
||||
if ((!a[2] && a[2] !=0) || isNaN(a[2]) || a[2] < 0 || a[2] > 255) return false;
|
||||
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
34
www/extras/yui/examples/dragdrop/js/key.js
vendored
34
www/extras/yui/examples/dragdrop/js/key.js
vendored
|
|
@ -1,34 +0,0 @@
|
|||
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
|
||||
|
||||
YAHOO.util.Key = new function() {
|
||||
// this.logger = new ygLogger("ygEventUtil");
|
||||
// DOM key constants
|
||||
this.DOM_VK_UNDEFINED = 0x0;
|
||||
this.DOM_VK_RIGHT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_ALT = 0x12;
|
||||
this.DOM_VK_LEFT_CONTROL = 0x11;
|
||||
this.DOM_VK_RIGHT_CONTROL = 0x11;
|
||||
this.DOM_VK_LEFT_SHIFT = 0x10;
|
||||
this.DOM_VK_RIGHT_SHIFT = 0x10;
|
||||
this.DOM_VK_META = 0x9D;
|
||||
this.DOM_VK_BACK_SPACE = 0x08;
|
||||
this.DOM_VK_CAPS_LOCK = 0x14;
|
||||
this.DOM_VK_DELETE = 0x7F;
|
||||
this.DOM_VK_END = 0x23;
|
||||
this.DOM_VK_ENTER = 0x0D;
|
||||
this.DOM_VK_ESCAPE = 0x1B;
|
||||
this.DOM_VK_HOME = 0x24;
|
||||
this.DOM_VK_NUM_LOCK = 0x90;
|
||||
this.DOM_VK_PAUSE = 0x13;
|
||||
this.DOM_VK_PRINTSCREEN = 0x9A;
|
||||
this.DOM_VK_SCROLL_LOCK = 0x91;
|
||||
this.DOM_VK_SPACE = 0x20;
|
||||
this.DOM_VK_TAB = 0x09;
|
||||
this.DOM_VK_LEFT = 0x25;
|
||||
this.DOM_VK_RIGHT = 0x27;
|
||||
this.DOM_VK_UP = 0x26;
|
||||
this.DOM_VK_DOWN = 0x28;
|
||||
this.DOM_VK_PAGE_DOWN = 0x22;
|
||||
this.DOM_VK_PAGE_UP = 0x21;
|
||||
};
|
||||
|
||||
20
www/extras/yui/examples/dragdrop/js/log.js
vendored
20
www/extras/yui/examples/dragdrop/js/log.js
vendored
|
|
@ -1,20 +0,0 @@
|
|||
// Adapter for YAHOO.widget.Logger
|
||||
|
||||
var ygLogger = function(module) {
|
||||
return new YAHOO.widget.LogWriter(module);
|
||||
};
|
||||
|
||||
YAHOO.widget.LogWriter.prototype.debug = function() {
|
||||
this.log.apply(this, arguments);
|
||||
};
|
||||
|
||||
YAHOO.widget.LogWriter.prototype.setModuleName = function(source) {
|
||||
this._source = source;
|
||||
};
|
||||
|
||||
|
||||
ygLogger.init = function(div) {
|
||||
new YAHOO.widget.LogReader(div, {
|
||||
height: "400px"
|
||||
});
|
||||
};
|
||||
|
|
@ -1,206 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
<script type="text/javascript" src="js/DDList.js" ></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.DDApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
var i = 0;
|
||||
for (j=0;j < 20;++j) {
|
||||
new YAHOO.example.DDList("li" + j);
|
||||
new YAHOO.example.DDList("li" + (j + 20));
|
||||
new YAHOO.example.DDList("li" + (j + 40), "right");
|
||||
}
|
||||
|
||||
new YAHOO.example.DDListBoundary("hidden1");
|
||||
new YAHOO.example.DDListBoundary("hidden2");
|
||||
new YAHOO.example.DDListBoundary("hidden3", "right");
|
||||
|
||||
// dd11 = new YAHOO.example.DDList("li11");
|
||||
// dd11.addToGroup("right");
|
||||
// dd12 = new YAHOO.example.DDList("li12");
|
||||
// dd12.addToGroup("right");
|
||||
YAHOO.util.DDM.mode =
|
||||
document.getElementById("ddmode").selectedIndex;
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
|
||||
// YAHOO.util.DDM.useCache = false;
|
||||
|
||||
</script>
|
||||
<body>
|
||||
|
||||
<div id="pageTitle"><h3>Drag and Drop - DDProxy</h3></div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Sortable List</h3>
|
||||
<p>
|
||||
This example extends
|
||||
DDProxy
|
||||
to implement a sortable list. When a list item is dragged past the center
|
||||
of another list item, it is inserted before that item.
|
||||
The items in the first two columns can interact with items in the other
|
||||
column. The items in the third column are defined as a separate group,
|
||||
so they can only interact with other items in the third column.
|
||||
</p>
|
||||
|
||||
Mode:
|
||||
<select id="ddmode" onchange="YAHOO.util.DDM.mode = this.selectedIndex">
|
||||
<option value="0" selected>Point</point>
|
||||
<option value="1">Intersect</point>
|
||||
</select>
|
||||
<p>
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
</p>
|
||||
|
||||
<table border="0">
|
||||
<tr>
|
||||
<td >
|
||||
<ul class="listGroup1">
|
||||
<li id="hidden6" class="sortListHidden">Hidden</li>
|
||||
<li id="li0" class="sortList">li 0</li><li id="li1" class="sortList">li 1</li><li id="li2" class="sortList">li 2</li><li id="li3" class="sortList">li 3</li><li id="li4" class="sortList">li 4</li><li id="li5" class="sortList">li 5</li><li id="li6" class="sortList">li 6</li><li id="li7" class="sortList">li 7</li><li id="li8" class="sortList">li 8</li><li id="li9" class="sortList">li 9</li><li id="li10" class="sortList">li 10</li><li id="li11" class="sortList">li 11</li><li id="li12" class="sortList">li 12</li><li id="li13" class="sortList">li 13</li><li id="li14" class="sortList">li 14</li><li id="li15" class="sortList">li 15</li><li id="li16" class="sortList">li 16</li><li id="li17" class="sortList">li 17</li><li id="li18" class="sortList">li 18</li><li id="li19" class="sortList">li 19</li> <li id="hidden1" class="sortListHidden">Hidden</li>
|
||||
|
||||
</ul>
|
||||
</td>
|
||||
|
||||
<td> </td>
|
||||
<td>
|
||||
<ul class="listGroup1">
|
||||
<li id="hidden5" class="sortListHidden">Hidden</li>
|
||||
<li id="li20" class="sortList">li 20</li><li id="li21" class="sortList">li 21</li><li id="li22" class="sortList">li 22</li><li id="li23" class="sortList">li 23</li><li id="li24" class="sortList">li 24</li><li id="li25" class="sortList">li 25</li><li id="li26" class="sortList">li 26</li><li id="li27" class="sortList">li 27</li><li id="li28" class="sortList">li 28</li><li id="li29" class="sortList">li 29</li><li id="li30" class="sortList">li 30</li><li id="li31" class="sortList">li 31</li><li id="li32" class="sortList">li 32</li><li id="li33" class="sortList">li 33</li><li id="li34" class="sortList">li 34</li><li id="li35" class="sortList">li 35</li><li id="li36" class="sortList">li 36</li><li id="li37" class="sortList">li 37</li><li id="li38" class="sortList">li 38</li><li id="li39" class="sortList">li 39</li>
|
||||
<li id="hidden2" class="sortListHidden">Hidden</li>
|
||||
</ul>
|
||||
</td>
|
||||
|
||||
<td> </td>
|
||||
<td>
|
||||
<ul class="listGroup2">
|
||||
<li id="hidden4" class="sortListHidden">Hidden</li>
|
||||
<li id="li40" class="sortList">li 40</li><li id="li41" class="sortList">li 41</li><li id="li42" class="sortList">li 42</li><li id="li43" class="sortList">li 43</li><li id="li44" class="sortList">li 44</li><li id="li45" class="sortList">li 45</li><li id="li46" class="sortList">li 46</li><li id="li47" class="sortList">li 47</li><li id="li48" class="sortList">li 48</li><li id="li49" class="sortList">li 49</li><li id="li50" class="sortList">li 50</li><li id="li51" class="sortList">li 51</li><li id="li52" class="sortList">li 52</li><li id="li53" class="sortList">li 53</li><li id="li54" class="sortList">li 54</li><li id="li55" class="sortList">li 55</li><li id="li56" class="sortList">li 56</li><li id="li57" class="sortList">li 57</li><li id="li58" class="sortList">li 58</li><li id="li59" class="sortList">li 59</li> <li id="hidden3" class="sortListHidden">Hidden</li>
|
||||
</ul>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
<script type="text/javascript" src="js/DDOnTop.js" ></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.DDApp = function() {
|
||||
var dd, dd3, logger;
|
||||
return {
|
||||
init: function() {
|
||||
dd = new YAHOO.example.DDOnTop("dragDiv1");
|
||||
dd.setHandleElId("handle1");
|
||||
dd.setHandleElId("handle2");
|
||||
dd3 = new YAHOO.util.DDTarget("dragDiv3");
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
|
||||
|
||||
</script>
|
||||
<body>
|
||||
<div id="pageTitle">
|
||||
<h3>Drag and Drop - DD, DDTarget</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Multiple Drag Handles</h3>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dragDiv1" style="position:absolute;color:white;background-color:#594178;top:240px; left:105px;height:200px;width:200px;z-index:2;padding:4px">
|
||||
<div id="handle1" style="text-align:center;margin-right:14px;cursor:move;float:left;color:black;width:90px;background-color:#eeeeee;border:1px solid black ">handle1</div>
|
||||
<div id="handle2" style="text-align:center;cursor:move;float:right;color:black;width:90px;background-color:#eeeeee;border:1px solid black ">handle2</div>
|
||||
<p>
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris nec turpis. Vestibulum gravida suscipit libero. Integer id sapien. Nullam tempus, lorem quis rutrum consectetuer, erat massa vehicula nisl, eu pulvinar lacus diam ac orci
|
||||
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="dragDiv3" class="testSquare" style="background-color:#000000;top:460px; left:325px;cursor:default;z-index:0">DDTarget</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
<script type="text/javascript" src="js/DDOnTop.js" ></script>
|
||||
|
||||
<script type="text/javascript" language="JavaScript">
|
||||
|
||||
YAHOO.example.DDApp = function() {
|
||||
var dd, dd2, dd3;
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
dd = new YAHOO.example.DDOnTop("dragDiv1");
|
||||
dd.addInvalidHandleId("excludeid3");
|
||||
dd.addInvalidHandleClass("excludeclass2");
|
||||
|
||||
dd2 = new YAHOO.example.DDOnTop("dragDiv2");
|
||||
// dd2.setPadding(-10);
|
||||
// dd2.setXConstraint(100, 100);
|
||||
// dd2.setYConstraint(0, 0);
|
||||
|
||||
dd3 = new YAHOO.example.DDOnTop("dragDiv3");
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
|
||||
|
||||
</script>
|
||||
<style type="text/css">
|
||||
|
||||
#dragDiv1 {
|
||||
background:url(img/sq1.png) 0 0 no-repeat;
|
||||
background-color:#6D739A;top:240px; left:105px;
|
||||
}
|
||||
#excludeid1 {
|
||||
position:absolute; top:20px; left:20px;height:20px;width:20px;
|
||||
background-color:#333333;
|
||||
}
|
||||
#excludeid2 {
|
||||
position:absolute; top:40px; left:40px;height:20px;width:20px;
|
||||
background-color:#333333;
|
||||
}
|
||||
#excludeid3 {
|
||||
position:absolute; top:60px; left:60px;height:20px;width:20px;
|
||||
background-color:#333333;
|
||||
}
|
||||
#maskDiv {
|
||||
position: absolute; top:0px; left: 0px; width:100px; height:20px;
|
||||
}
|
||||
|
||||
#dragDiv2 {
|
||||
background:url(img/sq2.png) 0 0 no-repeat;background-color:#566F4E;
|
||||
top:350px; left:215px;
|
||||
}
|
||||
|
||||
#dragDiv3 {
|
||||
background:url(img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;
|
||||
top:460px; left:325px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="pageTitle"><h3>Drag and Drop - DD</h3></div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Dragged object is on top</h3>
|
||||
<p>
|
||||
This example is identical to the basic drag and drop implementation,
|
||||
YAHOO.util.DD,
|
||||
but we have extended it so that the square that is being dragged is positioned
|
||||
on top of the others.
|
||||
</p>
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
<div id="workArea"> </div>
|
||||
<p> </p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="dragDiv1" class="testSquare">
|
||||
DDOnTop
|
||||
<div id="excludeid1" class="excludeclass1"> </div>
|
||||
<div id="excludeid2" class="excludeclass2"> </div>
|
||||
<div id="excludeid3" class="excludeclass1"> </div>
|
||||
<div id="maskDiv"> </div>
|
||||
</div>
|
||||
<div id="dragDiv2" class="testSquare">
|
||||
<a href="#">DDOnTop</a>
|
||||
</div>
|
||||
<div id="dragDiv3" class="testSquare">DDOnTop</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,278 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
<script type="text/javascript" src="js/DDSwap.js" ></script>
|
||||
|
||||
<script type="text/javascript" language="JavaScript">
|
||||
|
||||
YAHOO.example.DDApp = function() {
|
||||
var dd, dd2, dd3;
|
||||
|
||||
function handleKeypress(e) {
|
||||
alert("asdf");
|
||||
YAHOO.log("keypress");
|
||||
YAHOO.util.Event.stopEvent(e);
|
||||
e.cancel = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function initPointMode() {
|
||||
|
||||
YAHOO.log("point mode");
|
||||
|
||||
unreg();
|
||||
|
||||
YAHOO.util.DDM.mode = YAHOO.util.DDM.POINT;
|
||||
|
||||
dd = new YAHOO.example.DDSwap("dragDiv1", "proxytest");
|
||||
// dd.setPadding(10);
|
||||
//dd.setXConstraint(0,0);
|
||||
|
||||
dd2 = new YAHOO.example.DDSwap("dragDiv2", "proxytest");
|
||||
dd2.addInvalidHandleType("input");
|
||||
// dd2.setPadding(10, 20, 30, 40);
|
||||
// dd2.setXConstraint(0,0);
|
||||
|
||||
// the third DD instance uses its own proxy element
|
||||
dd3 = new YAHOO.example.DDSwap("dragDiv3", "proxytest",
|
||||
{ dragElId: "dragDiv4" });
|
||||
// dd3.setPadding(10, 40);
|
||||
// dd3.setPadding(10, 0, 20, 40);
|
||||
|
||||
|
||||
}
|
||||
|
||||
function initIntersectMode() {
|
||||
|
||||
YAHOO.log("intersect mode");
|
||||
|
||||
unreg();
|
||||
|
||||
YAHOO.util.DDM.mode = YAHOO.util.DDM.INTERSECT;
|
||||
|
||||
dd = new YAHOO.example.DDSwap_i("dragDiv1");
|
||||
//dd.setPadding(10);
|
||||
|
||||
dd2 = new YAHOO.example.DDSwap_i("dragDiv2");
|
||||
dd2.addInvalidHandleType("input");
|
||||
//dd2.setPadding(10, 20, 30, 40);
|
||||
// dd2.setXConstraint(0,0);
|
||||
|
||||
dd3 = new YAHOO.example.DDSwap_i("dragDiv3");
|
||||
// dd3.setPadding(10, 40);
|
||||
//dd3.setPadding(10, 0, 20, 40);
|
||||
}
|
||||
|
||||
function unreg() {
|
||||
if (dd) dd.unreg();
|
||||
if (dd2) dd2.unreg();
|
||||
if (dd3) dd3.unreg();
|
||||
}
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
// YAHOO.util.Event.on("testtext", "keydown", handleKeypress);
|
||||
initPointMode();
|
||||
},
|
||||
|
||||
lock: function() {
|
||||
dd.lock();
|
||||
dd2.setXConstraint(100, 100);
|
||||
dd2.setYConstraint(100, 100);
|
||||
},
|
||||
|
||||
unlock: function() {
|
||||
dd.unlock();
|
||||
},
|
||||
|
||||
changeMode: function(val) {
|
||||
if (val == 1) {
|
||||
initIntersectMode();
|
||||
} else {
|
||||
initPointMode();
|
||||
}
|
||||
},
|
||||
|
||||
unreg: function() {
|
||||
dd.unreg();
|
||||
}
|
||||
|
||||
};
|
||||
}();
|
||||
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
|
||||
|
||||
</script>
|
||||
|
||||
<div id="pageTitle">
|
||||
<h3>Drag and Drop - DDProxy</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Proxy</h3>
|
||||
|
||||
<!--
|
||||
<a href="javascript:YAHOO.util.DDM._onUnload()">Unload test</a>
|
||||
<a href="javascript:YAHOO.example.DDApp.lock()">lock</a>
|
||||
<a href="javascript:YAHOO.example.DDApp.unlock()">unlock</a>
|
||||
<a href="javascript:YAHOO.example.DDApp.unreg()">Unreg test</a>
|
||||
-->
|
||||
<p>
|
||||
This example builds on
|
||||
<a href="../test/test_draggable.php?mode=dist">YAHOO.util.DD</a>.
|
||||
Instead of moving the actual html element that was clicked, we have a hidden
|
||||
layer, empty aside from a border, absolutely positioned, that we place in the same
|
||||
location of the clicked object. The onDrag event handler was implemented so
|
||||
that the style of the DragDrop elements change when they interact. The onDragDrop
|
||||
event handler was implemented so that the elements swap positions if one is dropped
|
||||
on another.
|
||||
Mode:
|
||||
<select onchange="YAHOO.example.DDApp.changeMode(this.selectedIndex)">
|
||||
<option value="0" selected>Point</point>
|
||||
<option value="1">Intersect</point>
|
||||
</select>
|
||||
<!--
|
||||
<input name="testtext" id="testtext" type="text" />
|
||||
-->
|
||||
|
||||
</p>
|
||||
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--
|
||||
<div id="wrapperDiv" style="position:relative;width:400px;top:200px;height:200px;overflow:auto">
|
||||
-->
|
||||
|
||||
<div id="dragDiv1" class="testSquare" style="background:url(img/sq1.png) 0 0 no-repeat;background-color:#6D739A;top:270px; left:105px ">DDSwap</div>
|
||||
<div id="dragDiv2" class="testSquare" style="background:url(img/sq2.png) 0 0 no-repeat;background-color:#566F4E;top:350px; left:215px">
|
||||
DDSwap
|
||||
<!--
|
||||
<input type="text" name="testinput" />
|
||||
-->
|
||||
</div>
|
||||
<div id="wrapperDiv">
|
||||
<div id="dragDiv3" class="testSquare" style="background:url(img/sq3.png) 0 0 no-repeat;background-color:#7E5B60;top:430px; left:325px">DDSwap</div>
|
||||
</div>
|
||||
|
||||
<div id="dragDiv4" class="testSquare" style="visibility:hidden;border:0px solid black;height: 141px;width:160px;background-color:#7E5B60;top:630px; left:525px">a custom proxy element</div>
|
||||
<!--
|
||||
</div>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,191 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
|
||||
<script type="text/javascript" src="js/DDResize.js" ></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.DDApp = function() {
|
||||
var dd, dd2, dd3;
|
||||
return {
|
||||
init: function() {
|
||||
dd = new YAHOO.example.DDResize("panelDiv", "handleDiv", "panelresize");
|
||||
dd2 = new YAHOO.util.DD("panelDiv", "paneldrag");
|
||||
dd2.addInvalidHandleId("handleDiv");
|
||||
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
function testclick(e) {
|
||||
alert("click");
|
||||
}
|
||||
|
||||
// var resizer_dd1 = new YAHOO.util.DD("theimage");
|
||||
// resizer_dd1.setYConstraint(0,0);
|
||||
|
||||
// YAHOO.util.Event.addListener("theimage", "mousedown", testclick);
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
|
||||
|
||||
</script>
|
||||
|
||||
<div id="pageTitle"><h3>Drag and Drop - DD</h3></div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<h3>Resize</h3>
|
||||
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
<div id="panelDiv">
|
||||
<div id="handleDiv"></div>
|
||||
</div>
|
||||
|
||||
<p> </p>
|
||||
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
#panelDiv {
|
||||
position:relative;
|
||||
height: 300px;
|
||||
width: 150px;
|
||||
top:80px;
|
||||
left:105px;
|
||||
border:1px solid #333333;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
#handleDiv {
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
right: 0px;
|
||||
width:10px;
|
||||
height:10px;
|
||||
background-color:blue;
|
||||
font-size: 1px;
|
||||
}
|
||||
|
||||
#theimage {
|
||||
position:absolute;top:10px;left:10px;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img id='theimage' src='img/lthumb.png' />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
-->
|
||||
|
||||
<!--
|
||||
<div id="theimage" style="position:absolute;top:50px;height:10px;width:10px;background-color:red">asdf</div>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,576 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:x2="http://www.w3.org/TR/xhtml2"
|
||||
xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
|
||||
xmlns:state="http://www.w3.org/2005/07/aaa">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Slider Widget</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/screen.css">
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="pageTitle"><h3>Drag and Drop - Slider Widgets</h3></div>
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header"><img src="img/logo.gif" vspace="4" hspace="4" /></div>
|
||||
<div id="main">
|
||||
|
||||
<div id="content">
|
||||
<div class="newsItem">
|
||||
<h3>Basic Sliders</h3>
|
||||
<p>
|
||||
The slider widget is an implementation of YAHOO.util.DragDrop
|
||||
It also will use YAHOO.util.Animation if available to
|
||||
animate the movement of the thumb when you click the
|
||||
slider background.
|
||||
|
||||
The only difference between the two sliders aside from
|
||||
the fact that one is vertical and one horizontal is that
|
||||
the horizontal slider implements the "tick mark" feature
|
||||
of drag and drop; it will "snap" to the tick marks spaced
|
||||
25 pixels apart.
|
||||
</p>
|
||||
<!--
|
||||
<p>
|
||||
<a href="javascript:slider1.lock()">Lock</a>
|
||||
<a href="javascript:slider1.unlock()">Unlock</a>
|
||||
</p>
|
||||
-->
|
||||
|
||||
<div id="vertWrapper">
|
||||
<div
|
||||
id="vertBGDiv"
|
||||
name="vertBGDiv"
|
||||
tabindex="0"
|
||||
x2:role="role:slider"
|
||||
state:valuenow="0"
|
||||
state:valuemin="0"
|
||||
state:valuemax="200"
|
||||
title="Vertical Slider"
|
||||
onkeypress="return handleVertSliderKey(this, YAHOO.util.Event.getEvent(event))"
|
||||
>
|
||||
<div id="vertHandleDiv"><img src="img/vertSlider.png"></div>
|
||||
</div>
|
||||
|
||||
<div id="vertValueDiv">
|
||||
<form name="formV" onsubmit="return updateVert()">
|
||||
<input name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
|
||||
<input type="button" value="Update" onclick="updateVert()" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="horizWrapper">
|
||||
<div
|
||||
id="horizBGDiv"
|
||||
name="horizBGDiv"
|
||||
tabindex="0"
|
||||
x2:role="role:slider"
|
||||
state:valuenow="0"
|
||||
state:valuemin="-100"
|
||||
state:valuemax="100"
|
||||
title="Horizontal Slider"
|
||||
onkeypress="return handleHorizSliderKey(this, YAHOO.util.Event.getEvent(event))"
|
||||
>
|
||||
<div id="horizHandleDiv" ><img src="img/horizSlider.png"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="horizValueDiv">
|
||||
<form name="formH" onsubmit="return updateHoriz()">
|
||||
<input name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
|
||||
<input type="button" value="Update" onclick="updateHoriz()" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<h3>Color Picker</h3>
|
||||
<p>
|
||||
Implements a slider region and a vertical slider to implement an HSV color
|
||||
picker.
|
||||
</p>
|
||||
|
||||
<div id="pickerPanel" class="dragPanel">
|
||||
<h4 id="pickerHandle"> </h4>
|
||||
<div id="pickerDiv">
|
||||
<img id="pickerbg" src="img/pickerbg.png" alt="">
|
||||
<div id="selector"><img src="img/select.gif"></div>
|
||||
</div>
|
||||
|
||||
<div id="hueBg">
|
||||
<div id="hueThumb"><img src="img/hline.png"></div>
|
||||
</div>
|
||||
|
||||
<div id="pickervaldiv">
|
||||
<form name="pickerform" onsubmit="return pickerUpdate()">
|
||||
<br />
|
||||
R <input name="pickerrval" id="pickerrval" type="text" value="0" size="3" maxlength="3" />
|
||||
H <input name="pickerhval" id="pickerhval" type="text" value="0" size="3" maxlength="3" />
|
||||
<br />
|
||||
G <input name="pickergval" id="pickergval" type="text" value="0" size="3" maxlength="3" />
|
||||
S <input name="pickergsal" id="pickersval" type="text" value="0" size="3" maxlength="3" />
|
||||
<br />
|
||||
B <input name="pickerbval" id="pickerbval" type="text" value="0" size="3" maxlength="3" />
|
||||
V <input name="pickervval" id="pickervval" type="text" value="0" size="3" maxlength="3" />
|
||||
<br />
|
||||
<br />
|
||||
# <input name="pickerhexval" id="pickerhexval" type="text" value="0" size="6" maxlength="6" />
|
||||
<br />
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="pickerSwatch"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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" src="../../build/logger/logger.js" ></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js" ></script>
|
||||
<script type="text/javascript" src="js/color.js" ></script>
|
||||
<script type="text/javascript" src="js/key.js" ></script>
|
||||
<script type="text/javascript" src="../../build/animation/animation.js" ></script>
|
||||
<script type="text/javascript" src="../../build/slider/slider.js" ></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var hue;
|
||||
var picker;
|
||||
var dd1, dd2;
|
||||
var r, g, b;
|
||||
|
||||
function init() {
|
||||
standardSliderInit();
|
||||
// rgbInit();
|
||||
pickerInit();
|
||||
}
|
||||
|
||||
// Picker ---------------------------------------------------------
|
||||
|
||||
function pickerInit() {
|
||||
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
|
||||
hue.onChange = function(newVal) { hueUpdate(newVal); };
|
||||
|
||||
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector",
|
||||
0, 180, 0, 180);
|
||||
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
|
||||
|
||||
hueUpdate();
|
||||
|
||||
dd1 = new YAHOO.util.DD("pickerPanel");
|
||||
dd1.setHandleElId("pickerHandle");
|
||||
dd1.endDrag = function(e) {
|
||||
// picker.thumb.resetConstraints();
|
||||
// hue.thumb.resetConstraints();
|
||||
};
|
||||
}
|
||||
|
||||
window.onload = init;
|
||||
|
||||
function pickerUpdate(newX, newY) {
|
||||
pickerSwatchUpdate();
|
||||
}
|
||||
|
||||
function hueUpdate(newVal) {
|
||||
|
||||
var h = (180 - hue.getValue()) / 180;
|
||||
if (h == 1) { h = 0; }
|
||||
|
||||
YAHOO.log("hue " + hue.getValue());
|
||||
|
||||
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
|
||||
|
||||
document.getElementById("pickerDiv").style.backgroundColor =
|
||||
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
|
||||
|
||||
pickerSwatchUpdate();
|
||||
}
|
||||
|
||||
function pickerSwatchUpdate() {
|
||||
var h = (180 - hue.getValue());
|
||||
if (h == 180) { h = 0; }
|
||||
document.getElementById("pickerhval").value = (h*2);
|
||||
|
||||
h = h / 180;
|
||||
YAHOO.log("h " + hue.getValue());
|
||||
|
||||
var s = picker.getXValue() / 180;
|
||||
document.getElementById("pickersval").value = Math.round(s * 100);
|
||||
|
||||
YAHOO.log("s " + s);
|
||||
|
||||
var v = (180 - picker.getYValue()) / 180;
|
||||
document.getElementById("pickervval").value = Math.round(v * 100);
|
||||
|
||||
YAHOO.log("v " + v);
|
||||
|
||||
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
|
||||
|
||||
document.getElementById("pickerSwatch").style.backgroundColor =
|
||||
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
|
||||
|
||||
document.getElementById("pickerrval").value = a[0];
|
||||
document.getElementById("pickergval").value = a[1];
|
||||
document.getElementById("pickerbval").value = a[2];
|
||||
document.getElementById("pickerhexval").value =
|
||||
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
|
||||
}
|
||||
|
||||
|
||||
// RGB slider ---------------------------------------------------------
|
||||
|
||||
function rgbInit() {
|
||||
|
||||
r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
|
||||
r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
|
||||
|
||||
g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
|
||||
g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
|
||||
|
||||
b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
|
||||
b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
|
||||
|
||||
initColor();
|
||||
|
||||
dd2 = new YAHOO.util.DD("rgbPanel");
|
||||
dd2.setHandleElId("rgbHandle");
|
||||
dd2.endDrag = function(e) {
|
||||
// r.thumb.resetConstraints();
|
||||
// g.thumb.resetConstraints();
|
||||
// b.thumb.resetConstraints();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function initColor() {
|
||||
var ch = " ";
|
||||
|
||||
d = document.createElement("P");
|
||||
d.className = "rb";
|
||||
r.getEl().appendChild(d);
|
||||
d = document.createElement("P");
|
||||
d.className = "rb";
|
||||
g.getEl().appendChild(d);
|
||||
d = document.createElement("P");
|
||||
d.className = "rb";
|
||||
b.getEl().appendChild(d);
|
||||
|
||||
for (var i=0; i<34; i++) {
|
||||
d = document.createElement("SPAN");
|
||||
d.id = "rBG" + i
|
||||
// d.innerHTML = ch;
|
||||
r.getEl().appendChild(d);
|
||||
|
||||
d = document.createElement("SPAN");
|
||||
d.id = "gBG" + i
|
||||
// d.innerHTML = ch;
|
||||
g.getEl().appendChild(d);
|
||||
|
||||
d = document.createElement("SPAN");
|
||||
d.id = "bBG" + i
|
||||
// d.innerHTML = ch;
|
||||
b.getEl().appendChild(d);
|
||||
}
|
||||
|
||||
d = document.createElement("P");
|
||||
d.className = "lb";
|
||||
r.getEl().appendChild(d);
|
||||
d = document.createElement("P");
|
||||
d.className = "lb";
|
||||
g.getEl().appendChild(d);
|
||||
d = document.createElement("P");
|
||||
d.className = "lb";
|
||||
b.getEl().appendChild(d);
|
||||
|
||||
userUpdate();
|
||||
}
|
||||
|
||||
function updateSliderColors() {
|
||||
var curr, curg, curb;
|
||||
curr = Math.min(r.getValue() * 2, 255);
|
||||
curg = Math.min(g.getValue() * 2, 255);
|
||||
curb = Math.min(b.getValue() * 2, 255);
|
||||
|
||||
YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);
|
||||
|
||||
var d;
|
||||
for (var i=0; i<34; i++) {
|
||||
d = document.getElementById("rBG" + i);
|
||||
d.style.backgroundColor =
|
||||
"rgb(" + (i*8) + "," + curg + "," + curb + ")";
|
||||
|
||||
d = document.getElementById("gBG" + i);
|
||||
d.style.backgroundColor =
|
||||
"rgb(" + curr + "," + (i*8) + "," + curb + ")";
|
||||
|
||||
d = document.getElementById("bBG" + i);
|
||||
d.style.backgroundColor =
|
||||
"rgb(" + curr + "," + curg + "," + (i*8) + ")";
|
||||
}
|
||||
|
||||
document.getElementById("rgbSwatch").style.backgroundColor =
|
||||
"rgb(" + curr + "," + curg + "," + curb + ")";
|
||||
|
||||
document.getElementById("hexval").value =
|
||||
YAHOO.util.Color.rgb2hex(curr, curg, curb);
|
||||
}
|
||||
|
||||
|
||||
function listenerUpdate(whichSlider, newVal) {
|
||||
if (newVal == 256) {
|
||||
newVal = 255;
|
||||
}
|
||||
document.getElementById(whichSlider + "val").value = newVal;
|
||||
updateSliderColors();
|
||||
}
|
||||
|
||||
function userUpdate(isHex) {
|
||||
YAHOO.log("userupdate");
|
||||
var v;
|
||||
var f = document.forms['rgbform'];
|
||||
|
||||
if (isHex) {
|
||||
var hexval = f["hexval"].value;
|
||||
// shorthand #369
|
||||
if (hexval.length == 3) {
|
||||
var newval = "";
|
||||
for (var i=0;i<3;i++) {
|
||||
var a = hexval.substr(i, 1);
|
||||
newval += a + a;
|
||||
}
|
||||
|
||||
hexval = newval;
|
||||
}
|
||||
|
||||
YAHOO.log("hexval:" + hexval);
|
||||
|
||||
if (hexval.length != 6) {
|
||||
alert("illegal hex code: " + hexval);
|
||||
} else {
|
||||
var rgb = YAHOO.util.Color.hex2rgb(hexval);
|
||||
// alert(rgb.toString());
|
||||
if (YAHOO.util.Color.isValidRGB(rgb)) {
|
||||
f['rval'].value = rgb[0];
|
||||
f['gval'].value = rgb[1];
|
||||
f['bval'].value = rgb[2];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// red
|
||||
v = parseFloat(f['rval'].value);
|
||||
v = ( isNaN(v) ) ? 0 : Math.round(v);
|
||||
r.setValue(Math.round(v) / 2);
|
||||
|
||||
v = parseFloat(f['gval'].value);
|
||||
v = ( isNaN(v) ) ? 0 : Math.round(v);
|
||||
g.setValue(Math.round(v) / 2);
|
||||
|
||||
v = parseFloat(f['bval'].value);
|
||||
v = ( isNaN(v) ) ? 0 : Math.round(v);
|
||||
b.setValue(Math.round(v) / 2);
|
||||
|
||||
updateSliderColors();
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function userReset() {
|
||||
var v;
|
||||
var f = document.forms['rgbform'];
|
||||
|
||||
r.setValue(0);
|
||||
g.setValue(0);
|
||||
b.setValue(0);
|
||||
}
|
||||
|
||||
var slider1, slider2;
|
||||
function standardSliderInit() {
|
||||
|
||||
slider1 = YAHOO.widget.Slider.getVertSlider("vertBGDiv", "vertHandleDiv", 0, 200);
|
||||
|
||||
slider1.onChange = function(offsetFromStart) {
|
||||
document.getElementById("vertVal").value = offsetFromStart;
|
||||
}
|
||||
|
||||
slider2 = YAHOO.widget.Slider.getHorizSlider("horizBGDiv", "horizHandleDiv", 100, 100, 25);
|
||||
|
||||
slider2.onChange = function(offsetFromStart) {
|
||||
document.getElementById("horizVal").value = offsetFromStart;
|
||||
}
|
||||
|
||||
// if (document.getElementById("vertBGDiv").getAttributeNS) {
|
||||
// slider1.focusOnClick = true;
|
||||
// slider2.focusOnClick = true;
|
||||
// }
|
||||
}
|
||||
|
||||
function updateVert() {
|
||||
var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
|
||||
if ( isNaN(v) ) v = 0;
|
||||
slider1.setValue(Math.round(v));
|
||||
return false;
|
||||
}
|
||||
|
||||
function updateHoriz() {
|
||||
var v = parseFloat(document.forms['formH']['horizVal'].value, 10);
|
||||
if ( isNaN(v) ) v = 0;
|
||||
slider2.setValue(Math.round(v));
|
||||
return false;
|
||||
}
|
||||
|
||||
// accessibility keypress test
|
||||
function handleHorizSliderKey(slider, ev) {
|
||||
YAHOO.log("horizontal slider keypress");
|
||||
|
||||
// Firefox 1.5+ only at this point
|
||||
if (!slider.getAttributeNS) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
|
||||
|
||||
var valueNow = slider2.getValue();
|
||||
|
||||
var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
|
||||
var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
|
||||
|
||||
var delta = 0;
|
||||
|
||||
var kc = ev.keyCode;
|
||||
|
||||
YAHOO.log("keycode: " + kc);
|
||||
|
||||
if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
|
||||
delta = -25;
|
||||
} else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
|
||||
delta = 25;
|
||||
} else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
|
||||
delta = -( valueNow - valueMin );
|
||||
} else if (kc == YAHOO.util.Key.DOM_VK_END) {
|
||||
delta = valueMax - valueNow;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
|
||||
valueNow += delta;
|
||||
|
||||
slider2.setValue(valueNow, true);
|
||||
|
||||
slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
|
||||
|
||||
// displaySlider(slider);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function handleVertSliderKey(slider, ev) {
|
||||
YAHOO.log("vertical slider keypress");
|
||||
|
||||
// Firefox 1.5+ only at this point
|
||||
if (!slider.getAttributeNS) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// var valueNow = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow"));
|
||||
|
||||
var valueNow = slider1.getValue();
|
||||
|
||||
var valueMin = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemin"));
|
||||
var valueMax = parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa", "valuemax"));
|
||||
|
||||
var delta = 0;
|
||||
var kc = ev.keyCode;
|
||||
if (kc == YAHOO.util.Key.DOM_VK_UP) {
|
||||
delta = -20;
|
||||
}
|
||||
else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
|
||||
delta = 20;
|
||||
}
|
||||
else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
|
||||
delta = -( valueNow - valueMin );
|
||||
}
|
||||
else if (kc == YAHOO.util.Key.DOM_VK_END) {
|
||||
delta = valueMax - valueNow;
|
||||
}
|
||||
else {
|
||||
return true;
|
||||
}
|
||||
|
||||
valueNow += delta;
|
||||
if (valueNow < valueMin) {
|
||||
valueNow = valueMin;
|
||||
}
|
||||
|
||||
if (valueNow > valueMax) {
|
||||
valueNow = valueMax;
|
||||
}
|
||||
slider.setAttributeNS("http://www.w3.org/2005/07/aaa", "valuenow", valueNow);
|
||||
|
||||
// displaySlider(slider);
|
||||
slider1.setValue(valueNow, true);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!--[if gte IE 5.5000]>
|
||||
<script type="text/javascript">
|
||||
|
||||
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
|
||||
{
|
||||
for(var i=0; i<document.images.length; i++)
|
||||
{
|
||||
var img = document.images[i]
|
||||
var imgName = img.src.toUpperCase()
|
||||
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
|
||||
{
|
||||
var imgID = (img.id) ? "id='" + img.id + "' " : ""
|
||||
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
|
||||
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
|
||||
var imgStyle = "display:inline-block;" + img.style.cssText
|
||||
if (img.align == "left") imgStyle = "float:left;" + imgStyle
|
||||
if (img.align == "right") imgStyle = "float:right;" + imgStyle
|
||||
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
|
||||
var strNewHTML = "<span " + imgID + imgClass + imgTitle
|
||||
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
|
||||
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
|
||||
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
|
||||
img.outerHTML = strNewHTML
|
||||
i = i-1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", correctPNG);
|
||||
|
||||
</script>
|
||||
<![endif]-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,215 +0,0 @@
|
|||
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<head>
|
||||
<title>Yahoo! UI Library - Drag and Drop</title>
|
||||
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
||||
</head>
|
||||
|
||||
<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" src="../../build/logger/logger.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../build/dragdrop/dragdrop-debug.js" ></script>
|
||||
<script type="text/javascript" src="js/DDPlayer.js" ></script>
|
||||
<script type="text/javascript">
|
||||
YAHOO.example.DDApp = function() {
|
||||
var slots = [];
|
||||
var players = [];
|
||||
var Event = YAHOO.util.Event;
|
||||
var DDM = YAHOO.util.DDM;
|
||||
return {
|
||||
|
||||
remove: function() {
|
||||
players[4].removeFromGroup("bottomslots");
|
||||
},
|
||||
|
||||
init: function() {
|
||||
|
||||
// slots
|
||||
slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
|
||||
slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
|
||||
slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
|
||||
slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
|
||||
slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
|
||||
slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
|
||||
|
||||
// players
|
||||
players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
|
||||
players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
|
||||
players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
|
||||
players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
|
||||
players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
|
||||
players[4].addToGroup("bottomslots");
|
||||
players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
|
||||
players[5].addToGroup("bottomslots");
|
||||
|
||||
DDM.mode = document.getElementById("ddmode").selectedIndex;
|
||||
}
|
||||
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.addListener(window, "load", YAHOO.example.DDApp.init);
|
||||
//YAHOO.util.Event.addListener("removeButton", "click", YAHOO.example.DDApp.remove);
|
||||
|
||||
</script>
|
||||
<body>
|
||||
<div id="pageTitle"><h3>Drag and Drop - DDProxy</h3></div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* logger default styles */
|
||||
/* font size is controlled here: default 77% */
|
||||
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
||||
/* width is controlled here: default 31em */
|
||||
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
||||
.yui-log p {margin:1px;padding:.1em;}
|
||||
.yui-log button {font-family:monospace;}
|
||||
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
||||
/* height is controlled here: default 20em*/
|
||||
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
||||
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
||||
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
||||
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
||||
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
||||
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
||||
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
||||
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
||||
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
||||
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
||||
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<img id="ylogo" src="img/logo.gif" />
|
||||
|
||||
<div id="container">
|
||||
<div id="containerTop">
|
||||
<div id="header">
|
||||
<h4> </h4>
|
||||
</div>
|
||||
<div id="main">
|
||||
|
||||
<div id="rightbar">
|
||||
|
||||
<div id="rightBarPad">
|
||||
<h3>Examples</h3>
|
||||
|
||||
<div id="linkage">
|
||||
<ul>
|
||||
<li><a href="drag.html?mode=dist">Drag test</a></li>
|
||||
<li><a href="ontop.html?mode=dist">Always on top</a></li>
|
||||
<li><a href="proxy.html?mode=dist">Proxy drag</a> </li>
|
||||
<li><a href="list.html?mode=dist">Sortable list</a> </li>
|
||||
<!--
|
||||
<li><a href="slider.html?mode=dist">Slider</a></li>
|
||||
-->
|
||||
<li><a href="multihandle.html?mode=dist">Multiple handles</a></li>
|
||||
<li><a href="targetable.html?mode=dist">Targetable affordance</a></li>
|
||||
<li><a href="grid.html?mode=dist">Grid</a></li>
|
||||
<li><a href="resize.html?mode=dist">Resize pane</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
YAHOO.example.logApp = function() {
|
||||
return {
|
||||
init: function() {
|
||||
if (YAHOO.widget.Logger) {
|
||||
var reader = new YAHOO.widget.LogReader( "logDiv",
|
||||
{ newestOnTop: true, height: "400px" } );
|
||||
|
||||
reader._onClickPauseBtn(null, reader);
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
} ();
|
||||
|
||||
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</h4>
|
||||
<div id="logDiv"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<form name="dragDropForm" action="javscript:;">
|
||||
<div class="newsItem">
|
||||
<h3>Multiple groups, targetable affordance</h3>
|
||||
<p>
|
||||
Mode:
|
||||
<select id="ddmode" onchange="YAHOO.util.DDM.mode = this.selectedIndex">
|
||||
<option value="0" selected>Point</point>
|
||||
<option value="1">Intersect</point>
|
||||
</select>
|
||||
</p>
|
||||
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
||||
<div id="workArea"> </div>
|
||||
<p>
|
||||
<!--
|
||||
<input id="removeButton" type="button" value="remove" />
|
||||
-->
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="footerContainer">
|
||||
<div id="footer">
|
||||
<p> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
.slot { border:2px solid #aaaaaa; background-color:#dddddd; color:#666666; text-align:center; position: absolute; width:60px; height:60px; }
|
||||
.player { border:2px solid #bbbbbb; color:#eeeeee; text-align:center; position: absolute; width:60px; height:60px; }
|
||||
.target { border:2px solid #574188; background-color:#cccccc; text-align:center; position: absolute; width:60px; height:60px; }
|
||||
|
||||
#t1 { left: 90px; top: 167px; }
|
||||
#t2 { left: 458px; top: 167px; }
|
||||
#b1 { left: 164px; top: 230px; }
|
||||
#b2 { left: 238px; top: 230px; }
|
||||
#b3 { left: 312px; top: 230px; }
|
||||
#b4 { left: 386px; top: 230px; }
|
||||
|
||||
#pt1 { background-color:#7E695E; left: 164px; top: 350px; }
|
||||
#pt2 { background-color:#7E695E; left: 164px; top: 430px; }
|
||||
#pb1 { background-color:#416153; left: 275px; top: 350px; }
|
||||
#pb2 { background-color:#416153; left: 275px; top: 430px; }
|
||||
#pboth1 { background-color:#552E37; left: 386px; top: 350px; }
|
||||
#pboth2 { background-color:#552E37; left: 386px; top: 430px; }
|
||||
</style>
|
||||
|
||||
<div class="slot" id="t1" >1</div>
|
||||
<div class="slot" id="t2" >2</div>
|
||||
<div class="slot" id="b1" >3</div>
|
||||
<div class="slot" id="b2" >4</div>
|
||||
<div class="slot" id="b3" >5</div>
|
||||
<div class="slot" id="b4" >6</div>
|
||||
|
||||
<div class="player" id="pt1" >1</div>
|
||||
<div class="player" id="pt2" >2</div>
|
||||
<div class="player" id="pb1" >3</div>
|
||||
<div class="player" id="pb2" >4</div>
|
||||
<div class="player" id="pboth1" >5</div>
|
||||
<div class="player" id="pboth2" >6</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue