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

upgraded yui to 2.2.2 and yui-ext to 1.0.1a

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

103
www/extras/yui/examples/event/assets/code.css Normal file
View file

@ -0,0 +1,103 @@
/************* CSS for dp.SyntaxHighlighter ***************************/
/* Main style for the table */
.dp-highlighter {
width: 95%;
overflow: auto;
line-height: 100% !important;
margin: 0px 0px 10px 0px;
}
.dp-highlighter table {
width: 100%;
margin: 0px 0px 2px 0px;
border-collapse: collapse;
border-bottom: 2px solid #eee;
background-color:#fff;
}
.dp-highlighter tbody.hide { display: none; }
.dp-highlighter tbody.show { display: table-row-group; _display: block; }
.dp-highlighter td
{
font-family: Courier New;
font-size: 12px;
}
/* Styles for the tools */
.dp-highlighter .tools-corner {
background-color: #eee;
font-size: 9px;
}
.dp-highlighter .tools {
background-color: #eee;
padding: 3px 8px 3px 10px;
border-bottom: 1px solid gray;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
}
.dp-highlighter .tools-corner {
background-color: #eee;
}
.dp-highlighter .tools a {
font-size: 9px;
color: #aaaaaa;
text-decoration: none;
}
.dp-highlighter .tools a:hover {
color: red;
text-decoration: underline;
}
/* Gutter with line number */
.dp-highlighter .gutter {
padding-right: 5px;
padding-left: 10px;
width: 5px;
background-color: #eee;
border-right: 1px solid #cccccc;
color: gray;
text-align: right;
vertical-align: top;
}
/* Single line style */
.dp-highlighter .line1, .line2 {
padding-left: 10px;
/*
border-bottom: 1px solid #F7F7F7;
*/
white-space:nowrap;
}
.dp-highlighter .line2 {
/*
background-color: #F7F7F7;
*/
}
.dp-xml {}
.dp-xml .cdata { color: #ff1493; }
.dp-xml .comments { color: green; }
.dp-xml .tag { color: blue; }
.dp-xml .tag-name { color: black; font-weight: bold; }
.dp-xml .attribute { color: red; }
.dp-xml .attribute-value { color: blue; }
.dp-c {}
.dp-c .comment { color: green; }
.dp-c .string { color: blue; }
.dp-c .preprocessor { color: gray; }
.dp-c .keyword { color: blue; }
.dp-c .vars { color: #d00; }

736
www/extras/yui/examples/event/assets/dpSyntaxHighlighter.js vendored Normal file
View file

@ -0,0 +1,736 @@
/**
* Code Syntax Highlighter.
* Version 1.2.0
* Copyright (C) 2004 Alex Gorbatchev.
* http://www.dreamprojections.com/syntaxhighlighter/
*
* This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General
* Public License as published by the Free Software Foundation; either version 2.1 of the License, or (at your option)
* any later version.
*
* This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*
* You should have received a copy of the GNU Lesser General Public License along with this library; if not, write to
* the Free Software Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*/
//
// create namespaces
//
var dp = {
sh : // dp.sh
{
Utils : {}, // dp.sh.Utils
Brushes : {}, // dp.sh.Brushes
Strings : {}
},
Version : '1.2.0'
};
dp.sh.Strings = {
AboutDialog : '<html><head><title>About...</title></head><body class="dp-about"><table cellspacing="0"><tr><td class="copy"><div class="para title">dp.SyntaxHighlighter</div><div class="para">Version: {V}</div><div class="para"><a href="http://www.dreamprojections.com/sh/?ref=about" target="_blank">http://www.dreamprojections.com/SyntaxHighlighter</a></div>&copy;2004-2005 Alex Gorbatchev. All right reserved.</td></tr><tr><td class="footer"><input type="button" class="close" value="OK" onClick="window.close()"/></td></tr></table></body></html>',
// tools
ExpandCode : '+ expand code',
ViewPlain : 'view plain',
Print : '',
CopyToClipboard : '',
About : '',
CopiedToClipboard : 'The code is in your clipboard now.'
};
dp.SyntaxHighlighter = dp.sh;
//
// Dialog and toolbar functions
//
dp.sh.Utils.Expand = function(sender)
{
var table = sender;
var span = sender;
// find the span in which the text label and pipe contained so we can hide it
while(span != null && span.tagName != 'SPAN')
span = span.parentNode;
// find the table
while(table != null && table.tagName != 'TABLE')
table = table.parentNode;
// remove the 'expand code' button
span.parentNode.removeChild(span);
table.tBodies[0].className = 'show';
table.parentNode.style.height = '100%'; // containing div isn't getting updated properly when the TBODY is shown
}
// opens a new windows and puts the original unformatted source code inside.
dp.sh.Utils.ViewSource = function(sender)
{
var code = sender.parentNode.originalCode;
var wnd = window.open('', '_blank', 'width=750, height=400, location=0, resizable=1, menubar=0, scrollbars=1');
code = code.replace(/</g, '&lt;');
wnd.document.write('<pre>' + code + '</pre>');
wnd.document.close();
}
// copies the original source code in to the clipboard (IE only)
dp.sh.Utils.ToClipboard = function(sender)
{
var code = sender.parentNode.originalCode;
// This works only for IE. There's a way to make it work with Mozilla as well,
// but it requires security settings changed on the client, which isn't by
// default, so 99% of users won't have it working anyways.
if(window.clipboardData)
{
window.clipboardData.setData('text', code);
alert(dp.sh.Strings.CopiedToClipboard);
}
}
// creates an invisible iframe, puts the original source code inside and prints it
dp.sh.Utils.PrintSource = function(sender)
{
var td = sender.parentNode;
var code = td.processedCode;
var iframe = document.createElement('IFRAME');
var doc = null;
var wnd =
// this hides the iframe
iframe.style.cssText = 'position:absolute; width:0px; height:0px; left:-5px; top:-5px;';
td.appendChild(iframe);
doc = iframe.contentWindow.document;
code = code.replace(/</g, '&lt;');
doc.open();
doc.write('<pre>' + code + '</pre>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
td.removeChild(iframe);
}
dp.sh.Utils.About = function()
{
var wnd = window.open('', '_blank', 'dialog,width=320,height=150,scrollbars=0');
var doc = wnd.document;
var styles = document.getElementsByTagName('style');
var links = document.getElementsByTagName('link');
doc.write(dp.sh.Strings.AboutDialog.replace('{V}', dp.sh.Version));
// copy over ALL the styles from the parent page
for(var i = 0; i < styles.length; i++)
doc.write('<style>' + styles[i].innerHTML + '</style>');
for(var i = 0; i < links.length; i++)
if(links[i].rel.toLowerCase() == 'stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="' + links[i].href + '"></link>');
doc.close();
wnd.focus();
}
//
// Match object
//
dp.sh.Match = function(value, index, css)
{
this.value = value;
this.index = index;
this.length = value.length;
this.css = css;
}
//
// Highlighter object
//
dp.sh.Highlighter = function()
{
this.addGutter = true;
this.addControls = true;
this.collapse = false;
this.tabsToSpaces = true;
}
// static callback for the match sorting
dp.sh.Highlighter.SortCallback = function(m1, m2)
{
// sort matches by index first
if(m1.index < m2.index)
return -1;
else if(m1.index > m2.index)
return 1;
else
{
// if index is the same, sort by length
if(m1.length < m2.length)
return -1;
else if(m1.length > m2.length)
return 1;
}
return 0;
}
// gets a list of all matches for a given regular expression
dp.sh.Highlighter.prototype.GetMatches = function(regex, css)
{
var index = 0;
var match = null;
while((match = regex.exec(this.code)) != null)
{
this.matches[this.matches.length] = new dp.sh.Match(match[0], match.index, css);
}
}
dp.sh.Highlighter.prototype.AddBit = function(str, css)
{
var span = document.createElement('span');
str = str.replace(/&/g, '&amp;');
str = str.replace(/ /g, '&nbsp;');
str = str.replace(/</g, '&lt;');
str = str.replace(/\n/gm, '&nbsp;<br>');
// when adding a piece of code, check to see if it has line breaks in it
// and if it does, wrap individual line breaks with span tags
if(css != null)
{
var regex = new RegExp('<br>', 'gi');
if(regex.test(str))
{
var lines = str.split('&nbsp;<br>');
str = '';
for(var i = 0; i < lines.length; i++)
{
span = document.createElement('SPAN');
span.className = css;
span.innerHTML = lines[i];
this.div.appendChild(span);
// don't add a <BR> for the last line
if(i + 1 < lines.length)
this.div.appendChild(document.createElement('BR'));
}
}
else
{
span.className = css;
span.innerHTML = str;
this.div.appendChild(span);
}
}
else
{
span.innerHTML = str;
this.div.appendChild(span);
}
}
// checks if one match is inside any other match
dp.sh.Highlighter.prototype.IsInside = function(match)
{
if(match == null || match.length == 0)
return;
for(var i = 0; i < this.matches.length; i++)
{
var c = this.matches[i];
if(c == null)
continue;
if((match.index > c.index) && (match.index <= c.index + c.length))
return true;
}
return false;
}
dp.sh.Highlighter.prototype.ProcessRegexList = function()
{
for(var i = 0; i < this.regexList.length; i++)
this.GetMatches(this.regexList[i].regex, this.regexList[i].css);
}
dp.sh.Highlighter.prototype.ProcessSmartTabs = function(code)
{
var lines = code.split('\n');
var result = '';
var tabSize = 4;
var tab = '\t';
// This function inserts specified amount of spaces in the string
// where a tab is while removing that given tab.
function InsertSpaces(line, pos, count)
{
var left = line.substr(0, pos);
var right = line.substr(pos + 1, line.length); // pos + 1 will get rid of the tab
var spaces = '';
for(var i = 0; i < count; i++)
spaces += ' ';
return left + spaces + right;
}
// This function process one line for 'smart tabs'
function ProcessLine(line, tabSize)
{
if(line.indexOf(tab) == -1)
return line;
var pos = 0;
while((pos = line.indexOf(tab)) != -1)
{
// This is pretty much all there is to the 'smart tabs' logic.
// Based on the position within the line and size of a tab,
// calculate the amount of spaces we need to insert.
var spaces = tabSize - pos % tabSize;
line = InsertSpaces(line, pos, spaces);
}
return line;
}
// Go through all the lines and do the 'smart tabs' magic.
for(var i = 0; i < lines.length; i++)
result += ProcessLine(lines[i], tabSize) + '\n';
return result;
}
dp.sh.Highlighter.prototype.SwitchToTable = function()
{
// Safari fix: for some reason lowercase <br> isn't getting picked up, even though 'i' is set
var lines = this.div.innerHTML.split(/<BR>/gi);
var row = null;
var cell = null;
var tBody = null;
var html = '';
var pipe = ' | ';
// creates an anchor to a utility
function UtilHref(util, text)
{
return '<a href="#" onclick="dp.sh.Utils.' + util + '(this); return false;">' + text + '</a>';
}
tBody = document.createElement('TBODY'); // can be created and all others go to tBodies collection.
this.table.appendChild(tBody);
if(this.addGutter == true)
{
row = tBody.insertRow(-1);
cell = row.insertCell(-1);
cell.className = 'tools-corner';
}
if(this.addControls == true)
{
var tHead = document.createElement('THEAD'); // controls will be placed in here
this.table.appendChild(tHead);
row = tHead.insertRow(-1);
// add corner if there's a gutter
if(this.addGutter == true)
{
cell = row.insertCell(-1);
cell.className = 'tools-corner';
}
cell = row.insertCell(-1);
// preserve some variables for the controls
cell.originalCode = this.originalCode;
cell.processedCode = this.code;
cell.className = 'tools';
if(this.collapse == true)
{
tBody.className = 'hide';
cell.innerHTML += '<span><b>' + UtilHref('Expand', dp.sh.Strings.ExpandCode) + '</b>' + pipe + '</span>';
}
cell.innerHTML += UtilHref('ViewSource', dp.sh.Strings.ViewPlain) ;
// IE has this clipboard object which is easy enough to use
if(window.clipboardData)
cell.innerHTML += pipe + UtilHref('ToClipboard', dp.sh.Strings.CopyToClipboard);
}
for(var i = 0; i < lines.length - 1; i++)
{
row = tBody.insertRow(-1);
if(this.addGutter == true)
{
cell = row.insertCell(-1);
cell.className = 'gutter';
cell.innerHTML = i + 1;
}
cell = row.insertCell(-1);
cell.className = 'line' + (i % 2 + 1); // uses .line1 and .line2 css styles for alternating lines
cell.innerHTML = lines[i];
}
this.div.innerHTML = '';
}
dp.sh.Highlighter.prototype.Highlight = function(code)
{
function Trim(str)
{
return str.replace(/^\s*(.*?)[\s\n]*$/g, '$1');
}
function Chop(str)
{
return str.replace(/\n*$/, '').replace(/^\n*/, '');
}
function Unindent(str)
{
var lines = str.split('\n');
var indents = new Array();
var regex = new RegExp('^\\s*', 'g');
var min = 1000;
// go through every line and check for common number of indents
for(var i = 0; i < lines.length && min > 0; i++)
{
if(Trim(lines[i]).length == 0)
continue;
var matches = regex.exec(lines[i]);
if(matches != null && matches.length > 0)
min = Math.min(matches[0].length, min);
}
// trim minimum common number of white space from the begining of every line
if(min > 0)
for(var i = 0; i < lines.length; i++)
lines[i] = lines[i].substr(min);
return lines.join('\n');
}
// This function returns a portions of the string from pos1 to pos2 inclusive
function Copy(string, pos1, pos2)
{
return string.substr(pos1, pos2 - pos1);
}
var pos = 0;
this.originalCode = code;
this.code = Chop(Unindent(code));
this.div = document.createElement('DIV');
this.table = document.createElement('TABLE');
this.matches = new Array();
if(this.CssClass != null)
this.table.className = this.CssClass;
// replace tabs with spaces
if(this.tabsToSpaces == true)
this.code = this.ProcessSmartTabs(this.code);
this.table.border = 0;
this.table.cellSpacing = 0;
this.table.cellPadding = 0;
this.ProcessRegexList();
// if no matches found, add entire code as plain text
if(this.matches.length == 0)
{
this.AddBit(this.code, null);
this.SwitchToTable();
return;
}
// sort the matches
this.matches = this.matches.sort(dp.sh.Highlighter.SortCallback);
// The following loop checks to see if any of the matches are inside
// of other matches. This process would get rid of highligting strings
// inside comments, keywords inside strings and so on.
for(var i = 0; i < this.matches.length; i++)
if(this.IsInside(this.matches[i]))
this.matches[i] = null;
// Finally, go through the final list of matches and pull the all
// together adding everything in between that isn't a match.
for(var i = 0; i < this.matches.length; i++)
{
var match = this.matches[i];
if(match == null || match.length == 0)
continue;
this.AddBit(Copy(this.code, pos, match.index), null);
this.AddBit(match.value, match.css);
pos = match.index + match.length;
}
this.AddBit(this.code.substr(pos), null);
this.SwitchToTable();
}
dp.sh.Highlighter.prototype.GetKeywords = function(str)
{
return '\\b' + str.replace(/ /g, '\\b|\\b') + '\\b';
}
// highlightes all elements identified by name and gets source code from specified property
dp.sh.HighlightAll = function(name, showGutter /* optional */, showControls /* optional */, collapseAll /* optional */)
{
function FindValue()
{
var a = arguments;
for(var i = 0; i < a.length; i++)
{
if(a[i] == null)
continue;
if(typeof(a[i]) == 'string' && a[i] != '')
return a[i] + '';
if(typeof(a[i]) == 'object' && a[i].value != '')
return a[i].value + '';
}
return null;
}
function IsOptionSet(value, list)
{
for(var i = 0; i < list.length; i++)
if(list[i] == value)
return true;
return false;
}
var elements = document.getElementsByName(name);
var highlighter = null;
var registered = new Object();
var propertyName = 'value';
// if no code blocks found, leave
if(elements == null)
return;
// register all brushes
for(var brush in dp.sh.Brushes)
{
var aliases = dp.sh.Brushes[brush].Aliases;
if(aliases == null)
continue;
for(var i = 0; i < aliases.length; i++)
registered[aliases[i]] = brush;
}
for(var i = 0; i < elements.length; i++)
{
var element = elements[i];
var options = FindValue(
element.attributes['class'], element.className,
element.attributes['language'], element.language
);
var language = '';
if(options == null)
continue;
options = options.split(':');
language = options[0].toLowerCase();
if(registered[language] == null)
continue;
// instantiate a brush
highlighter = new dp.sh.Brushes[registered[language]]();
// hide the original element
element.style.display = 'none';
highlighter.addGutter = (showGutter == null) ? !IsOptionSet('nogutter', options) : showGutter;
highlighter.addControls = (showControls == null) ? !IsOptionSet('nocontrols', options) : showControls;
highlighter.collapse = (collapseAll == null) ? IsOptionSet('collapse', options) : collapseAll;
highlighter.Highlight(element[propertyName]);
// place the result table inside a div
var div = document.createElement('DIV');
div.className = 'dp-highlighter';
div.appendChild(highlighter.table);
element.parentNode.insertBefore(div, element);
}
}
dp.sh.Brushes.JScript = function()
{
var keywords = 'abstract boolean break byte case catch char class const continue debugger ' +
'default delete do double else enum export extends false final finally float ' +
'for function goto if implements import in instanceof int interface long native ' +
'new null package private protected public return short static super switch ' +
'synchronized this throw throws transient true try typeof var void volatile while with';
this.regexList = [
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.JScript.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.JScript.Aliases = ['js', 'jscript', 'javascript'];
dp.sh.Brushes.Php = function()
{
var keywords = 'and or xor __FILE__ __LINE__ array as break case ' +
'cfunction class const continue declare default die do echo else ' +
'elseif empty enddeclare endfor endforeach endif endswitch endwhile eval exit ' +
'extends for foreach function global if include include_once isset list ' +
'new old_function print require require_once return static switch unset use ' +
'var while __FUNCTION__ __CLASS__';
this.regexList = [
{ regex: new RegExp('//.*$', 'gm'), css: 'comment' }, // one line comments
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
{ regex: new RegExp('\\$\\w+', 'g'), css: 'vars' }, // variables
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keyword
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.Php.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.Php.Aliases = ['php'];
dp.sh.Brushes.Xml = function()
{
this.CssClass = 'dp-xml';
}
dp.sh.Brushes.Xml.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.Xml.Aliases = ['xml', 'xhtml', 'xslt', 'html', 'xhtml'];
dp.sh.Brushes.Xml.prototype.ProcessRegexList = function()
{
function push(array, value)
{
array[array.length] = value;
}
/* If only there was a way to get index of a group within a match, the whole XML
could be matched with the expression looking something like that:
(<!\[CDATA\[\s*.*\s*\]\]>)
| (<!--\s*.*\s*?-->)
| (<)*(\w+)*\s*(\w+)\s*=\s*(".*?"|'.*?'|\w+)(/*>)*
| (</?)(.*?)(/?>)
*/
var index = 0;
var match = null;
var regex = null;
// Match CDATA in the following format <![ ... [ ... ]]>
// <\!\[[\w\s]*?\[(.|\s)*?\]\]>
this.GetMatches(new RegExp('<\\!\\[[\\w\\s]*?\\[(.|\\s)*?\\]\\]>', 'gm'), 'cdata');
// Match comments
// <!--\s*.*\s*?-->
this.GetMatches(new RegExp('<!--\\s*.*\\s*?-->', 'gm'), 'comments');
// Match attributes and their values
// (\w+)\s*=\s*(".*?"|\'.*?\'|\w+)*
regex = new RegExp('([\\w-\.]+)\\s*=\\s*(".*?"|\'.*?\'|\\w+)*', 'gm');
while((match = regex.exec(this.code)) != null)
{
push(this.matches, new dp.sh.Match(match[1], match.index, 'attribute'));
// if xml is invalid and attribute has no property value, ignore it
if(match[2] != undefined)
{
push(this.matches, new dp.sh.Match(match[2], match.index + match[0].indexOf(match[2]), 'attribute-value'));
}
}
// Match opening and closing tag brackets
// </*\?*(?!\!)|/*\?*>
this.GetMatches(new RegExp('</*\\?*(?!\\!)|/*\\?*>', 'gm'), 'tag');
// Match tag names
// </*\?*\s*(\w+)
regex = new RegExp('</*\\?*\\s*([\\w-\.]+)', 'gm');
while((match = regex.exec(this.code)) != null)
{
push(this.matches, new dp.sh.Match(match[1], match.index + match[0].indexOf(match[1]), 'tag-name'));
}
}
dp.sh.Brushes.CSS = function()
{
var keywords = 'link over active visited';
this.regexList = [
{ regex: new RegExp('/\\*[\\s\\S]*?\\*/', 'g'), css: 'comment' }, // multiline comments
{ regex: new RegExp('"(?:[^"\n]|[\"])*"', 'g'), css: 'string' }, // double quoted strings
{ regex: new RegExp("'(?:[^'\n]|[\'])*'", 'g'), css: 'string' }, // single quoted strings
{ regex: new RegExp('^\\s*#.*', 'gm'), css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.GetKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.CssClass = 'dp-c';
}
dp.sh.Brushes.CSS.prototype = new dp.sh.Highlighter();
dp.sh.Brushes.CSS.Aliases = ['css'];

BIN
www/extras/yui/examples/event/assets/eventdelegation.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
www/extras/yui/examples/event/assets/logo.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 705 B

112
www/extras/yui/examples/event/assets/screen.css Normal file
View file

@ -0,0 +1,112 @@
html, body { padding: 0px 0px 10px 0px; border: 0; margin: 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: #4d77c3; }
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:10px;left:90px; }
#pageTitle H3 { font-size:14pt; color:#666666 }
#header h1 { float:left; margin-top: 19px; margin-left: 50px; }
#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: 500px; 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;
}
.ylogo { position:absolute;top:5px;left:5px }

236
www/extras/yui/examples/event/custom-event.html Normal file
View file

@ -0,0 +1,236 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="assets/dpSyntaxHighlighter.js"></script>
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="assets/code.css">
<style type="text/css">
#intro {padding:10px; background-color:#EEEEEE; font-style:italic; font-size:92%;}
#container {width:400px; height:100px; padding:10px; border:1px dotted black;background-color:#CCCCCC;}
#resizer {width:200px; height:75px; background-color:#00CCFF;}
#subscriberWidth {width:200px; height:75px; margin-top:10px;background-color:#CC9966;}
#subscriberHeight {width:200px; height:75px; margin-top:10px;background-color:#FF3333;}
</style>
<script>
(function() {
//create a new custom event, to be fired
//when the resizer div's size is changed
var onSizeChange = new YAHOO.util.CustomEvent("onSizeChange");
//get local references to dom elements,
//for convenience
var container = YAHOO.util.Dom.get("container");
var resizer = YAHOO.util.Dom.get("resizer");
//when the container is clicked on, change the
//dimensions of the resizer -- as long as it appears
//to be a valid new size (>0 width, >12 height).
function fnClick(e){
//0,0 point is the top left corner of the container,
//minus its padding:
var containerX = YAHOO.util.Dom.getX("container");
var containerY = YAHOO.util.Dom.getY("container");
var clickX = YAHOO.util.Event.getPageX(e);
var clickY = YAHOO.util.Event.getPageY(e);
//get container padding using Dom's getStyle():
var containerPaddingX = parseInt(YAHOO.util.Dom.getStyle("container","padding-left"), 10);
var containerPaddingY = parseInt(YAHOO.util.Dom.getStyle("container","padding-top"), 10);
var newWidth = clickX - containerX - containerPaddingX;
var newHeight = clickY - containerY - containerPaddingY;
//if there is a valid new dimension, we'll change
//resizer and fire our custom event
if ((newWidth > 0)||(newHeight > 12)) {
//correct new height/width to guarantee
//minimum of 0x12
if (newWidth < 0) {newWidth = 1;}
if (newHeight < 12) {newHeight = 12;}
//show new dimensions in resizer:
YAHOO.util.Dom.get("resizer").innerHTML = "New size: " + newWidth + "x" + newHeight;
//change the dimensions of resizer, using
//Dom's setStyle:
YAHOO.util.Dom.setStyle("resizer", "width", newWidth + "px");
YAHOO.util.Dom.setStyle("resizer", "height", newHeight + "px");
//fire the custom event, passing
//the new dimensions in as an argument;
//our subscribers will be able to use this
//information:
onSizeChange.fire({width: newWidth, height: newHeight});
};
}
//listen for clicks on the container
YAHOO.util.Event.addListener("container", 'click', fnClick);
//a handler to respond to the custom event that
//we're firing when the resizer changes size; we'll
//resize its width to match the resizer.
fnSubscriberWidth = function(type, args) {
var elWidth = YAHOO.util.Dom.get("subscriberWidth");
var newWidth = args[0].width;
YAHOO.util.Dom.setStyle(elWidth, "width", (newWidth + "px"));
elWidth.innerHTML = ("My new width: " + newWidth + "px");
}
//another handler to respond to the custom event that
//we're firing when the resizer changes size; this
//one cares about the height of the resizer.
fnSubscriberHeight = function(type, args) {
var elHeight = YAHOO.util.Dom.get("subscriberHeight");
var newHeight = args[0].height;
YAHOO.util.Dom.setStyle(elHeight, "height", (newHeight + "px"));
elHeight.innerHTML = ("My new height: " + newHeight + "px");
}
//all that remains is to subscribe our
//handlers to the <code>onSizeChange</code> custom event:
onSizeChange.subscribe(fnSubscriberWidth);
onSizeChange.subscribe(fnSubscriberHeight);
})();
</script>
<title>Publishing and Subscribing to Custom Events</title>
</head>
<body>
<h1>Publishing and Subscribing to Custom Events</h1>
<p id="intro">Clicking in the grey box resizes the blue &lt;div&gt; within it. A Custom Event is fired which publishes the blue box's new size. One subscriber to that Custom Event looks at the new width and resizes the brown box to match. A second subscriber looks at the blue &lt;div&gt;'s new height and resizes the red box to match. </p>
<div id="container">
<div id="resizer">
Click anywhere within the grey box
to resize me.
</div>
</div>
<div id="subscriberWidth">
<strong>Width will resize to match blue
box.</strong>
</div>
<div id="subscriberHeight">
<strong>Height will resize to match blue
box.</strong>
</div>
<p>Custom Events, part of the YUI Event Utility, are special developer-created events that express the occurance of and information about interesting moments taking place on a page. Custom Events can be subscribed to by any script on the page; the publisher of the Custom Event knows nothing about the subscribers, and individual subscribers don't need to know anything about each other.</p>
<p>To illustrate the use of Custom Event, we'll create a single &lt;div&gt; called &quot;resizer&quot; that resizes itself when its container is clicked. When we resize this &lt;div&gt; we'll publish a Custom Event, <code>onSizeChange</code>, that reports the new height and width of our resizer. We will have two modules that subscribe to this information; the first will respond by changing its height to remain the same as the resizer's height and the second will change its width. </p>
<p>Start with some simple CSS rules and markup for the appearing elements:</p>
<pre><textarea name="code" class="HTML" cols="60" rows="1"><style type="text/css">
#container {width:400px; height:100px; padding:10px; border:1px dotted black;background-color:#CCCCCC;}
#resizer {width:200px; height:75px; background-color:#00CCFF;}
#subscriberWidth {width:200px; height:75px; margin-top:10px;background-color:#CC9966;}
#subscriberHeight {width:200px; height:75px; margin-top:10px;background-color:#FF3333;}
</style>
<div id="container">
<div id="resizer">
Click anywhere within the grey box
to resize me.
</div>
</div>
<div id="subscriberWidth">
<strong>Width will resize to match blue
box.</strong>
</div>
<div id="subscriberHeight">
<strong>Height will resize to match blue
box.</strong>
</div></textarea>
</pre>
<p>Next, we'll compose our script. We begin by creating our Custom Event instance. We'll &quot;fire&quot; this Custom Event &mdash; that is, call its <code>fire</code> method &mdash; when our click handler executes and changes the resizer's width.</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//create a new custom event, to be fired
//when the resizer div's size is changed
var onSizeChange = new YAHOO.util.CustomEvent("onSizeChange");</textarea>
</pre>
<p>Our click handler, to be fired when the grey container &lt;div&gt; is clicked on, performs a number of housekeeping tasks like figuring out the new size of the resizer element, making sure that a minimum size is maintained, etc. Note that it only fires the Custom Event if the click will result in a sane value for the resizer's height or width. Line 35 below is where we ultimately fire the Custom Event. We pass in the new height and width of the resizer as an argument when we fire the Custom Event because we want our subscribers to have access to that information.</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"> //when the container is clicked on, change the
//dimensions of the resizer -- as long as it appears
//to be a valid new size (>0 width, >12 height).
function fnClick(e){
//0,0 point is the top left corner of the container,
//minus its padding:
var containerX = YAHOO.util.Dom.getX("container");
var containerY = YAHOO.util.Dom.getY("container");
var clickX = YAHOO.util.Event.getPageX(e);
var clickY = YAHOO.util.Event.getPageY(e);
//get container padding using Dom's getStyle():
var containerPaddingX = parseInt(YAHOO.util.Dom.getStyle("container","padding-left"), 10);
var containerPaddingY = parseInt(YAHOO.util.Dom.getStyle("container","padding-top"), 10);
var newWidth = clickX - containerX - containerPaddingX;
var newHeight = clickY - containerY - containerPaddingY;
//if there is a valid new dimension, we'll change
//resizer and fire our custom event
if ((newWidth > 0)||(newHeight > 12)) {
//correct new height/width to guarantee
//minimum of 0x12
if (newWidth < 0) {newWidth = 1;}
if (newHeight < 12) {newHeight = 12;}
//show new dimensions in resizer:
YAHOO.util.Dom.get("resizer").innerHTML = "New size: " + newWidth + "x" + newHeight;
//change the dimensions of resizer, using
//Dom's setStyle:
YAHOO.util.Dom.setStyle("resizer", "width", newWidth + "px");
YAHOO.util.Dom.setStyle("resizer", "height", newHeight + "px");
//fire the custom event, passing
//the new dimensions in as an argument;
//our subscribers will be able to use this
//information:
onSizeChange.fire({width: newWidth, height: newHeight});
};
}</textarea>
</pre>
<p>We now have a Custom Event and we're firing it at the right time, passing in the relevant data payload. The next step is to create a functions that to respond and react to this change. We've specified that we'll have one function that will pay attention to <code>onSizeChange</code>, get its width, and change the width of the brown box to match; another function will do the same for the red box's height. Note that the argument we passed in when we fired the custom event (an object literal: <code>{width: x, height: y}</code>) is available to us in the second argument our handlers receive. That argument is an array, and our object is the first item in the array.</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"> //a handler to respond to the custom event that
//we're firing when the resizer changes size; we'll
//resize its width to match the resizer.
fnSubscriberWidth = function(type, args) {
var elWidth = YAHOO.util.Dom.get("subscriberWidth");
var newWidth = args[0].width;
YAHOO.util.Dom.setStyle(elWidth, "width", (newWidth + "px"));
elWidth.innerHTML = ("My new width: " + newWidth + "px");
}
//another handler to respond to the custom event that
//we're firing when the resizer changes size; this
//one cares about the height of the resizer.
fnSubscriberHeight = function(type, args) {
var elHeight = YAHOO.util.Dom.get("subscriberHeight");
var newHeight = args[0].height;
YAHOO.util.Dom.setStyle(elHeight, "height", (newHeight + "px"));
elHeight.innerHTML = ("My new height: " + newHeight + "px");
}</textarea></pre>
<p>The final step in this example is to <em>subscribe</em> our Custom Event handlers to the <code>onSizeChange</code> Custom Event we created in the first script step. We do this by calling <code>onSizeChange</code>'s subscribe method and passing in the functions we want to subscribe:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">
onSizeChange.subscribe(fnSubscriberWidth);
onSizeChange.subscribe(fnSubscriberHeight);
</textarea></pre>
<p>This is a simple example of how to use Custom Events. One of the powerful things about this concept is how far it can extend &mdash; we only have two subscribers in this example, but we could have from zero to <em>n</em> subscribers. Custom Events give you granular control over scope and firing order and are an excellent way to provide inter-module messaging within your application.</p>
<!--apply syntax highlighting-->
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!--end syntax highlighting-->
</p>
</body>
</html>

168
www/extras/yui/examples/event/event-delegation.html Normal file
View file

@ -0,0 +1,168 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="assets/dpSyntaxHighlighter.js"></script>
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="assets/code.css">
<style type="text/css">
#intro {padding:10px; background-color:#EEEEEE; font-style:italic; font-size:92%;}
#container {width:400px; padding:10px; border:1px dotted black;background-color:#CCCCCC;}
</style>
<script>
(function() {
//create log reader instance on pageload
function loggerInit() {
var myLogReader = new YAHOO.widget.LogReader();
}
//on is an alias for addListener
YAHOO.util.Event.on(window, "load", loggerInit);
function clickHandler(e) {
//get the resolved (non-text node) target:
var elTarget = YAHOO.util.Event.getTarget(e);
//walk up the DOM tree looking for an <li>
//in the target's ancestry; desist when you
//reach the container div
while (elTarget.id != "container") {
//are you an li?
if(elTarget.nodeName.toUpperCase() == "LI") {
//yes, an li: so write out a message to the log
YAHOO.log("The clicked li had an id of " + elTarget.id, "info", "clickExample");
//and then stop looking:
break;
} else {
//wasn't the container, but wasn't an li; so
//let's step up the DOM and keep looking:
elTarget = elTarget.parentNode;
}
}
}
//attach clickHandler as a listener for any click on
//the container div:
YAHOO.util.Event.on("container", "click", clickHandler);
function mouseHandler(e) {
var elTarget = YAHOO.util.Event.getTarget(e);
while (elTarget.id != "container") {
if(elTarget.nodeName.toUpperCase() == "LI") {
YAHOO.log("The li that was mousedover had an id of " + elTarget.id, "info", "mouseExample");
break;
} else {
elTarget = elTarget.parentNode;
}
}
}
YAHOO.util.Event.on("container", "mouseover", mouseHandler);
})();
</script>
<title>Event Delegation Example</title>
</head>
<body>
<h1>Event Delegation Example</h1>
<p id="intro">Mousing over or clicking the list items in the list below will report their ID attributes in the Logger window on the right side of the screen. Only one event listener is needed for each type of event (click and mouseover) to handle the event response for <em>n</em> list items &mdash; a technique known as <em>event delegation</em>.</p>
<div id="container">
<ul id="list">
<li id="li-1">List Item 1</li>
<li id="li-2">List Item 2</li>
<li id="li-3">List Item 3</li>
<li id="li-4">List Item 4</li>
<li id="li-5">List Item 5</li>
<li id="li-6">List Item 6</li>
</ul>
</div>
<p>Event delegation refers to the use of a single event listener on a parent object to listen for events happening on its children (or deeper descendants). Event delegation allows developers to be sparse in their application of event listeners while still reacting to events as they happen on highly specific targets. This proves to be a key strategy for maintaining high performance in event-rich web projects, where the creation of hundreds of event listeners can quickly degrade performance.</p>
<p>This example illustrates the use of event delegation on both click and mouseover events. The problem we will solve here involves reacting to click and mouseover events on list items. We will assume that there can be many list items and that we want to be frugal in applying event listeners. At the same time, we want to know exactly which &lt;li&gt; was involved in a click or mouseover event.</p>
<p>To do this, we'll rely on DOM event bubbling &mdash; the process by which an event progresses from its direct target up through the target's node ancestry until it reaches the <code>window</code> object. The graphick below may help to illustrate the flow: In this case, we'll count on the fact that a click or a mouseover on (A) the text node <em>within</em> an &lt;li&gt; progresses to the &lt;li&gt; element itself (B), then to the &lt;ul&gt; element (C), and then to the list's parent &lt;div&gt; (D) and so on up the document:</p>
<p><img src="assets/eventdelegation.gif"></p>
<p>Because events flow this way, we can count on events happening to our &lt;li&gt;s bubbling up to our &lt;div&gt; whose ID attribute is &quot;container.&quot;</p>
<p>We'll start with some structural markup &mdash; a &lt;div&gt; containing a &lt;ul&gt; with 6 &lt;li&gt; children. Note that our list items have ID attributes &mdash; this gives us a way to uniquely identify them when we process clicks and mouseovers at the container level. </p>
<pre><textarea name="code" class="HTML" cols="60" rows="1"><div id="container">
<ul id="list">
<li id="li-1">List Item 1</li>
<li id="li-2">List Item 2</li>
<li id="li-3">List Item 3</li>
<li id="li-4">List Item 4</li>
<li id="li-5">List Item 5</li>
<li id="li-6">List Item 6</li>
</ul>
</div></textarea></pre>
<p>We'll use the <a href="http://developer.yahoo.com/yui/logger/">YUI Logger Control</a> as the reporting mechanism for our event handlers, so this example begins its script by creating a LogReader instance and rendering it into the document body on pageload:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//create log reader instance on pageload
function loggerInit() {
var myLogReader = new YAHOO.widget.LogReader();
}
//on is an alias for addListener
YAHOO.util.Event.on(window, "load", loggerInit);</textarea></pre>
<p>Now we'll add an event handler to the container &lt;div&gt;, listening for any clicks in its bounds. We're only really interested in clicks on &lt;li&gt;s, though; when we get one of those, we'll write out a message to the Logger.</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">function clickHandler(e) {
//get the resolved (non-text node) target:
var elTarget = YAHOO.util.Event.getTarget(e);
//walk up the DOM tree looking for an <li>
//in the target's ancestry; desist when you
//reach the container div
while (elTarget.id != "container") {
//are you an li?
if(elTarget.nodeName.toUpperCase() == "LI") {
//yes, an li: so write out a message to the log
YAHOO.log("The clicked li had an id of " + elTarget.id, "info", "clickExample");
//and then stop looking:
break;
} else {
//wasn't the container, but wasn't an li; so
//let's step up the DOM and keep looking:
elTarget = elTarget.parentNode;
}
}
}
//attach clickHandler as a listener for any click on
//the container div:
YAHOO.util.Event.on("container", "click", clickHandler);</textarea></pre>
<p>The same technique works for the mousemove event as well. We'll substitute mousemove for click, but make no other substantive changes:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">function mouseHandler(e) {
var elTarget = YAHOO.util.Event.getTarget(e);
while (elTarget.id != "container") {
if(elTarget.nodeName.toUpperCase() == "LI") {
YAHOO.log("The li that was mousedover had an id of " + elTarget.id, "info", "mouseExample");
break;
} else {
elTarget = elTarget.parentNode;
}
}
}
YAHOO.util.Event.on("container", "mouseover", mouseHandler);</textarea></pre>
<p>In this example, we've used two event listeners with their associated memory and performance load to serve as delegates for the same two events on six list items. Instead of 12 event listeners, we now have two. And the code works regardless of the number of li's used &mdash; if the list was 100 items long, we'd be saving ourselves 198 event listeners, which is enough to make a noticable difference in how your page responds. In a complicated page context, it's easy to see how this technique can dramatically reduce the number of event listeners required and thereby improve the performance of your application.
<!--apply syntax highlighting-->
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!--end syntax highlighting-->
</p>
</body>
</html>

32
www/extras/yui/examples/event/index.html Normal file
View file

@ -0,0 +1,32 @@
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Event Utility</title>
<link rel="stylesheet" type="text/css" href="assets/screen.css">
</head>
<body style="height:100%">
<img src="assets/logo.gif" style="position:absolute;top:5px;left:5px" />
<div id="pageTitle">
<h3>Event Utility</h3>
</div>
<div id="content">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="simple.html">Simple DOM Event Handling</a></p>
<p><a href="event-delegation.html">Event Delegation</a></p>
<p><a href="custom-event.html">Using Custom Events</a></p>
<p>&nbsp;</p>
</div>
<div id="footerContainer">
<div id="footer">
<p>&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

123
www/extras/yui/examples/event/simple.html Normal file
View file

@ -0,0 +1,123 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="assets/dpSyntaxHighlighter.js"></script>
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/logger.css">
<link rel="stylesheet" type="text/css" href="assets/code.css">
<style type="text/css">
#intro {padding:10px; background-color:#EEEEEE; font-style:italic; font-size:92%;}
#container {width:400px; height:65px; padding:10px; border:1px dotted black;background-color:#CCCCCC;}
</style>
<script>
(function() {
//A function that pops up a "Hello World" alert:
var helloWorld = function(e) {
alert("Hello World!");
}
//subscribe the helloWorld function as an event
//handler for the click event on the container
//div:
YAHOO.util.Event.addListener("container", "click", helloWorld);
//A function that pops up an alert and
//prevents the default behavior of the event
//for which it is a handler:
var interceptLink = function(e) {
YAHOO.util.Event.preventDefault(e);
alert("You clicked on the second YUI link.");
}
//subscribe our interceptLink function
//as a click handler for the second anchor
//element:
YAHOO.util.Event.addListener("secondA", "click", interceptLink);
})();
</script>
<title>Simple Event Handling</title>
</head>
<body>
<h1>Simple Event Handling</h1>
<p id="intro">Clicking in the grey box will pop up a "Hello World!" alert window. Clicking on the first link will take you to the YUI website; clicking on the second link, which has the same href attribute, will pop up an alert instead and not navigate to a new page.</p>
<div id="container">
<p>Click for Hello World alert.</p>
</div>
<p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
<p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>
<p>The YUI Event Utility is a simple, powerful resource for creating event-driven applications in the browser. In this very simple example, we'll look at how to use Event Utility to listen for a specific event on a specific element. We'll also look at how Event Utility can be used within an event handler to provide additional control.</p>
<p>To illustrate event handling syntax, we'll create a &lt;div&gt; and pop up an alert message when that div is clicked on. Begin with the style and markup necessary to make your element visible:</p>
<pre><textarea name="code" class="HTML" cols="60" rows="1"><style type="text/css">
#intro {padding:10px; background-color:#EEEEEE; font-style:italic; font-size:92%;}
#container {width:400px; height:65px; padding:10px; border:1px dotted black;background-color:#CCCCCC;}
</style>
<div id="container">
<p>Click for Hello World alert.</p>
</div></textarea>
</pre>
<p>Next, create a function that receives a single argument &mdash; the event object &mdash; and pops up an alert which says "Hello World!":</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//A function that pops up a "Hello World" alert:
var helloWorld = function(e) {
alert("Hello World!");
}</textarea>
</pre>
<p>With our markup on the page and a function that we want to execute when our element is clicked on, we now use Event Utility's <code>addListener</code> method to attach our <code>helloWorld</code> function as a handler for the click event on the element whose HTML ID is "container":</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">YAHOO.util.Event.addListener("container", "click", helloWorld);
</textarea>
</pre>
<p>Almost all event handling begins with a premise just this simple: We have an element ("container") to which something might happen (eg, it might be clicked) and, when that <em>does</em> happen, we want to do something (eg, <code>helloWorld</code>).</p>
<p>In some cases, you may want to use some of Event Utility's powerful browser abstraction methods to help you handle your interaction flow during an event. For example, lets say you have two links on the page:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1"> <p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
<p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p></textarea>
</pre>
<p>Imagine that when the second link is clicked you want to pop up an alert window and then prevent the browser from navigating to the page designated in the href attribute. The event object has a <code>preventDefault</code> mechanism, but that mechanism was not successfully implemented across all A-Grade browsers until quite recently. So, instead of using the built-in version of <code>preventDefault</code>, we can use Event Utility's method which features normalized support for a greater number of browsers:</p>
<pre><textarea name="code" class="JScript" cols="60" rows="1">//A function that pops up an alert and
//prevents the default behavior of the event
//for which it is a handler:
var interceptLink = function(e) {
YAHOO.util.Event.preventDefault(e);
alert("You clicked on the second YUI link.");
}
//subscribe our interceptLink function
//as a click handler for the second anchor
//element:
YAHOO.util.Event.addListener("secondA", "click", interceptLink);</textarea>
</pre>
<p>In line 5 above, we take the event object, passed into us by the Event Utility when the handler is called, and we apply the Event Utility's <code>preventDefault</code> method to it. We can use a similar pattern for all of Event Utility's helper methods (<code>stopEvent</code>, <code>stopPropagation</code>, etc.).</p>
<!--apply syntax highlighting-->
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!--end syntax highlighting-->
</p>
</body>
</html>