[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[Phpgroupware-cvs] phpgwapi/js/yahoo/yui/examples animation/anim_b...
|
From: |
Dave Hall |
|
Subject: |
[Phpgroupware-cvs] phpgwapi/js/yahoo/yui/examples animation/anim_b... |
|
Date: |
Mon, 25 Sep 2006 10:27:20 +0000 |
CVSROOT: /cvsroot/phpgwapi
Module name: phpgwapi
Changes by: Dave Hall <skwashd> 06/09/25 10:27:18
Added files:
js/yahoo/yui/examples/animation: anim_basic.html anim_from.html
anim_size.html
anim_size_plus.html
anim_size_plus_alt.html
anim_units.html colors.html
easing.html fade.html
index.html motion_basic.html
motion_by.html
motion_control.html
motion_controls.html
motion_plus.html scroll_by.html
scroll_horiz.html
scroll_vert.html
js/yahoo/yui/examples/animation/css: demo.css
js/yahoo/yui/examples/animation/img: logo.gif
js/yahoo/yui/examples/autocomplete: customize.html
flickr_xml.html index.html
states_jsarray.html
states_jsfunction.html
ysearch_flat.html
ysearch_json.html
ysearch_xml.html
js/yahoo/yui/examples/autocomplete/css: examples.css
js/yahoo/yui/examples/autocomplete/img: logo.gif
js/yahoo/yui/examples/calendar: index.html
js/yahoo/yui/examples/calendar/css: examples.css
js/yahoo/yui/examples/calendar/img: logo.gif pdate.gif
js/yahoo/yui/examples/connection: abort.html get.html index.html
post.html weather.html
js/yahoo/yui/examples/container: dialog.html index.html
keylistener.html module.html
overlay-manager.html
overlay.html panel-aqua.html
panel-photo.html
panel-wait.html panel-xp.html
panel.html
simpledialog-async.html
simpledialog.html tooltip.html
js/yahoo/yui/examples/container/css: example.css module.css
panel-aqua.css panel-xp.css
photobox.css
js/yahoo/yui/examples/container/img: aqua-bg.gif aqua-hd-bg.gif
aqua-hd-close-over.gif
aqua-hd-close.gif
aqua-hd-lt.gif
aqua-hd-rt.gif bg.png
ctx.gif xp-bl.gif
xp-border-rt.gif xp-br.gif
xp-brdr-lt.gif
xp-brdr-rt.gif xp-close.gif
xp-ft.gif xp-hd.gif
xp-tl.gif xp-tr.gif
ybox-back.gif
ybox-close.gif
ybox-next.gif
js/yahoo/yui/examples/dom: addclass.html
getelementsbyclassname.html
getstyle.html getxy.html
hasclass.html index.html
removeclass.html setstyle.html
setxy.html
js/yahoo/yui/examples/dom/css: dom.css
js/yahoo/yui/examples/dom/img: logo.gif
js/yahoo/yui/examples/dragdrop: drag.html grid.html index.html
interface.html list.html
multihandle.html ontop.html
proxy.html resize.html
slider.html targetable.html
js/yahoo/yui/examples/dragdrop/css: ie.css screen.css
js/yahoo/yui/examples/dragdrop/img: bullet.gif channel.png
grid.png hline.png
horizBg.png horizSlider.png
horizSlider_on.png hue.png
logo.gif lthumb.png
navHover2.png pickerbg.png
qbottom.png qmiddle.png
qtop.png select.gif
select.png sortList.png
sq1.png sq2.png sq3.png
vertBg.png vertSlider.png
vertSlider_on.png vline.png
js/yahoo/yui/examples/fonts: default.html fontfamily.html
fontsize.html
js/yahoo/yui/examples/grids: example_t1.html example_t2-g1.html
example_t2-g10.html
example_t2-g2.html
example_t2-g3.html
example_t2-g4.html
example_t2-g5.html
example_t2-g6.html
example_t2-g7.html
example_t2-g8.html
example_t2-g9.html example_t2.html
example_t3.html example_t4.html
example_t5.html example_t6.html
example_t7.html
js/yahoo/yui/examples/logger: autocomplete.html index.html
readlogs.html readlogscustom.html
writelogs.html
js/yahoo/yui/examples/logger/css: examples.css
js/yahoo/yui/examples/logger/img: logo.gif
js/yahoo/yui/examples/menu: applicationmenubar.html
contextmenu.html example01.html
example02.html example03.html
example04.html example05.html
example06.html example07.html
example08.html example09.html
example10.html example11.html
example12.html index.html
leftnav.html programsmenu.html
topnav.html
js/yahoo/yui/examples/menu/img: dolly.jpg
js/yahoo/yui/examples/slider: basic.html index.html rgb.html
rgb2.html
js/yahoo/yui/examples/slider/css: screen.css
js/yahoo/yui/examples/slider/img: bullet.gif greybg.png
header.gif hline.png
horizBg.png horizSlider.png
horizSlider_on.png hue.png
logo.gif lthumb.png
navHover2.png pickerbg.png
qbottom.png qmiddle.png
qtop.png select.gif select.png
vertBg.png vertSlider.png
vertSlider_on.png vline.png
js/yahoo/yui/examples/treeview: anim.html check.html
default.html dynamic.html
folders.html html.html
index.html menu.html multi.html
js/yahoo/yui/examples/treeview/css: code.css screen.css
js/yahoo/yui/examples/treeview/img: bullet.gif greybg.png
header.gif logo.gif
navHover2.png qbottom.png
qmiddle.png qtop.png
Log message:
adding examples and other missing files
CVSWeb URLs:
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/anim_basic.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/anim_from.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/anim_size.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/anim_size_plus.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/anim_size_plus_alt.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/anim_units.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/colors.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/easing.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/fade.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/motion_basic.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/motion_by.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/motion_control.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/motion_controls.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/motion_plus.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/scroll_by.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/scroll_horiz.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/scroll_vert.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/css/demo.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/animation/img/logo.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/customize.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/flickr_xml.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/states_jsarray.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/states_jsfunction.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/ysearch_flat.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/ysearch_json.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/ysearch_xml.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/css/examples.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/autocomplete/img/logo.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/calendar/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/calendar/css/examples.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/calendar/img/logo.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/calendar/img/pdate.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/connection/abort.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/connection/get.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/connection/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/connection/post.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/connection/weather.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/dialog.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/keylistener.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/module.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/overlay-manager.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/overlay.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/panel-aqua.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/panel-photo.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/panel-wait.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/panel-xp.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/panel.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/simpledialog-async.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/simpledialog.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/tooltip.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/css/example.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/css/module.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/css/panel-aqua.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/css/panel-xp.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/css/photobox.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/aqua-bg.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/aqua-hd-bg.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/aqua-hd-close-over.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/aqua-hd-close.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/aqua-hd-lt.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/aqua-hd-rt.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/bg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/ctx.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-bl.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-border-rt.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-br.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-brdr-lt.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-brdr-rt.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-close.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-ft.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-hd.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-tl.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/xp-tr.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/ybox-back.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/ybox-close.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/container/img/ybox-next.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/addclass.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/getelementsbyclassname.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/getstyle.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/getxy.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/hasclass.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/removeclass.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/setstyle.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/setxy.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/css/dom.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dom/img/logo.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/drag.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/grid.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/interface.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/list.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/multihandle.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/ontop.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/proxy.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/resize.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/slider.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/targetable.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/css/ie.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/css/screen.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/bullet.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/channel.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/grid.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/hline.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/horizBg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/horizSlider.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/horizSlider_on.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/hue.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/logo.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/lthumb.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/navHover2.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/pickerbg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/qbottom.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/qmiddle.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/qtop.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/select.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/select.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/sortList.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/sq1.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/sq2.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/sq3.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/vertBg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/vertSlider.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/vertSlider_on.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/dragdrop/img/vline.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/fonts/default.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/fonts/fontfamily.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/fonts/fontsize.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t1.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g1.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g10.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g2.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g3.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g4.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g5.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g6.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g7.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g8.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2-g9.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t2.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t3.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t4.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t5.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t6.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/grids/example_t7.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/logger/autocomplete.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/logger/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/logger/readlogs.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/logger/readlogscustom.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/logger/writelogs.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/logger/css/examples.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/logger/img/logo.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/applicationmenubar.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/contextmenu.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example01.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example02.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example03.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example04.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example05.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example06.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example07.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example08.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example09.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example10.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example11.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/example12.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/leftnav.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/programsmenu.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/topnav.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/menu/img/dolly.jpg?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/basic.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/rgb.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/rgb2.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/css/screen.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/bullet.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/greybg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/header.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/hline.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/horizBg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/horizSlider.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/horizSlider_on.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/hue.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/logo.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/lthumb.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/navHover2.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/pickerbg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/qbottom.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/qmiddle.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/qtop.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/select.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/select.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/vertBg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/vertSlider.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/vertSlider_on.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/slider/img/vline.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/anim.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/check.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/default.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/dynamic.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/folders.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/html.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/index.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/menu.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/multi.html?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/css/code.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/css/screen.css?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/img/bullet.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/img/greybg.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/img/header.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/img/logo.gif?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/img/navHover2.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/img/qbottom.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/img/qmiddle.png?cvsroot=phpgwapi&rev=1.1
http://cvs.savannah.gnu.org/viewcvs/phpgwapi/js/yahoo/yui/examples/treeview/img/qtop.png?cvsroot=phpgwapi&rev=1.1
Patches:
Index: animation/anim_basic.html
===================================================================
RCS file: animation/anim_basic.html
diff -N animation/anim_basic.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/anim_basic.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Basic</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var anim = new YAHOO.util.Anim('demo', { width: {to: 500} });
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-basic">
+<div id="doc">
+ <h1>Animation Example - Basic</h1>
+ <p>This example demonstrates how to animate an element's width to a given
value.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+</div>
+</body>
+</html>
Index: animation/anim_from.html
===================================================================
RCS file: animation/anim_from.html
diff -N animation/anim_from.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/anim_from.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Colors</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var anim = new YAHOO.util.Anim('demo', { width: {from: 600, to: 300} });
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+</head>
+<body id="animation-demo-from">
+<div id="doc">
+ <h1>Animation Example - Colors</h1>
+ <p>This example demonstrates how to animate an element's font and
background color.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+</div>
+</body>
+</html>
Index: animation/anim_size.html
===================================================================
RCS file: animation/anim_size.html
diff -N animation/anim_size.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/anim_size.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,35 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Size</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var attributes = {
+ width: { to: 300 },
+ height: { to: 300 }
+ };
+
+ var anim = new YAHOO.util.Anim('demo', attributes, 0.5,
YAHOO.util.Easing.backOut);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-size">
+<div id="doc">
+ <h1>Animation Example - Size</h1>
+ <p>This example demonstrates how to animate an element's size to a given
value. The backOut Easing method is used to give it some flair.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+</div>
+</body>
+</html>
Index: animation/anim_size_plus.html
===================================================================
RCS file: animation/anim_size_plus.html
diff -N animation/anim_size_plus.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/anim_size_plus.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,36 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Size Plus Other Attributes</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var attributes = {
+ width: {to: 100},
+ height: {to: 100},
+ fontSize: {from: 100, to: 50, unit: '%'},
+ opacity: { to: 0.5 }
+ };
+
+ var anim = new YAHOO.util.Anim('demo', attributes, 0.5,
YAHOO.util.Easing.backOut);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+</head>
+<body id="animation-demo-size-plus">
+<div id="doc">
+ <h1>Animation Example - Size Plus Other Attributes</h1>
+ <p>This example demonstrates how to animate an element's size, fontSize,
and opacity to given values.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo">Lorem ipsum dolor </div>
+</div>
+</body>
+</html>
Index: animation/anim_size_plus_alt.html
===================================================================
RCS file: animation/anim_size_plus_alt.html
diff -N animation/anim_size_plus_alt.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/anim_size_plus_alt.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Adding Attributes to an Existing Animation</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var attributes = {
+ width: {to: 100},
+ height: {to: 100}
+ };
+
+ var anim = new YAHOO.util.Anim('demo', attributes);
+ anim.attributes.fontSize = { from: 100, to: 60, unit: '%' };
+ anim.attributes.opacity = { to: 0.5 };
+ anim.method = YAHOO.util.Easing.elasticOut;
+
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+</head>
+<body id="animation-demo-size-plus">
+<div id="doc">
+ <h1>Animation Example - Adding Attributes to an Existing Animation</h1>
+ <p>This example demonstrates how to animate an element's size to a given
value. Other attributes are added after the instance is created in this
example.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo">Lorem ipsum dolor </div>
+</div>
+</body>
+</html>
Index: animation/anim_units.html
===================================================================
RCS file: animation/anim_units.html
diff -N animation/anim_units.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/anim_units.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Unit</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var anim = new YAHOO.util.Anim('demo', { width: { from: 30, to: 10, unit:
'em'} } );
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+</head>
+<body id="animation-demo-units">
+<div id="doc">
+ <h1>Animation Example - Unit</h1>
+ <p>This example demonstrates how to animate an element's width using
"em" as the unit.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+</div>
+</body>
+</html>
Index: animation/colors.html
===================================================================
RCS file: animation/colors.html
diff -N animation/colors.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/colors.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Colors</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+
+ var attributes = {
+ color: { to: '#f00' },
+ backgroundColor: { to: 'rgb(0, 255, 0)' },
+ borderTopColor: { to: '#dcdcdc' },
+ borderRightColor: { to: 'dcdcdc' },
+ borderBottomColor: { to: 'dcdcdc' },
+ borderLeftColor: { to: 'dcdcdc' }
+ };
+
+ var anim = new YAHOO.util.ColorAnim('demo', attributes);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+</head>
+<body id="animation-demo-colors">
+<div id="doc">
+ <h1>Animation Example - Colors</h1>
+ <p>This example demonstrates how to animate an element's font, border, and
background color.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
</div>
+</div>
+</body>
+</html>
Index: animation/easing.html
===================================================================
RCS file: animation/easing.html
diff -N animation/easing.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/easing.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Easing</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var anim = new YAHOO.util.Anim('demo', { width: {to: 500} }, 1,
YAHOO.util.Easing.bounceOut);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-easing">
+<div id="doc">
+ <h1>Animation Example - Easing</h1>
+ <p>This example demonstrates how to animate an element's width to a
given value with a "bounceOut" easing.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+</div>
+</body>
+</html>
Index: animation/fade.html
===================================================================
RCS file: animation/fade.html
diff -N animation/fade.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/fade.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Animation Example - Fade</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var anim = new YAHOO.util.Anim('demo', { opacity: { to: 0 } }, 1,
YAHOO.util.Easing.easeOut);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+</head>
+<body id="animation-demo-fade">
+<div id="doc">
+ <h1>Animation Example - Fade</h1>
+ <p>This example demonstrates how to animate an element's opacity to a given
value.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo">Lorem ipsum dolor </div>
+</div>
+</body>
+</html>
Index: animation/index.html
===================================================================
RCS file: animation/index.html
diff -N animation/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/index.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,38 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>YUI Library - Animation</title>
+<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">
+</head>
+<body>
+<div id="doc">
+ <div id="hd">
+ <img src="img/logo.gif">
+ <h1>YUI Library - Animation</h1>
+ </div>
+ <div id="bd">
+ <ul id="examples">
+ <li><a href="anim_basic.html">Basic Animation</a></li>
+ <li><a href="easing.html">Using Easing</a></li>
+ <li><a href="anim_from.html">Using From</a></li>
+
+ <li><a href="anim_units.html">From in EM units</a></li>
+ <li><a href="anim_size.html">Size</a></li>
+ <li><a href="anim_size_plus.html">Size and other Attributes</a></li>
+ <li><a href="anim_size_plus_alt.html">Adding Attributes to Existing
Animation</a></li>
+ <li><a href="fade.html">Fade</a></li>
+ <li><a href="colors.html">Animating Colors</a></li>
+ <li><a href="motion_basic.html">Simple Movement</a></li>
+
+ <li><a href="motion_by.html">Relative Movement</a></li>
+ <li><a href="motion_control.html">Motion Using a Control Point</a></li>
+ <li><a href="motion_controls.html">Motion Using Multiple Control
Points</a></li>
+ <li><a href="motion_plus.html">Motion and Animation</a></li>
+ <li><a href="scroll_horiz.html">Horizontal Scrolling</a></li>
+ <li><a href="scroll_vert.html">Vertical Scrolling</a></li>
+ <li><a href="scroll_by.html">Relative Scrolling</a></li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
Index: animation/motion_basic.html
===================================================================
RCS file: animation/motion_basic.html
diff -N animation/motion_basic.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/motion_basic.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Motion Example - Basic</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var anim = new YAHOO.util.Motion('demo', { points: { to:
YAHOO.util.Dom.getXY('target') } });
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-motion">
+<div id="doc">
+ <h1>Motion Example - Basic</h1>
+ <p>This example demonstrates how to animate an element's position using the
Motion subclass.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+ <div id="target"></div>
+</div>
+</body>
+</html>
Index: animation/motion_by.html
===================================================================
RCS file: animation/motion_by.html
diff -N animation/motion_by.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/motion_by.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Motion Example - Relative Motion</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var anim = new YAHOO.util.Motion('demo', { points: { by: [300, 0] } });
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-motion">
+<div id="doc">
+ <h1>Motion Example - Relative Motion</h1>
+ <p>This example demonstrates how to animate an element's position from its
current position by a given value.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+</div>
+</body>
+</html>
Index: animation/motion_control.html
===================================================================
RCS file: animation/motion_control.html
diff -N animation/motion_control.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/motion_control.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Motion Example - Using a Control Point</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var attributes = {
+ points: {
+ to: YAHOO.util.Dom.getXY('target'),
+ control: [100, 800]
+ }
+ };
+
+ var anim = new YAHOO.util.Motion('demo', attributes, 1,
YAHOO.util.Easing.bounceOut);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-motion">
+<div id="doc">
+ <h1>Motion Example - Using a Control Point</h1>
+ <p>This example demonstrates how to animate an element's position with a
control point to create a curved path.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+ <div id="target"></div>
+</div>
+</body>
+</html>
Index: animation/motion_controls.html
===================================================================
RCS file: animation/motion_controls.html
diff -N animation/motion_controls.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/motion_controls.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Motion Example - Using Multiple Control Points</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var attributes = {
+ points: {
+ to: YAHOO.util.Dom.getXY('target'),
+ control: [ [100, 800], [0, 200], [500, 500] ]
+ }
+ };
+
+ var anim = new YAHOO.util.Motion('demo', attributes, 1,
YAHOO.util.Easing.easeOut);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-motion">
+<div id="doc">
+ <h1>Motion Example - Using Multiple Control Points</h1>
+ <p>This example demonstrates how to animate an element's position with
multiple control points to create a curved path.</p>
+ <p> Any number of control points may be used, but keep in mind that the
more control points, the more work the animation has to do, so performance may
suffer.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+ <div id="target"></div>
+</div>
+</body>
+</html>
Index: animation/motion_plus.html
===================================================================
RCS file: animation/motion_plus.html
diff -N animation/motion_plus.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/motion_plus.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Motion Example - With Additional Attributes</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var attributes = {
+ points: {
+ to: YAHOO.util.Dom.getXY('target'),
+ control: [ [400, 800], [-100, 200] ]
+ },
+ width: {by: 100},
+ height: {by: 100}
+ };
+
+ var anim = new YAHOO.util.Motion('demo', attributes, 1,
YAHOO.util.Easing.easeOut);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-motion">
+<div id="doc">
+ <h1>Motion Example - With Additional Attributes</h1>
+ <p>This example demonstrates how to animate an element's position and size
together.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"></div>
+ <div id="target"></div>
+</div>
+</body>
+</html>
Index: animation/scroll_by.html
===================================================================
RCS file: animation/scroll_by.html
diff -N animation/scroll_by.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/scroll_by.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Scroll Example - Scroll By</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var anim = new YAHOO.util.Scroll('demo', { scroll: { by: [100, 0] } });
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-scroll">
+<div id="doc">
+ <h1>Scroll Example - Scroll By</h1>
+ <p>This example demonstrates how to animate an element's horizontal scroll
position using the Scroll subclass, using the <strong><em>by</em></strong>
property of the scroll attribute.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto </p></div>
+</div>
+</body>
+</html>
Index: animation/scroll_horiz.html
===================================================================
RCS file: animation/scroll_horiz.html
diff -N animation/scroll_horiz.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/scroll_horiz.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Scroll Example - Horizontal</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var attributes = {
+ scroll: { to: [200, YAHOO.util.Dom.get('demo').scrollTop] }
+ };
+
+ var anim = new YAHOO.util.Scroll('demo', attributes, 1,
YAHOO.util.Easing.easeOut);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-scroll">
+<div id="doc">
+ <h1>Scroll Example - Horizontal</h1>
+ <p>This example demonstrates how to animate an element's horizontal scroll
position using the Scroll subclass.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto </p></div>
+</div>
+</body>
+</html>
Index: animation/scroll_vert.html
===================================================================
RCS file: animation/scroll_vert.html
diff -N animation/scroll_vert.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/scroll_vert.html 25 Sep 2006 10:27:16 -0000 1.1
@@ -0,0 +1,34 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Scroll Example - Vertical</title>
+<link rel="stylesheet" type="text/css" href="css/demo.css">
+
+<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/animation/animation.js"></script>
+
+<script type="text/javascript">
+YAHOO.example.init = function() {
+ var attributes = {
+ scroll: { to: [YAHOO.util.Dom.get('demo').scrollLeft, 200] }
+ };
+
+ var anim = new YAHOO.util.Scroll('demo', attributes);
+ YAHOO.util.Event.on(document, 'click', anim.animate, anim, true);
+};
+
+YAHOO.util.Event.onAvailable('demo', YAHOO.example.init);
+</script>
+
+</head>
+<body id="animation-demo-scroll">
+<div id="doc">
+ <h1>Scroll Example - Vertical</h1>
+ <p>This example demonstrates how to animate an element's vertical scroll
position using the Scroll subclass.</p>
+ <p>Click anywhere to start animation.</p>
+ <div id="demo"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto </p></div>
+</div>
+</body>
+</html>
Index: animation/css/demo.css
===================================================================
RCS file: animation/css/demo.css
diff -N animation/css/demo.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ animation/css/demo.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1 @@
+/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
Version: 0.11.0
*/
body {
margin:0;
font:small arial;
}
h1 {
color:#666;
margin:0;
font:bold 150% palatino, georgia;
}
#hd img {
vertical-align:middle;
}
#hd h1 {
display:inline;
margin:0 0 0 20px;
vertical-align:middle;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#doc {
margin:10px;
}
#examples {
margin:60px 40px;
}
#examples li {
margin-bottom:1em;
}
#examples li a {
color:#666;
font:85% verdana;
}
#demo {
background:#ccc;
font:100%/1.2em arial;
width:10px;
height:10px;
}
#animation-demo-scroll #demo p {
width:600px;
}
#animation-demo-motion #demo {
color:yellow;
font-size:0;
}
#animation-demo-size-plus #demo, #animation-demo-fade #demo,
#animation-demo-colors #demo {
background:#ccc;
font:100%/1.2em arial;
width:200px;
height:200px;
}
#animation-demo-colors #demo {
border:3px solid #c3c;
}
#animation-demo-scroll #demo {
width:400px;
height:200px;
overflow:auto;
}
#animation-demo-colors #demo {
}
#target {
background:red;
font-size:0;
position:absolute;
left:300px;top:300px;
width:10px;
height:10px;
}
\ No newline at end of file
Index: animation/img/logo.gif
===================================================================
RCS file: animation/img/logo.gif
diff -N animation/img/logo.gif
Binary files /dev/null and /tmp/cvsyTEjHT differ
Index: autocomplete/customize.html
===================================================================
RCS file: autocomplete/customize.html
diff -N autocomplete/customize.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/customize.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,350 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>AutoComplete Widget :: Customizable Example</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+
+<style type="text/css">
+ #custommod {position:relative;padding:1em;}
+ #customautocomplete {position:relative;margin:1em;width:40%;}/* set width
of widget here*/
+ #custominput {position:absolute;width:100%;height:1.4em;}
+ #customcontainer {position:absolute;top:1.7em;width:100%;}
+ #customcontainer .yui-ac-content {position:absolute;width:100%;border:1px
solid #404040;background:#fff;overflow:hidden;z-index:9050;}
+ #customcontainer .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #customcontainer ul {padding:5px 0;width:100%;}
+ #customcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #customcontainer li.yui-ac-highlight {background:#ff0;}
+ #customcontainer li.yui-ac-prehighlight {background:#FFFFCC;}
+</style>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
href="./">AutoComplete Widget</a> :: Customizable Example</h1>
+</div>
+
+<div id="bd">
+ <!-- Logger begins -->
+ <div id="logger"></div>
+ <!-- Logger ends -->
+
+ <!-- Code generator begins
+ <div id="coder">
+ <h3>Sample code</h3>
+ <textarea id="output"></textarea>
+ </div>
+ Code generator ends -->
+
+ <!-- Content begins -->
+ <p>When this page loads, a DataSource instance is created that points to
the
+ same DataSource as the <a href="./ysearch_flat.html">Query a custom PHP
+ script for flat data</a> example. However, by changing the values below,
you
+ can customize the AutoComplete implementation to your own configurations.
+ </p>
+
+ <!-- AutoComplete begins -->
+ <div id="custommod">
+ <form onsubmit="return YAHOO.example.ACCustomizable.validateForm();">
+ <h2>Customize your own AutoComplete widget:</h2>
+ <div id="customautocomplete">
+ <input id="custominput">
+ <div id="customcontainer"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+
+ <!-- Panel begins -->
+ <form id="panel">
+
+ <!-- The following is in a select to demonstrate the useIFrame feature
-->
+ <select><option>Customize configurations for
AutoComplete</option></select>
+
+ <div>
+ <input id="animhoriz" type="checkbox"
onclick="YAHOO.example.ACCustomizable.toggleAnimHoriz(this);">
+ <label for="animhoriz">Animate Horizontally</label>
+ </div>
+ <div>
+ <input id="animvert" type="checkbox"
onclick="YAHOO.example.ACCustomizable.toggleAnimVert(this);" checked>
+ <label for="animvert">Animate Vertically</label>
+ </div>
+ <div>
+ <label for="animspeed">Animation Speed: </label>
+ <input id="animspeed" type="text" size="2" value="0.3">
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateAnimSpeed();">
+ </div>
+ <div>
+ <input id="useshadow" type="checkbox"
onclick="YAHOO.example.ACCustomizable.toggleShadow(this);">
+ <label for="useshadow">Use Shadow</label>
+ </div>
+ <div>
+ <input id="useiframe" type="checkbox"
onclick="YAHOO.example.ACCustomizable.toggleIFrame(this);">
+ <label for="useiframe">Use IFrame</label>
+ </div>
+ <div>
+ <input id="typeahead" type="checkbox"
onclick="YAHOO.example.ACCustomizable.toggleTypeAhead(this);">
+ <label for="typeahead">Type Ahead</label>
+ </div>
+ <div>
+ <input id="forceselection" type="checkbox"
onclick="YAHOO.example.ACCustomizable.toggleForceSelection(this);">
+ <label for="forceselection">Force a Selection</label>
+ </div>
+ <div>
+ <label for="maxresults">Maximum Results: </label>
+ <input id="maxresults" type="text" size="2" value="10">
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateMaxResults();">
+ </div>
+ <div>
+ <label for="minquerylength">Minimum Query Length: </label>
+ <input id="minquerylength" type="text" size="2" value="1">
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateMinQueryLength();"
+ </div>
+ <div>
+ <label for="querydelay">Query Delay: </label>
+ <input id="querydelay" type="text" size="2" value="0.5">
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateQueryDelay();">
+ </div>
+ <div>
+ <label for="delimchar">Array of Delimiter Character(s)</label><br>
+ <input id="delimchar" type="text" size="30" value="">
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateDelimChar();">
+ </div>
+ <div>
+ <label for="highlightclass">Highlight Classname</label><br>
+ <input id="highlightclass" type="text" size="30"
value="yui-ac-highlight" maxlength="30">
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateHighlight();">
+ </div>
+ <div>
+ <label for="prehighlightclass">Pre-highlight Classname</label><br>
+ <input id="prehighlightclass" type="text" size="30" value=""
maxlength="30">
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updatePrehighlight();">
+ </div>
+ <div>
+ <input id="allowbrowserautocomplete" type="checkbox"
onclick="YAHOO.example.ACCustomizable.toggleAllowBrowserAutocomplete(this);"
checked>
+ <label for="allowbrowserautocomplete">Allow Browser
Autocomplete</label>
+ </div>
+ <div>
+ <input id="alwaysshowcontainer" type="checkbox"
onclick="YAHOO.example.ACCustomizable.toggleAlwaysShowContainer(this);">
+ <label for="alwaysshowcontainer">Always Show Container</label>
+ </div>
+ <div>
+ <label for="header">Set Header</label>
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateHeader();"><br>
+ <textarea id="header" cols="25" rows="5"></textarea>
+ </div>
+ <div>
+ <label for="body">Set Body</label>
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateBody();"><br>
+ <textarea id="body" cols="25" rows="5"></textarea>
+ </div>
+ <div>
+ <label for="footer">Set Footer</label>
+ <input type="button" value="Update"
onclick="YAHOO.example.ACCustomizable.updateFooter();"><br>
+ <textarea id="footer" cols="25" rows="5"></textarea>
+ </div>
+ </form>
+ <!-- Panel ends -->
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event-debug.js"></script>
+<script src="../../build/connection/connection.js"></script>
+<script src="../../build/animation/animation.js"></script>
+<script src="../../build/autocomplete/autocomplete-debug.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<script>
+YAHOO.example.ACCustomizable = function(){
+ var mylogreader, mylogwriter;
+ var oACDS;
+ var oAutoComp;
+
+ return {
+ init: function() {
+ //Logger
+ mylogreader = new YAHOO.widget.LogReader("logger");
+ mylogwriter = new YAHOO.widget.LogWriter("Custom configs");
+
+ // DataSource 1
+ oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n",
"\t"]);
+ // This is the one non-default value other than constructor params
+ oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
+
+ // AutoComplete 1
+ oAutoComp = new
YAHOO.widget.AutoComplete('custominput','customcontainer', oACDS);
+
+ var ua = navigator.userAgent.toLowerCase();
+ if(ua.indexOf('msie') != -1 && ua.indexOf('opera') < 0) {
+ oAutoComp.useIFrame = true;
+ YAHOO.util.Dom.get("useiframe").checked = true;
+ }
+ },
+
+ toggleAnimHoriz: function(animHoriz) {
+ oAutoComp.animHoriz = animHoriz.checked;
+ mylogwriter.log("Updated animHoriz to " + oAutoComp.animHoriz +
".");
+ },
+
+ toggleAnimVert: function(animVert) {
+ oAutoComp.animVert = animVert.checked;
+ mylogwriter.log("Updated animVert to " + oAutoComp.animVert + ".");
+ },
+
+ updateAnimSpeed: function() {
+ var animSpeed = document.getElementById("animspeed").value;
+ if (isNaN(animSpeed) || (animSpeed < 1)) {
+ document.getElementById("animspeed").value =
oAutoComp.animSpeed;
+ mylogwriter.log("Could not update animSpeed.", "warn");
+ return;
+ }
+ else {
+ oAutoComp.animSpeed = animSpeed;
+ mylogwriter.log("Updated animSpeed to " + oAutoComp.animSpeed
+ ".");
+ }
+ },
+
+ toggleShadow: function(useShadow) {
+ oAutoComp.useShadow = useShadow.checked;
+ mylogwriter.log("Updated useShadow to " + oAutoComp.useShadow +
".");
+ },
+
+ toggleIFrame: function(useIFrame) {
+ oAutoComp.useIFrame = useIFrame.checked;
+ mylogwriter.log("Updated useIFrame to " + oAutoComp.useIFrame +
".");
+ },
+
+ toggleTypeAhead: function(typeAhead) {
+ oAutoComp.typeAhead = typeAhead.checked;
+ mylogwriter.log("Updated typeAhead to " + oAutoComp.typeAhead +
".");
+ },
+
+ toggleForceSelection: function(forceSelection) {
+ oAutoComp.forceSelection = forceSelection.checked;
+ oAutoComp.forceSelection = forceSelection.checked;
+ mylogwriter.log("Updated forceSelection to " +
oAutoComp.forceSelection + ".");
+ },
+
+ updateMaxResults: function() {
+ var maxResults = document.getElementById("maxresults").value;
+ if (isNaN(maxResults) || (maxResults < 1)) {
+ document.getElementById("maxresults").value =
oAutoComp.maxResultsDisplayed;
+ mylogwriter.log("Could not update maxResultsDisplayed.",
"warn");
+ return;
+ }
+ else {
+ oAutoComp.maxResultsDisplayed = maxResults;
+ mylogwriter.log("Updated maxResultsDisplayed to " +
oAutoComp.maxResultsDisplayed + ".");
+ }
+ },
+
+ updateMinQueryLength: function() {
+ var minQueryLength =
document.getElementById("minquerylength").value;
+ if (isNaN(minQueryLength) || (minQueryLength < 1)) {
+ document.getElementById("minquerylength").value =
oAutoComp.minQueryLength;
+ mylogwriter.log("Could not update minQueryLength.", "warn");
+ return;
+ }
+ else {
+ oAutoComp.minQueryLength = minQueryLength;
+ mylogwriter.log("Updated minQueryLength to " +
oAutoComp.minQueryLength + ".");
+ }
+ },
+
+ updateQueryDelay: function() {
+ var queryDelay = document.getElementById("querydelay").value;
+ if (isNaN(queryDelay) || (queryDelay < 0)) {
+ document.getElementById("querydelay").value =
oAutoComp.queryDelay;
+ mylogwriter.log("Could not update queryDelay.", "warn");
+ return;
+ }
+ else {
+ oAutoComp.queryDelay = queryDelay;
+ mylogwriter.log("Updated query delay to " +
oAutoComp.queryDelay + ".");
+ }
+ },
+
+ updateDelimChar: function() {
+ var sValue = document.getElementById("delimchar").value;
+ if((sValue.indexOf("[") == 0) && (sValue.indexOf("]") ==
sValue.length-1)) {
+ oAutoComp.delimChar = eval(sValue);
+ }
+ else if(sValue.length < 2){
+ oAutoComp.delimChar = sValue;
+ }
+ else {
+ document.getElementById("delimchar").value =
oAutoComp.delimChar;
+ mylogwriter.log("Could not update delimChar.", "warn");
+ return;
+ }
+ mylogwriter.log("Updated delimChar to " + oAutoComp.delimChar +
".");
+ },
+
+ updateHighlight: function() {
+ oAutoComp.highlightClassName =
document.getElementById("highlightclass").value;
+ mylogwriter.log("Updated highlightClassName to " +
oAutoComp.highlightClassName + ".");
+ },
+
+ updatePrehighlight: function() {
+ oAutoComp.prehighlightClassName =
document.getElementById("prehighlightclass").value;
+ mylogwriter.log("Updated prehighlightClassName to " +
oAutoComp.prehighlightClassName + ".");
+ },
+
+ toggleAllowBrowserAutocomplete: function(allowBrowserAutocomplete) {
+ oAutoComp.allowBrowserAutocomplete =
allowBrowserAutocomplete.checked;
+ mylogwriter.log("Updated allowBrowserAutocomplete to " +
oAutoComp.allowBrowserAutocomplete + ".");
+ },
+
+ toggleAlwaysShowContainer: function(alwaysShowContainer) {
+ var container =
YAHOO.util.Dom.getElementsByClassName("yui-ac-content","div","customcontainer")[0];
+ if(container) {
+ oAutoComp.alwaysShowContainer = alwaysShowContainer.checked;
+ if(oAutoComp.alwaysShowContainer) {
+ oAutoComp.setBody("alwaysShowContainer enabled");
+ }
+ else {
+ container.style.height = "0";
+ oAutoComp.setBody();
+ }
+ mylogwriter.log("Updated alwaysShowContainer to " +
oAutoComp.alwaysShowContainer + ".");
+ }
+ else {
+ mylogwriter.log("Could not update
alwaysShowContainer.","warn");
+ }
+ },
+
+ updateHeader: function() {
+ var header = document.getElementById("header").value;
+ oAutoComp.setHeader(header);
+ mylogwriter.log("Header updated.");
+ },
+
+ updateBody: function() {
+ var body = document.getElementById("body").value;
+ oAutoComp.setBody(body);
+ mylogwriter.log("Body updated.");
+ },
+
+ updateFooter: function() {
+ var footer = document.getElementById("footer").value;
+ oAutoComp.setFooter(footer);
+ mylogwriter.log("Footer updated.");
+ },
+
+ validateForm: function() {
+ // Validate form inputs here
+ return true;
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACCustomizable.init);
+</script>
+</div>
+</body>
+</html>
Index: autocomplete/flickr_xml.html
===================================================================
RCS file: autocomplete/flickr_xml.html
diff -N autocomplete/flickr_xml.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/flickr_xml.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,200 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>AutoComplete Widget :: Customized XML Implementation</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+
+<style type="text/css">
+ #flickrmod {position:relative;padding:1em;}
+ #flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width
of widget here*/
+ #flickrinput {position:absolute;width:100%;height:1.4em;}
+ #flickrcontainer {position:absolute;top:1.7em;width:100%;}
+ #flickrcontainer .yui-ac-content
{position:absolute;width:100%;height:30em;border:1px solid
#404040;background:#fff;overflow:auto;z-index:9050;}
+ #flickrcontainer .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #flickrcontainer .yui-ac-flickrImg
{width:6em;height:6em;padding:.1em;vertical-align:middle;}
+ #flickrcontainer ul {padding:5px 0;width:100%;}
+ #flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #flickrcontainer li.yui-ac-highlight {background:#ff0;}
+</style>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
href="./">AutoComplete Widget</a> :: XML Data Flickr Web Services</h1>
+</div>
+
+<div id="bd">
+ <!-- Logger begins -->
+ <div id="logger"></div>
+ <!-- Logger ends -->
+
+ <!-- Content begins -->
+ <h3>DataSource</h3>
+ <p>This DataSource instance points to Flickr Web Services, via a simple PHP
+ proxy. The DataSource schema is defined for XML data. In order to be
+ compatible with the Flickr application, the scriptQueryParameter has been
+ customized to be "tags", and scriptQueryAppend has been defined to pass in
+ additional arguments. Finally, the cache has been disabled so that each
+ query is forced to make a trip to the live source.</p>
+
+ <h3>AutoComplete</h3>
+ <p>This AutoComplete instance defines a robust formatResult() function that
+ formats the result data into HTML markup that displays an image from Flickr
+ and its title. The autoHighlight feature has additionally been
disabled.</p>
+
+ <!-- AutoComplete begins -->
+ <div id="flickrmod">
+ <form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
+ <h2>Enter Flickr tags to find a photo (separate with commas):</h2>
+ <div id="flickrautocomplete">
+ <input id="flickrinput">
+ <div id="flickrcontainer"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ #flickrmod {position:relative;padding:1em;}
+ #flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width
of widget here*/
+ #flickrinput {position:absolute;width:100%;height:1.4em;}
+ #flickrcontainer {position:absolute;top:1.7em;width:100%;}
+ #flickrcontainer .yui-ac-content
{position:absolute;width:100%;height:30em;border:1px solid
#404040;background:#fff;overflow:auto;z-index:9050;}
+ #flickrcontainer .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #flickrcontainer .yui-ac-flickrImg
{width:6em;height:6em;padding:.1em;vertical-align:middle;}
+ #flickrcontainer ul {padding:5px 0;width:100%;}
+ #flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #flickrcontainer li.yui-ac-highlight {background:#ff0;}
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ <!-- AutoComplete begins -->
+ <div id="flickrmod">
+ <form>
+ <h2>Enter Flickr tags to find a photo (separate with
commas):</h2>
+ <div id="flickrautocomplete">
+ <input id="flickrinput">
+ <div id="flickrcontainer"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ // Instantiate data source and define schema as an array:
+ // ["ResultNodeName",
+ // "QueryKeyAttributeOrNodeName",
+ // "AdditionalParamAttributeOrNodeName1",
+ // ...
+ // "AdditionalParamAttributeOrNodeNameN"]
+ oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",
+ ["photo", "title", "id", "owner", "secret", "server"]);
+ oACDS.scriptQueryParam = "tags";
+ oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;
+ oACDS.maxCacheEntries = 0;
+ oACDS.scriptQueryAppend = "method=flickr.photos.search";
+
+ // Instantiate auto complete
+ oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer',
oACDS);
+ oAutoComp.autoHighlight = false;
+ oAutoComp.formatResult = function(oResultItem, sQuery) {
+ // This was defined by the schema array of the data source
+ var sTitle = oResultItem[0];
+ var sId = oResultItem[1];
+ var sOwner = oResultItem[2];
+ var sSecret = oResultItem[3];
+ var sServer = oResultItem[4];
+ var sUrl = "http://static.flickr.com/"; +
+ sServer +
+ "/" +
+ sId +
+ "_" +
+ sSecret +
+ "_s.jpg";
+ var sMarkup = "<img src='" + sUrl + "' class='yui-ac-flickrImg'> " +
sTitle;
+ return (sMarkup);
+ };
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event-debug.js"></script>
+<script src="../../build/connection/connection.js"></script>
+<script src="../../build/animation/animation.js"></script>
+<script src="../../build/autocomplete/autocomplete-debug.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<script>
+YAHOO.example.ACFlickr = function() {
+ var mylogger;
+ var oACDS;
+ var oAutoComp;
+
+ return {
+ init: function() {
+ //Logger
+ mylogger = new YAHOO.widget.LogReader("logger");
+
+ // Instantiate data source and define schema as an array:
+ // ["ResultNodeName",
+ // "QueryKeyAttributeOrNodeName",
+ // "AdditionalParamAttributeOrNodeName1",
+ // ...
+ // "AdditionalParamAttributeOrNodeNameN"]
+ oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",
+ ["photo", "title", "id", "owner", "secret", "server"]);
+ oACDS.scriptQueryParam = "tags";
+ oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;
+ oACDS.maxCacheEntries = 0;
+ oACDS.scriptQueryAppend = "method=flickr.photos.search";
+
+ // Instantiate auto complete
+ oAutoComp = new
YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);
+ oAutoComp.autoHighlight = false;
+ oAutoComp.formatResult = function(oResultItem, sQuery) {
+ // This was defined by the schema array of the data source
+ var sTitle = oResultItem[0];
+ var sId = oResultItem[1];
+ var sOwner = oResultItem[2];
+ var sSecret = oResultItem[3];
+ var sServer = oResultItem[4];
+ var sUrl = "http://static.flickr.com/"; +
+ sServer +
+ "/" +
+ sId +
+ "_" +
+ sSecret +
+ "_s.jpg";
+ var sMarkup = "<img src='" + sUrl + "'
class='yui-ac-flickrImg'> " + sTitle;
+ return (sMarkup);
+ };
+ },
+
+ validateForm: function() {
+ // Validate form inputs here
+ return false;
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlickr.init);
+</script>
+</div>
+</body>
+</html>
Index: autocomplete/index.html
===================================================================
RCS file: autocomplete/index.html
diff -N autocomplete/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/index.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>AutoComplete Widget :: Implementation Examples</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+<style type="text/css">
+ul {margin:1em;}
+li {margin:1em;list-style-type:none;}
+</style>
+</head>
+<body>
+
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/>AutoComplete Widget
:: JSON Data Yahoo! Search Web Services</h1>
+</div>
+
+<div id="bd">
+ <ul>
+ <li><a href="./ysearch_json.html">Query Yahoo! Search web services for
JSON</a></li>
+ <li><a href="./ysearch_xml.html">Query Yahoo! Search web wervices for
XML</a></li>
+ <li><a href="./states_jsarray.html">Query a JS array for in-memory
data</a></li>
+ <li><a href="./states_jsfunction.html">Query a JS function for
in-memory data</a></li>
+ <li><a href="./flickr_xml.html">Query Flickr web services for
XML</a></li>
+ <li><a href="./ysearch_flat.html">Query a custom PHP script for flat
data</a></li>
+ <li><a href="./customize.html">Configure your own AutoComplete
component</a></li>
+ </ul>
+</div>
+</body>
+</html>
+
Index: autocomplete/states_jsarray.html
===================================================================
RCS file: autocomplete/states_jsarray.html
diff -N autocomplete/states_jsarray.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/states_jsarray.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,665 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>AutoComplete Widget :: JS Array Example</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+
+<style type="text/css">
+ #statesmod {position:relative;}
+ #statesautocomplete, #statesautocomplete2
{position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
+ #statesautocomplete {z-index:9000} /* for IE z-index of absolute divs
inside relative divs issue */
+ #statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}
+ #statescontainer, #statescontainer2
{position:absolute;top:1.7em;width:100%}
+ #statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content
{position:absolute;width:100%;border:1px solid
#404040;background:#fff;overflow:hidden;z-index:9050;}
+ #statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
+ #statescontainer li, #statescontainer2 li {padding:0
5px;cursor:default;white-space:nowrap;}
+ #statescontainer li.yui-ac-highlight, #statescontainer2
li.yui-ac-highlight {background:#ff0;}
+ #statescontainer li.yui-ac-prehighlight,#statescontainer2
li.yui-ac-prehighlight {background:#FFFFCC;}
+</style>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
href="./">AutoComplete Widget</a> :: JavaScript Array</h1>
+</div>
+
+<div id="bd">
+ <!-- Logger begins -->
+ <div id="logger"></div>
+ <!-- Logger ends -->
+
+ <!-- AutoComplete begins -->
+ <div id="statesmod">
+ <form onsubmit="return YAHOO.example.ACJSArray.validateForm();">
+ <h3>Find a state:</h3>
+ <div id="statesautocomplete">
+ <input id="statesinput">
+ <div id="statescontainer"></div>
+ </div>
+ <h3>Find an area code</h3>
+ <div id="statesautocomplete2">
+ <input id="statesinput2">
+ <div id="statescontainer2"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+
+ <!-- Content begins -->
+ <h3>DataSource</h3>
+ <p>Two DataSource instances point to in-memory JavaScript arrays. The first
+ array holds the 50 US states. The second array itself holds arrays of US
+ area codes and their corresponding states.</p>
+
+ <h3>AutoComplete</h3>
+ <p>Since the two DataSources for this example are already loaded into
memory
+ via JavaScript arrays, queries should be very fast to return data.
Therefore,
+ both AutoComplete instances are configured to have a query delay of zero
+ seconds.</p.
+
+ <p>A few configurations have also been made to aid the usability of the
+ widgets. The autoHighlight and typeAhead features can help reduce the
number
+ of user actions it takes to submit a valid selection. The
+ prehighlightClassName feature provides an supplemental visual feedback for
mouse
+ events.</p>
+
+ <p>Additionally, the second AutoComplete instance also has been enhanced to
+ display two data fields in the container: the area code and the area code's
+ state. The forceSelection feature has been enabled to prevent the user from
+ typing in a free-form selection.</p>
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ #statesmod {position:relative;}
+ #statesautocomplete, #statesautocomplete2
{position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
+ #statesautocomplete {z-index:9000} /* for IE z-index of absolute divs
inside relative divs issue */
+ #statesinput, #statesinput2 {width:100%;height:1.4em;z-index:0;}
+ #statescontainer, #statescontainer2
{position:absolute;top:1.7em;width:100%}
+ #statescontainer .yui-ac-content, #statescontainer2 .yui-ac-content
{position:absolute;width:100%;border:1px solid
#404040;background:#fff;overflow:hidden;z-index:9050;}
+ #statescontainer .yui-ac-shadow, #statescontainer2 .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #statescontainer ul, #statescontainer2 ul {padding:5px 0;width:100%;}
+ #statescontainer li, #statescontainer2 li {padding:0
5px;cursor:default;white-space:nowrap;}
+ #statescontainer li.yui-ac-highlight, #statescontainer2
li.yui-ac-highlight {background:#ff0;}
+ #statescontainer li.yui-ac-prehighlight,#statescontainer2
li.yui-ac-prehighlight {background:#FFFFCC;}
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ <!-- AutoComplete begins -->
+ <div id="statesmod">
+ <form>
+ <h3>Find a state:</h3>
+ <div id="statesautocomplete">
+ <input id="statesinput">
+ <div id="statescontainer"></div>
+ </div>
+ <h3>Find an area code</h3>
+ <div id="statesautocomplete2">
+ <input id="statesinput2">
+ <div id="statescontainer2"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ var statesArray = [
+ "Alabama",
+ "Alaska",
+ "Arizona",
+ "Arkansas",
+ "California",
+ "Colorado",
+ "Connecticut",
+ "Delaware",
+ "Florida" // Entire array not shown
+ ];
+
+ var areacodesArray = [
+ ["201", "New Jersey"],
+ ["202", "Washington, DC"],
+ ["203", "Connecticut"],
+ ["204", "Manitoba, Canada"],
+ ["205", "Alabama"],
+ ["206", "Washington"],
+ ["207", "Maine"] // Entire array not shown
+ ];
+
+ // Instantiate first data source
+ oACDS = new YAHOO.widget.DS_JSArray(statesArray);
+
+ // Instantiate first auto complete
+ oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer',
oACDS);
+ oAutoComp.queryDelay = 0;
+ oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
+ oAutoComp.typeAhead = true;
+ oAutoComp.useShadow = true;
+
+ // Instantiate second data source
+ oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);
+
+ // Instantiate second auto complete
+ oAutoComp2 = new
YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);
+ oAutoComp2.queryDelay = 0;
+ oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
+ oAutoComp2.typeAhead = true;
+ oAutoComp2.useShadow = true;
+ oAutoComp2.forceSelection = true;
+ oAutoComp2.formatResult = function(oResultItem, sQuery) {
+ var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
+ return (sMarkup);
+ };
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event-debug.js"></script>
+<script src="../../build/animation/animation.js"></script>
+<script src="../../build/autocomplete/autocomplete-debug.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<!-- In-memory JS array begins-->
+<script>
+var statesArray = [
+ "Alabama",
+ "Alaska",
+ "Arizona",
+ "Arkansas",
+ "California",
+ "Colorado",
+ "Connecticut",
+ "Delaware",
+ "Florida",
+ "Georgia",
+ "Hawaii",
+ "Idaho",
+ "Illinois",
+ "Indiana",
+ "Iowa",
+ "Kansas",
+ "Kentucky",
+ "Louisiana",
+ "Maine",
+ "Maryland",
+ "Massachusetts",
+ "Michigan",
+ "Minnesota",
+ "Mississippi",
+ "Missouri",
+ "Montana",
+ "Nebraska",
+ "Nevada",
+ "New Hampshire",
+ "New Jersey",
+ "New Mexico",
+ "New York",
+ "North Dakota",
+ "North Carolina",
+ "Ohio",
+ "Oklahoma",
+ "Oregon",
+ "Pennsylvania",
+ "Rhode Island",
+ "South Carolina",
+ "South Dakota",
+ "Tennessee",
+ "Texas",
+ "Utah",
+ "Vermont",
+ "Virginia",
+ "Washington",
+ "West Virginia",
+ "Wisconsin",
+ "Wyoming"
+];
+var areacodesArray = [
+ ["201", "New Jersey"],
+ ["202", "Washington, DC"],
+ ["203", "Connecticut"],
+ ["204", "Manitoba, Canada"],
+ ["205", "Alabama"],
+ ["206", "Washington"],
+ ["207", "Maine"],
+
+ ["208", "Idaho"],
+ ["209", "California"],
+ ["210", "Texas"],
+ ["212", "New York"],
+ ["213", "California"],
+ ["214", "Texas"],
+
+ ["215", "Pennsylvania"],
+ ["216", "Ohio"],
+ ["217", "Illinois"],
+ ["218", "Minnesota"],
+ ["219", "Indiana"],
+ ["224", "Illinois"],
+
+ ["225", "Louisiana"],
+ ["227", "Maryland"],
+ ["228", "Mississippi"],
+ ["229", "Georgia"],
+ ["231", "Michigan"],
+ ["234", "Ohio"],
+
+ ["239", "Florida"],
+ ["240", "Maryland"],
+ ["242", "Bahamas"],
+ ["246", "Barbados"],
+ ["248", "Michigan"],
+ ["250", "British Columbia"],
+
+ ["251", "Alabama"],
+ ["252", "North Carolina"],
+ ["253", "Washington"],
+ ["254", "Texas"],
+ ["256", "Alabama"],
+ ["260", "Indiana"],
+
+ ["262", "Wisconsin"],
+ ["264", "Anguilla"],
+ ["267", "Pennsylvania"],
+ ["268", "Antigua and Barbuda"],
+ ["269", "Michigan"],
+ ["270", "Kentucky"],
+
+ ["276", "Virginia"],
+ ["281", "Texas"],
+ ["283", "Ohio"],
+ ["284", "British Virgin Islands"],
+ ["289", "Ontario"],
+ ["301", "Maryland"],
+
+ ["302", "Delaware"],
+ ["303", "Colorado"],
+ ["304", "West Virginia"],
+ ["305", "Florida"],
+ ["306", "Saskatchewan, Canada"],
+ ["307", "Wyoming"],
+
+ ["308", "Nebraska"],
+ ["309", "Illinois"],
+ ["310", "California"],
+ ["312", "Illinois"],
+ ["313", "Michigan"],
+ ["314", "Missouri"],
+
+ ["315", "New York"],
+ ["316", "Kansas"],
+ ["317", "Indiana"],
+ ["318", "Louisiana"],
+ ["319", "Iowa"],
+ ["320", "Minnesota"],
+
+ ["321", "Florida"],
+ ["323", "California"],
+ ["330", "Ohio"],
+ ["331", "Illinois"],
+ ["334", "Alabama"],
+ ["336", "North Carolina"],
+
+ ["337", "Louisiana"],
+ ["339", "Massachusetts"],
+ ["340", "US Virgin Islands"],
+ ["345", "Cayman Islands"],
+ ["347", "New York"],
+ ["351", "Massachusetts"],
+
+ ["352", "Florida"],
+ ["360", "Washington"],
+ ["361", "Texas"],
+ ["386", "Florida"],
+ ["401", "Rhode Island"],
+ ["402", "Nebraska"],
+
+ ["403", "Alberta, Canada"],
+ ["404", "Georgia"],
+ ["405", "Oklahoma"],
+ ["406", "Montana"],
+ ["407", "Florida"],
+ ["408", "California"],
+
+ ["409", "Texas"],
+ ["410", "Maryland"],
+ ["412", "Pennsylvania"],
+ ["413", "Massachusetts"],
+ ["414", "Wisconsin"],
+ ["415", "California"],
+
+ ["416", "Ontario, Canada"],
+ ["417", "Missouri"],
+ ["418", "Quebec, Canada"],
+ ["419", "Ohio"],
+ ["423", "Tennessee"],
+ ["424", "California"],
+
+ ["425", "Washington"],
+ ["434", "Virginia"],
+ ["435", "Utah"],
+ ["440", "Ohio"],
+ ["441", "Bermuda"],
+ ["443", "Maryland"],
+
+ ["445", "Pennsylvania"],
+ ["450", "Quebec, Canada"],
+ ["464", "Illinois"],
+ ["469", "Texas"],
+ ["470", "Georgia"],
+ ["473", "Grenada"],
+
+ ["475", "Connecticut"],
+ ["478", "Georgia"],
+ ["479", "Arkansas"],
+ ["480", "Arizona"],
+ ["484", "Pennsylvania"],
+ ["501", "Arkansas"],
+
+ ["502", "Kentucky"],
+ ["503", "Oregon"],
+ ["504", "Louisiana"],
+ ["505", "New Mexico"],
+ ["506", "New Brunswick, Canada"],
+ ["507", "Minnesota"],
+
+ ["508", "Massachusetts"],
+ ["509", "Washington"],
+ ["510", "California"],
+ ["512", "Texas"],
+ ["513", "Ohio"],
+ ["514", "Quebec, Canada"],
+
+ ["515", "Iowa"],
+ ["516", "New York"],
+ ["517", "Michigan"],
+ ["518", "New York"],
+ ["519", "Ontario, Canada"],
+ ["520", "Arizona"],
+
+ ["530", "California"],
+ ["540", "Virginia"],
+ ["541", "Oregon"],
+ ["551", "New Jersey"],
+ ["557", "Missouri"],
+ ["559", "California"],
+
+ ["561", "Florida"],
+ ["562", "California"],
+ ["563", "Iowa"],
+ ["564", "Washington"],
+ ["567", "Ohio"],
+ ["570", "Pennsylvania"],
+
+ ["571", "Virginia"],
+ ["573", "Missouri"],
+ ["574", "Indiana"],
+ ["580", "Oklahoma"],
+ ["585", "New York"],
+ ["586", "Michigan"],
+
+ ["601", "Mississippi"],
+ ["602", "Arizona"],
+ ["603", "New Hampshire"],
+ ["604", "British Columbia, Canada"],
+ ["605", "South Dakota"],
+ ["606", "Kentucky"],
+
+ ["607", "New York"],
+ ["608", "Wisconsin"],
+ ["609", "New Jersey"],
+ ["610", "Pennsylvania"],
+ ["612", "Minnesota"],
+ ["613", "Ontario, Canada"],
+
+ ["614", "Ohio"],
+ ["615", "Tennessee"],
+ ["616", "Michigan"],
+ ["617", "Massachusetts"],
+ ["618", "Illinois"],
+ ["619", "California"],
+
+ ["620", "Kansas"],
+ ["623", "Arizona"],
+ ["626", "California"],
+ ["630", "Illinois"],
+ ["631", "New York"],
+ ["636", "Missouri"],
+
+ ["641", "Iowa"],
+ ["646", "New York"],
+ ["647", "Ontario, Canada"],
+ ["649", "Turks and Caicos Islands"],
+ ["650", "California"],
+ ["651", "Minnesota"],
+
+ ["660", "Missouri"],
+ ["661", "California"],
+ ["662", "Mississippi"],
+ ["664", "Montserrat"],
+ ["667", "Maryland"],
+ ["670", "CNMI"],
+
+ ["671", "Guam"],
+ ["678", "Georgia"],
+ ["682", "Texas"],
+ ["701", "North Dakota"],
+ ["702", "Nevada"],
+ ["703", "Virginia"],
+
+ ["704", "North Carolina"],
+ ["705", "Ontario, Canada"],
+ ["706", "Georgia"],
+ ["707", "California"],
+ ["708", "Illinois"],
+ ["709", "Newfoundland, Canada"],
+
+ ["712", "Iowa"],
+ ["713", "Texas"],
+ ["714", "California"],
+ ["715", "Wisconsin"],
+ ["716", "New York"],
+ ["717", "Pennsylvania"],
+
+ ["718", "New York"],
+ ["719", "Colorado"],
+ ["720", "Colorado"],
+ ["724", "Pennsylvania"],
+ ["727", "Florida"],
+ ["731", "Tennessee"],
+
+ ["732", "New Jersey"],
+ ["734", "Michigan"],
+ ["737", "Texas"],
+ ["740", "Ohio"],
+ ["754", "Florida"],
+ ["757", "Viriginia"],
+
+ ["758", "St. Lucia"],
+ ["760", "California"],
+ ["763", "Minnesota"],
+ ["765", "Indiana"],
+ ["767", "Dominica"],
+ ["770", "Georgia"],
+
+ ["772", "Florida"],
+ ["773", "Illinois"],
+ ["774", "Massachusetts"],
+ ["775", "Nevada"],
+ ["778", "British Columbia, Canada"],
+ ["780", "Alberta, Canada"],
+
+ ["781", "Massachusetts"],
+ ["784", "St. Vincent & Gren."],
+ ["785", "Kansas"],
+ ["786", "Florida"],
+ ["787", "Puerto Rico"],
+
+ ["801", "Utah"],
+ ["802", "Vermont"],
+ ["803", "South Carolina"],
+ ["804", "Virginia"],
+ ["805", "California"],
+ ["806", "Texas"],
+
+ ["807", "Ontario, Canada"],
+ ["808", "Hawaii"],
+ ["809", "Dominican Republic"],
+ ["810", "Michigan"],
+ ["812", "Indiana"],
+ ["813", "Florida"],
+
+ ["814", "Pennsylvania"],
+ ["815", "Illinois"],
+ ["816", "Missouri"],
+ ["817", "Texas"],
+ ["818", "California"],
+ ["819", "Quebec, Canada"],
+
+ ["828", "North Carolina"],
+ ["830", "Texas"],
+ ["831", "California"],
+ ["832", "Texas"],
+ ["835", "Pennsylvania"],
+ ["843", "South Carolina"],
+
+ ["845", "New York"],
+ ["847", "Illinois"],
+ ["848", "New Jersey"],
+ ["850", "Florida"],
+ ["856", "New Jersey"],
+ ["857", "Massachusetts"],
+
+ ["858", "California"],
+ ["859", "Kentucky"],
+ ["860", "Connecticut"],
+ ["862", "New Jersey"],
+ ["863", "Florida"],
+ ["864", "South Carolina"],
+
+ ["865", "Tennessee"],
+ ["867", "Yukon, NW Territories, Canada"],
+ ["868", "Trinidad and Tobago"],
+ ["869", "St. Kitts & Nevis"],
+ ["870", "Arkansas"],
+
+ ["872", "Illinois"],
+ ["876", "Jamaica"],
+ ["878", "Pennsylvania"],
+ ["901", "Tennessee"],
+ ["902", "Nova Scotia, Canada"],
+ ["903", "Texas"],
+
+ ["904", "Florida"],
+ ["905", "Ontario, Canada"],
+ ["906", "Michigan"],
+ ["907", "Alaska"],
+ ["908", "New Jersey"],
+ ["909", "California"],
+
+ ["910", "North Carolina"],
+ ["912", "Georgia"],
+ ["913", "Kansas"],
+ ["914", "New York"],
+ ["915", "Texas"],
+ ["916", "California"],
+
+ ["917", "New York"],
+ ["918", "Oklahoma"],
+ ["919", "North Carolina"],
+ ["920", "Wisconsin"],
+ ["925", "California"],
+ ["928", "Arizona"],
+
+ ["931", "Tennessee"],
+ ["936", "Texas"],
+ ["937", "Ohio"],
+ ["939", "Puerto Rico"],
+ ["940", "Texas"],
+ ["941", "Florida"],
+
+ ["947", "Michigan"],
+ ["949", "California"],
+ ["952", "Minnesota"],
+ ["954", "Florida"],
+ ["956", "Texas"],
+ ["959", "Connecticut"],
+
+ ["970", "Colorado"],
+ ["971", "Oregon"],
+ ["972", "Texas"],
+ ["973", "New Jersey"],
+ ["975", "Missouri"],
+ ["978", "Massachusetts"],
+
+ ["979", "Texas"],
+ ["980", "North Carolina"],
+ ["984", "North Carolina"],
+ ["985", "Louisiana"],
+ ["989", "Michigan"]
+];
+</script>
+<!-- In-memory JS array ends-->
+
+
+<script>
+YAHOO.example.ACJSArray = function() {
+ var mylogger;
+ var oACDS,oACDS2;
+ var oAutoComp,oAutoComp2;
+ return {
+ init: function() {
+ //Logger
+ mylogger = new YAHOO.widget.LogReader("logger");
+
+ // Instantiate first data source
+ oACDS = new YAHOO.widget.DS_JSArray(statesArray);
+
+ // Instantiate first auto complete
+ oAutoComp = new
YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
+ oAutoComp.queryDelay = 0;
+ oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
+ oAutoComp.typeAhead = true;
+ oAutoComp.useShadow = true;
+
+ // Instantiate second data source
+ oACDS2 = new YAHOO.widget.DS_JSArray(areacodesArray);
+
+ // Instantiate second auto complete
+ oAutoComp2 = new
YAHOO.widget.AutoComplete('statesinput2','statescontainer2', oACDS2);
+ oAutoComp2.queryDelay = 0;
+ oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
+ oAutoComp2.typeAhead = true;
+ oAutoComp2.useShadow = true;
+ oAutoComp2.forceSelection = true;
+ oAutoComp2.formatResult = function(oResultItem, sQuery) {
+ var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
+ return (sMarkup);
+ };
+ },
+
+ validateForm: function() {
+ // Validate form inputs here
+ return false;
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSArray.init);
+</script>
+</div>
+</body>
+</html>
Index: autocomplete/states_jsfunction.html
===================================================================
RCS file: autocomplete/states_jsfunction.html
diff -N autocomplete/states_jsfunction.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/states_jsfunction.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,246 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>AutoComplete Widget :: JS Function Example</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+
+<style type="text/css">
+ #statesmod {position:relative;padding:1em;}
+ #statesautocomplete {position:relative;margin:1em;width:15em;}/* set width
of widget here*/
+ #statesinput {position:absolute;width:100%;height:1.4em;}
+ #statescontainer {position:absolute;top:1.7em;width:100%;}
+ #statescontainer .yui-ac-content
{position:absolute;width:100%;height:11em;border:1px solid
#404040;background:#fff;overflow:hidden;z-index:9050;}
+ #statescontainer .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #statescontainer ul {padding:5px 0;width:100%;}
+ #statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #statescontainer li.yui-ac-highlight {background:#ff0;}
+</style>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
href="./">AutoComplete Widget</a> :: JavaScript Function</h1>
+</div>
+
+<div id="bd">
+ <!-- Logger begins -->
+ <div id="logger"></div>
+ <!-- Logger ends -->
+
+ <!-- Content begins -->
+ <h3>DataSource</h3>
+ <p>This DataSource instance points to an in-memory JavaScript function that
+ returns results in an array. The function queries against an in-memory
object
+ literal of data that holds the 50 US states and their corresponding postal
+ abbreviations.</p>
+
+ <h3>AutoComplete</h3>
+ <p>Since the DataSource for this example is already loaded into memory,
+ queries should be very fast to return data. Therefore, the AutoComplete
+ instance is configured to have a query delay of zero seconds. The
+ AutoComplete instance is also configured to display two data fields in its
+ container: the state and its corresponding postal abbreviation. By setting
+ the alwaysShowContainer property to true and customizing appropriate CSS
styles, the
+ container has been implemented to always be displayed. Custom event
handlers
+ have been hooked into containerExpandEvent and containerCollapseEvent to
+ dynamically update the always open container's contents. Finally, the
+ autoHighlight feature has been enabled to reduce the number of user actions
+ it takes to submit a valid selection.</p>
+
+ <!-- AutoComplete begins -->
+ <div id="statesmod">
+ <form onsubmit="return YAHOO.example.ACJSFunction.validateForm();">
+ <h2>Find a state:</h2>
+ <div id="statesautocomplete">
+ <input id="statesinput">
+ <div id="statescontainer"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+
+ <!-- Sample code begins -->
+ <div id="code" style="margin-top:15em;">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ #statesmod {position:relative;padding:1em;}
+ #statesautocomplete {position:relative;margin:1em;width:15em;}/* set width
of widget here*/
+ #statesinput {position:absolute;width:100%;height:1.4em;}
+ #statescontainer {position:absolute;top:1.7em;width:100%;}
+ #statescontainer .yui-ac-content
{position:absolute;width:100%;height:11em;border:1px solid
#404040;background:#fff;overflow:hidden;z-index:9050;}
+ #statescontainer .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #statescontainer ul {padding:5px 0;width:100%;}
+ #statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #statescontainer li.yui-ac-highlight {background:#ff0;}
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ <!-- AutoComplete begins -->
+ <div id="statesmod">
+ <form>
+ <h2>Find a state:</h2>
+ <div id="statesautocomplete">
+ <input id="statesinput">
+ <div id="statescontainer"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ function getStates(sQuery) {
+ aResults = [];
+ if(sQuery.length > 0) {
+ var charKey = sQuery.substring(0,1).toLowerCase();
+ var oResponse = dataset[charKey];
+
+ if(oResponse) {
+ for(var i = oResponse.length-1; i >= 0; i--) {
+ var sKey = oResponse[i].STATE;
+ var sKeyIndex =
encodeURI(sKey.toLowerCase()).indexOf(sQuery.toLowerCase());
+
+ // Query found at the beginning of the key string for
STARTSWITH
+ // returns an array of arrays where STATE is index=0, ABBR
is index=1
+ if(sKeyIndex === 0) {
+ aResults.unshift([sKey, oResponse[i].ABBR]);
+ }
+ }
+ }
+ return aResults;
+ }
+ else { return null; }
+ }
+
+ var dataset =
+ {'a': [{"STATE" : "Alabama", "ABBR" : "AL"},
+ {"STATE" : "Alaska", "ABBR" : "AK"},
+ {"STATE" : "Arizona", "ABBR" : "AZ"},
+ {"STATE" : "Arkansas", "ABBR" : "AR"}],
+ 'b' : [
+ ],
+ 'c' : [
+ {"STATE" : "California", "ABBR" : "CA"},
+ {"STATE" : "Colorado", "ABBR" : "CO"},
+ {"STATE" : "Connecticut", "ABBR" : "CT"}] // Entire dataset not
shown
+ };
+
+ // Instantiate data source
+ oACDS = new YAHOO.widget.DS_JSFunction(getStates);
+
+ // Instantiate auto complete
+ oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer',
oACDS);
+ oAutoComp.alwaysShowContainer = true;
+ oAutoComp.queryDelay = 0;
+ oAutoComp.maxResultsDisplayed = 8;
+ oAutoComp.useShadow = true;
+ oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing to find
a state</div>");
+ oAutoComp.formatResult = function(oResultItem, sQuery) {
+ var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
+ return (sMarkup);
+ };
+
+ // Subscribe to custom events
+ oAutoComp.dataReturnEvent.subscribe(myOnDataReturn);
+ oAutoComp.containerCollapseEvent.subscribe(myOnContainerCollapse);
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event-debug.js"></script>
+<script src="../../build/animation/animation.js"></script>
+<script src="../../build/autocomplete/autocomplete-debug.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<!-- In-memory JS dataset begins-->
+<script src="./js/states_jsfunction.js"></script>
+<!-- In-memory JS dataset ends-->
+
+
+<script>
+YAHOO.example.ACJSFunction = function(){
+ var mylogger;
+ var oACDS;
+ var oAutoComp;
+
+ return {
+ init: function() {
+ //Logger
+ mylogger = new YAHOO.widget.LogReader("logger");
+
+ // Instantiate data source
+ oACDS = new YAHOO.widget.DS_JSFunction(getStates);
+
+ // Instantiate auto complete
+ oAutoComp = new
YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
+ oAutoComp.alwaysShowContainer = true;
+ oAutoComp.queryDelay = 0;
+ oAutoComp.maxResultsDisplayed = 8;
+ oAutoComp.useShadow = true;
+ oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing
to find a state</div>");
+ oAutoComp.formatResult = function(oResultItem, sQuery) {
+ var sMarkup = oResultItem[0] + " (" + oResultItem[1] + ")";
+ return (sMarkup);
+ };
+
+ // Define custom event handlers
+ myOnDataReturn = function(sType, aArgs) {
+ var oAutoComp = aArgs[0];
+ var sQuery = aArgs[1];
+ var aResults = aArgs[2];
+
+ if(aResults.length == 0) {
+ oAutoComp.setBody("<div id=\"statescontainerdefault\">No
matching results</div>");
+ }
+ };
+
+ myOnContainerCollapse = function(sType, aArgs) {
+ var oAutoComp = aArgs[0];
+ oAutoComp.setBody("<div id=\"statescontainerdefault\">Start
typing to find a state</div>");
+ };
+
+ // Subscribe to custom events
+
oAutoComp.dataReturnEvent.subscribe(YAHOO.example.ACJSFunction.myOnDataReturn);
+
oAutoComp.containerCollapseEvent.subscribe(YAHOO.example.ACJSFunction.myOnContainerCollapse);
+ },
+
+ // Define custom event handlers
+ myOnDataReturn: function(sType, aArgs) {
+ var oAutoComp = aArgs[0];
+ var sQuery = aArgs[1];
+ var aResults = aArgs[2];
+
+ if(aResults.length == 0) {
+ oAutoComp.setBody("<div id=\"statescontainerdefault\">No
matching results</div>");
+ }
+ },
+
+ myOnContainerCollapse: function(sType, aArgs) {
+ var oAutoComp = aArgs[0];
+ oAutoComp.setBody("<div id=\"statescontainerdefault\">Start typing
to find a state</div>");
+ },
+
+ validateForm: function() {
+ // Validate form inputs here
+ return false;
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACJSFunction.init);
+</script>
+</div>
+</body>
+</html>
Index: autocomplete/ysearch_flat.html
===================================================================
RCS file: autocomplete/ysearch_flat.html
diff -N autocomplete/ysearch_flat.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/ysearch_flat.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,271 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>AutoComplete Widget :: Complex Flat-data Implementation</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+
+<style type="text/css">
+ #ysearchmod {position:relative;padding:1em;}
+ #ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2
{position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/
+ #ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs
inside relative divs issue */
+ #ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs
inside relative divs issue */
+ #ysearchinput0, #ysearchinput1, #ysearchinput2
{position:absolute;width:100%;height:1.4em;}
+ #ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2
{position:absolute;top:1.7em;width:100%;}
+ #ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content,
#ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px
solid #404040;background:#fff;overflow:hidden;z-index:9050;}
+ #ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery
{position:absolute;right:10px;color:#808080;z-index:10;}
+ #ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow,
#ysearchcontainer2 .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul
{padding:5px 0;width:100%;}
+ #ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li
{padding:0 5px;cursor:default;white-space:nowrap;}
+ #ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}
+ #ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}
+ #ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}
+ #ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}
+</style>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
href="./">AutoComplete Widget</a> :: Flat Data Custom Script</h1>
+</div>
+
+<div id="bd">
+ <!-- Logger begins -->
+ <div id="logger"></div>
+ <!-- Logger ends -->
+
+ <!-- Content begins -->
+ <h3>DataSource</h3>
+ <p>This DataSource instance points to a custom PHP script that returns flat
+ demo data of recent search terms and number of results. The schema has
+ been defined to parse tab-delimited data rows that are separated by line
+ breaks. For maximum cache usage, the DataSource has been
+ configured to match query subsets in the cache, and the cache itself has
+ been turned up to 60 entries for fewer round trips to the server.
+ </p>
+
+ <h3>AutoComplete</h3>
+ <p>Three AutoComplete instances are created that all point the a single
+ DataSource for maximimum cache efficiency. Queries can be delimited using
+ the semi-colon (;) character. For demonstration purposes, each instance
+ decreases the query delay slightly, and each instance presents the return
+ data in the container in a slightly different way.</p>
+
+ <!-- AutoComplete begins -->
+ <div id="ysearchmod">
+ <form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
+ <h2>Yahoo! Search (1 sec query delay):</h2>
+ <div id="ysearchautocomplete0">
+ <input id="ysearchinput0">
+ <div id="ysearchcontainer0"></div>
+ </div>
+ <h2>Yahoo! Search (0.5 sec query delay):</h2>
+ <div id="ysearchautocomplete1">
+ <input id="ysearchinput1">
+ <div id="ysearchcontainer1"></div>
+ </div>
+ <h2>Yahoo! Search (0 sec query delay):</h2>
+ <div id="ysearchautocomplete2">
+ <input id="ysearchinput2">
+ <div id="ysearchcontainer2"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ #ysearchmod {position:relative;padding:1em;}
+ #ysearchautocomplete0, #ysearchautocomplete1, #ysearchautocomplete2
{position:relative;margin-bottom:1.5em;width:40%;}/* set width of widget here*/
+ #ysearchautocomplete0 {z-index:9001;} /* for IE z-index of absolute divs
inside relative divs issue */
+ #ysearchautocomplete1 {z-index:9000;} /* for IE z-index of absolute divs
inside relative divs issue */
+ #ysearchinput0, #ysearchinput1, #ysearchinput2
{position:absolute;width:100%;height:1.4em;}
+ #ysearchcontainer0, #ysearchcontainer1, #ysearchcontainer2
{position:absolute;top:1.7em;width:100%;}
+ #ysearchcontainer0 .yui-ac-content, #ysearchcontainer1 .yui-ac-content,
#ysearchcontainer2 .yui-ac-content {position:absolute;width:100%;border:1px
solid #404040;background:#fff;overflow:hidden;z-index:9050;}
+ #ysearchcontainer0 .ysearchquery, #ysearchcontainer1 .ysearchquery
{position:absolute;right:10px;color:#808080;z-index:10;}
+ #ysearchcontainer0 .yui-ac-shadow, #ysearchcontainer1 .yui-ac-shadow,
#ysearchcontainer2 .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #ysearchcontainer0 ul, #ysearchcontainer1 ul, #ysearchcontainer2 ul
{padding:5px 0;width:100%;}
+ #ysearchcontainer0 li, #ysearchcontainer1 li, #ysearchcontainer2 li
{padding:0 5px;cursor:default;white-space:nowrap;}
+ #ysearchcontainer0 li.yui-ac-highlight {background:#ff0;}
+ #ysearchcontainer1 li.yui-ac-highlight {background:#0ff;}
+ #ysearchcontainer2 li.yui-ac-highlight {background:#a0a0a0;}
+ #ysearchcontainer2 li.yui-ac-prehighlight {background:pink;}
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ <!-- AutoComplete begins -->
+ <div id="ysearchmod">
+ <form onsubmit="return YAHOO.example.ACFlatData.validateForm();">
+ <h2>Yahoo! Search (1 sec query delay):</h2>
+ <div id="ysearchautocomplete0">
+ <input id="ysearchinput0">
+ <div id="ysearchcontainer0"></div>
+ </div>
+ <h2>Yahoo! Search (0.5 sec query delay):</h2>
+ <div id="ysearchautocomplete1">
+ <input id="ysearchinput1">
+ <div id="ysearchcontainer1"></div>
+ </div>
+ <h2>Yahoo! Search (0 sec query delay):</h2>
+ <div id="ysearchautocomplete2">
+ <input id="ysearchinput2">
+ <div id="ysearchcontainer2"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ // Instantiate one data source and define schema as an array:
+ // ["Record Delimiter",
+ // "Field Delimiter"]
+ oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n", "\t"]);
+ oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
+ oACDS.maxCacheEntries = 60;
+ oACDS.queryMatchSubset = true;
+
+ // Instantiate first auto complete
+ var myInput = document.getElementById('ysearchinput0');
+ var myContainer = document.getElementById('ysearchcontainer0');
+ oAutoComp0 = new YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
+ oAutoComp0.delimChar = ";";
+ oAutoComp0.queryDelay = 1;
+ oAutoComp0.formatResult = function(oResultItem, sQuery) {
+ var sKey = oResultItem[0];
+ var nQuantity = oResultItem[1];
+ var sKeyQuery = sKey.substr(0, sQuery.length);
+ var sKeyRemainder = sKey.substr(sQuery.length);
+ var aMarkup = ["<div id='ysearchresult'><div
class='ysearchquery'>",
+ nQuantity,
+ "</div><span style='font-weight:bold'>",
+ sKeyQuery,
+ "</span>",
+ sKeyRemainder,
+ "</div>"];
+ return (aMarkup.join(""));
+ };
+
+ // Instantiate second auto complete
+ oAutoComp1 = new
YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', oACDS);
+ oAutoComp1.delimChar = ";";
+ oAutoComp1.formatResult = function(oResultItem, sQuery) {
+ var sKey = oResultItem[0];
+ var nQuantity = oResultItem[1];
+ var sKeyQuery = sKey.substr(0, sQuery.length);
+ var sKeyRemainder = sKey.substr(sQuery.length);
+ var aMarkup = ["<div class='ysearchresult'><div
class='ysearchquery'>",
+ nQuantity,
+ "</div><span style='color:red'>",
+ sKeyQuery,
+ "</span>",
+ sKeyRemainder,
+ "</div>"];
+ return (aMarkup.join(""));
+ };
+
+ // Instantiate third auto complete
+ oAutoComp2 = new
YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', oACDS);
+ oAutoComp2.delimChar = ";";
+ oAutoComp2.queryDelay = 0;
+ oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event-debug.js"></script>
+<script src="../../build/connection/connection.js"></script>
+<script src="../../build/animation/animation.js"></script>
+<script src="../../build/autocomplete/autocomplete-debug.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<script>
+YAHOO.example.ACFlatData = function(){
+ var mylogger;
+ var oACDS;
+ var oAutoComp0,oAutoComp1,oAutoComp2;
+
+ return {
+ init: function() {
+ //Logger
+ mylogger = new YAHOO.widget.LogReader("logger");
+
+ // Instantiate one data source and define schema as an array:
+ // ["Record Delimiter",
+ // "Field Delimiter"]
+ oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_flat.php", ["\n",
"\t"]);
+ oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
+ oACDS.maxCacheEntries = 60;
+ oACDS.queryMatchSubset = true;
+
+ // Instantiate first auto complete
+ var myInput = document.getElementById('ysearchinput0');
+ var myContainer = document.getElementById('ysearchcontainer0');
+ oAutoComp0 = new
YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
+ oAutoComp0.delimChar = ";";
+ oAutoComp0.queryDelay = 1;
+ oAutoComp0.formatResult = function(oResultItem, sQuery) {
+ var sKey = oResultItem[0];
+ var nQuantity = oResultItem[1];
+ var sKeyQuery = sKey.substr(0, sQuery.length);
+ var sKeyRemainder = sKey.substr(sQuery.length);
+ var aMarkup = ["<div id='ysearchresult'><div
class='ysearchquery'>",
+ nQuantity,
+ "</div><span style='font-weight:bold'>",
+ sKeyQuery,
+ "</span>",
+ sKeyRemainder,
+ "</div>"];
+ return (aMarkup.join(""));
+ };
+
+ // Instantiate second auto complete
+ oAutoComp1 = new
YAHOO.widget.AutoComplete('ysearchinput1','ysearchcontainer1', oACDS);
+ oAutoComp1.delimChar = ";";
+ oAutoComp1.formatResult = function(oResultItem, sQuery) {
+ var sKey = oResultItem[0];
+ var nQuantity = oResultItem[1];
+ var sKeyQuery = sKey.substr(0, sQuery.length);
+ var sKeyRemainder = sKey.substr(sQuery.length);
+ var aMarkup = ["<div class='ysearchresult'><div
class='ysearchquery'>",
+ nQuantity,
+ "</div><span style='color:red'>",
+ sKeyQuery,
+ "</span>",
+ sKeyRemainder,
+ "</div>"];
+ return (aMarkup.join(""));
+ };
+
+ // Instantiate third auto complete
+ oAutoComp2 = new
YAHOO.widget.AutoComplete('ysearchinput2','ysearchcontainer2', oACDS);
+ oAutoComp2.delimChar = ";";
+ oAutoComp2.queryDelay = 0;
+ oAutoComp2.prehighlightClassName = "yui-ac-prehighlight";
+ },
+
+ validateForm: function() {
+ // Validate form inputs here
+ return false;
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlatData.init);
+</script>
+</div>
+</body>
+</html>
Index: autocomplete/ysearch_json.html
===================================================================
RCS file: autocomplete/ysearch_json.html
diff -N autocomplete/ysearch_json.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/ysearch_json.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>AutoComplete Widget :: Basic JSON Implementation</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+
+<style type="text/css">
+ #ysearchmod {position:relative;text-align:center;z-index:9050;}
+ #ysearchautocomplete {position:relative;}
+ #ysearchinput {position:relative;width:20em;height:1.4em;}
+ #ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;}
+ #ysearchcontainer .yui-ac-content
{position:absolute;left:0;top:0;width:20em;border:1px solid
#404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
+ #ysearchcontainer .yui-ac-shadow
{position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
+ #ysearchcontainer ul {padding:5px 0;width:100%;}
+ #ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #ysearchcontainer li.yui-ac-highlight {background:#ff0;}
+ #ysearchsubmit {position:relative;}
+</style>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
href="./">AutoComplete Widget</a> :: JSON Data Yahoo! Search Web Services</h1>
+</div>
+
+<div id="bd">
+ <!-- AutoComplete begins -->
+ <div id="ysearchmod">
+ <form onsubmit="return YAHOO.example.ACJson.validateForm();">
+ <span>Yahoo! Search</span>
+ <span id="ysearchautocomplete">
+ <input id="ysearchinput">
+ <div id="ysearchcontainer"></div>
+ </span>
+ <input id="ysearchsubmit" type="submit" value="Submit Query">
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+
+ <!-- Logger begins -->
+ <div id="logger"></div>
+ <!-- Logger ends -->
+
+ <!-- Content begins -->
+ <h3>DataSource</h3>
+ <p>This DataSource instance points to Yahoo! Search Web Services, via a
+ simple PHP proxy. The DataSource schema is defined for JSON data. In order
+ to be compatible with the Yahoo! Search application, the DataSource's
+ queryMatchContains is set to true, and the scriptQueryAppend has been
+ defined to pass in additional arguments.</p>
+
+ <h3>AutoComplete</h3>
+ <p>This AutoComplete instance uses only default configuration values.</p>
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ #ysearchmod {position:relative;text-align:center;z-index:9050;}
+ #ysearchautocomplete {position:relative;}
+ #ysearchinput {position:relative;width:20em;height:1.4em;}
+ #ysearchcontainer {position:absolute;left:0;top:1.7em;display:inline;}
+ #ysearchcontainer .yui-ac-content
{position:absolute;left:0;top:0;width:20em;border:1px solid
#404040;background:#fff;overflow:hidden;text-align:left;z-index:9050;}
+ #ysearchcontainer .yui-ac-shadow
{position:absolute;left:0;top:0;margin:.3em;background:#a0a0a0;z-index:9049;}
+ #ysearchcontainer ul {padding:5px 0;width:100%;}
+ #ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #ysearchcontainer li.yui-ac-highlight {background:#ff0;}
+ #ysearchsubmit {position:relative;}
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ <!-- AutoComplete begins -->
+ <div id="ysearchmod">
+ <form>
+ <span>Yahoo! Search</span>
+ <span id="ysearchautocomplete">
+ <input id="ysearchinput">
+ <div id="ysearchcontainer"></div>
+ </span>
+ <input id="ysearchsubmit" type="submit" value="Submit Query">
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ // Instantiate data source and define schema as an array:
+ // ["Multi-depth.object.notation.to.find.a.single.result.item",
+ // "Query Key",
+ // "Additional Param Name 1",
+ // ...
+ // "Additional Param Name n"]
+ oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php",
["ResultSet.Result", "Title", "Summary", "Cache"]);
+ oACDS.queryMatchContains = true;
+ oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for YWS
+
+ // Instantiate auto complete
+ oAutoComp = new
YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ <!-- Content ends -->
+</div>
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event-debug.js"></script>
+<script src="../../build/connection/connection.js"></script>
+<script src="../../build/animation/animation.js"></script>
+<script src="./js/json.js"></script>
+<script src="../../build/autocomplete/autocomplete-debug.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<script>
+YAHOO.example.ACJson = function(){
+ var mylogger;
+ var oACDS;
+ var oAutoComp;
+
+ return {
+ init: function() {
+ // Logger
+ mylogger = new YAHOO.widget.LogReader("logger");
+
+ // Instantiate data source and define schema as an array:
+ // ["Multi-depth.object.notation.to.find.a.single.result.item",
+ // "Query Key",
+ // "Additional Param Name 1",
+ // ...
+ // "Additional Param Name n"]
+ oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php",
["ResultSet.Result", "Title", "Summary", "Cache"]);
+ oACDS.queryMatchContains = true;
+ oACDS.scriptQueryAppend = "output=json&results=100"; // Needed for
YWS
+
+ // Instantiate auto complete
+ oAutoComp = new
YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
+ },
+
+ validateForm: function() {
+ // Validate form inputs here
+ return false;
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACJson.init);
+</script>
+</body>
+</html>
Index: autocomplete/ysearch_xml.html
===================================================================
RCS file: autocomplete/ysearch_xml.html
diff -N autocomplete/ysearch_xml.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/ysearch_xml.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,155 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>AutoComplete Widget :: Basic XML Implementation</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+
+<style type="text/css">
+ #ysearchmod {position:relative;padding:1em;}
+ #ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width
of widget here*/
+ #ysearchinput {position:absolute;width:100%;height:1.4em;}
+ #ysearchcontainer {position:absolute;top:1.7em;width:100%;}
+ #ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px
solid #404040;background:#fff;overflow:hidden;z-index:9050;}
+ #ysearchcontainer .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #ysearchcontainer ul {padding:5px 0;width:100%;}
+ #ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #ysearchcontainer li.yui-ac-highlight {background:#ff0;}
+</style>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a
href="./">AutoComplete Widget</a> :: XML Data Yahoo! Search Web Services</h1>
+</div>
+
+<div id="bd">
+ <!-- Logger begins -->
+ <div id="logger"></div>
+ <!-- Logger ends -->
+
+ <!-- Content begins -->
+ <h3>DataSource</h3>
+ <p>This DataSource instance points to Yahoo! Search Web Services, via a
+ simple PHP proxy. The DataSource schema is defined for XML data. In order
+ to be compatible with the Yahoo! Search application, the DataSource's
+ queryMatchContains is set to true, and the scriptQueryAppend has been
+ defined to pass in additional arguments.</p>
+
+ <h3>AutoComplete</h3>
+ <p>This AutoComplete instance uses only default configuration values.</p>
+
+ <!-- AutoComplete begins -->
+ <div id="ysearchmod">
+ <form onsubmit="return YAHOO.example.ACXml.validateForm();">
+ <h2>Yahoo! Search</h2>
+ <div id="ysearchautocomplete">
+ <input id="ysearchinput">
+ <div id="ysearchcontainer"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ #ysearchmod {position:relative;padding:1em;}
+ #ysearchautocomplete {position:relative;margin:1em;width:40%;}/* set width
of widget here*/
+ #ysearchinput {position:absolute;width:100%;height:1.4em;}
+ #ysearchcontainer {position:absolute;top:1.7em;width:100%;}
+ #ysearchcontainer .yui-ac-content {position:absolute;width:100%;border:1px
solid #404040;background:#fff;overflow:hidden;z-index:9050;}
+ #ysearchcontainer .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #ysearchcontainer ul {padding:5px 0;width:100%;}
+ #ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #ysearchcontainer li.yui-ac-highlight {background:#ff0;}
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ <!-- AutoComplete begins -->
+ <div id="ysearchmod">
+ <form>
+ <h2>Yahoo! Search</h2>
+ <div id="ysearchautocomplete">
+ <input id="ysearchinput">
+ <div id="ysearchcontainer"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ // Instantiate data source and define schema as an array:
+ // ["Multi-depth.object.notation.to.find.a.single.result.item",
+ // "Query Key",
+ // "Additional Param Name 1",
+ // ...
+ // "Additional Param Name n"]
+ oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php", ["Result",
"Title"]);
+ oACDS.responseType = oACDS.TYPE_XML;
+ oACDS.queryMatchContains = true;
+ oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
+
+ // Instantiate auto complete
+ oAutoComp = new
YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event-debug.js"></script>
+<script src="../../build/connection/connection.js"></script>
+<script src="../../build/animation/animation.js"></script>
+<script src="../../build/autocomplete/autocomplete-debug.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<script>
+YAHOO.example.ACXml = function(){
+ var mylogger;
+ var oACDS;
+ var oAutoComp;
+
+ return {
+ init: function() {
+ //Logger
+ mylogger = new YAHOO.widget.LogReader("logger");
+
+ // Instantiate data source and define schema as an array:
+ // ["Multi-depth.object.notation.to.find.a.single.result.item",
+ // "Query Key",
+ // "Additional Param Name 1",
+ // ...
+ // "Additional Param Name n"]
+ oACDS = new YAHOO.widget.DS_XHR("./php/ysearch_proxy.php",
["Result", "Title"]);
+ oACDS.responseType = oACDS.TYPE_XML;
+ oACDS.queryMatchContains = true;
+ oACDS.scriptQueryAppend = "results=100"; // Needed for YWS
+
+ // Instantiate auto complete
+ oAutoComp = new
YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", oACDS);
+ },
+
+ validateForm: function() {
+ // Validate form inputs here
+ return false;
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,"load",YAHOO.example.ACXml.init);
+</script>
+</div>
+</body>
+</html>
Index: autocomplete/css/examples.css
===================================================================
RCS file: autocomplete/css/examples.css
diff -N autocomplete/css/examples.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ autocomplete/css/examples.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,23 @@
+ h1 {font-size:144%;}
+ h2 {font-size:129%;}
+ h3 {font-size:114%;}
+ h4 {font-size:100%;}
+ body {margin:1em;font-family:verdana,arial,sans-serif;}
+ ul {width:80%;}
+ dl {padding:1em;}
+
+ #hd {position:relative;}
+ #hd .logo
{width:65px;height:38px;vertical-align:middle;padding-right:10px;}
+
+ #bd h1,h2,h3,p{padding:.5em;}
+
+ #code {clear:both;}
+ #code .code {padding:1em;background:#DEDEDE;border:1px solid
black;font-size:92%;}
+
+ #logger
{position:relative;float:right;clear:both;margin:1em;width:30em;padding:.5em;}
+
+ #panel {width:40%;background:#DEDEDE;border:1px solid
#000;margin:2em;padding:1em;}
+ #panel div {margin-top:1em;padding-bottom:.5em;border-bottom:1px solid
#404040;}
+
+ #coder {position:absolute;background:#DEDEDE;border:1px solid
#000;margin:1em;padding:.5em;bottom:10px;right:10px;}
+ #output {position:relative;width:30em;height:15em;margin-top:1em;}
Index: autocomplete/img/logo.gif
===================================================================
RCS file: autocomplete/img/logo.gif
diff -N autocomplete/img/logo.gif
Binary files /dev/null and /tmp/cvsQbXc7Y differ
Index: calendar/index.html
===================================================================
RCS file: calendar/index.html
diff -N calendar/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ calendar/index.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,34 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+
+<head>
+<title>Yahoo! UI Library - Calendar</title>
+<link rel="stylesheet" type="text/css" media="screen" href="css/examples.css">
+</head>
+<body style="height:100%">
+<img src="img/logo.gif" style="position:absolute;top:5px;left:5px" />
+
+<div id="pageTitle">
+ <h3>Calendar</h3>
+</div>
+
+<div id="content">
+ <p><a href="default/index.html">Default Calendar</a></p>
+ <p><a href="default_2up/index.html">Dual Calendars</a></p>
+
+ <p><a href="intl_germany/index.html">German Calendar</a></p>
+ <p><a href="intl_japan/index.html">Japanese Calendar</a></p>
+
+ <p><a href="multi_select/index.html">Multi-Select Calendar</a></p>
+
+ <p><a href="multi_select_2up/index.html">Multi-Select 2-up
Calendar</a></p>
+
+ <p><a href="min_max_date/index.html">Minimum/Maximum Selectable Date
Calendar</a></p>
+ <p><a href="renderer/index.html">Renderer Example Calendar</a></p>
+ <p><a href="restriction/index.html">Date-Restricted Calendar</a></p>
+ <p><a href="row_highlight/index.html">Row Highlight Calendar</a></p>
+</div>
+
+
+</body>
+</html>
Index: calendar/css/examples.css
===================================================================
RCS file: calendar/css/examples.css
diff -N calendar/css/examples.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ calendar/css/examples.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,70 @@
+html, body {
+ margin:5px;
+ color: #333;
+}
+
+h1,h2,h3,h4,h5,h6 {
+ font-family: palatino, georgia, "Times New Roman", serif;
+}
+
+h3 {
+ color:#666;
+ margin-top:8px;
+ margin-bottom:8px;
+}
+
+h4 {
+ margin-top:0px;
+ margin-bottom:10px;
+}
+
+#logo {
+ position:absolute;
+ left:5px;
+ top:5px;
+}
+
+
+#pageTitle {
+ margin-left:80px;
+ height:38px;
+ clear:both;
+}
+
+xmp {
+ border:1px solid #CCC;
+ background-color:#F7F7F7;
+ padding:5px;
+ font-size:12px;
+}
+
+.column.left {
+ float:left;
+ display:inline;
+ margin-left:80px;
+ width:500px;
+}
+
+.column.right {
+ text-align:center;
+ background-color:#C2C2D7;
+ float:left;
+ margin-left:10px;
+ width:240px;
+ padding:50px 0px;
+ height:425px;
+
+}
+
+.column p {
+ margin:10px 0px;
+ font: normal 11px verdana, sans-serif;
+ line-height:15px;
+}
+
+a.navLink {
+ padding:5px;
+ color:#000;
+ text-decoration:none;
+ font:14px sans-serif;
+}
\ No newline at end of file
Index: calendar/img/logo.gif
===================================================================
RCS file: calendar/img/logo.gif
diff -N calendar/img/logo.gif
Binary files /dev/null and /tmp/cvsxyNNZ2 differ
Index: calendar/img/pdate.gif
===================================================================
RCS file: calendar/img/pdate.gif
diff -N calendar/img/pdate.gif
Binary files /dev/null and /tmp/cvswEND10 differ
Index: connection/abort.html
===================================================================
RCS file: connection/abort.html
diff -N connection/abort.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ connection/abort.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,112 @@
+<html>
+ <head>
+ <script src="../../build/yahoo/yahoo-min.js"></script>
+ <script src="../../build/connection/connection-min.js"></script>
+ <link rel="stylesheet" type="text/css"
href="../../docs/assets/dpSyntaxHighlighter.css" />
+ <style>
+ fieldset {
+ width: 500px;
+ }
+ </style>
+ </head>
+<body>
+
+<h1> Connection Manager Transaction Timeout</h1>
+<p>
+The following code example provides a step-by-step approach to creating a
transaction timeout.
+</p>
+
+<h3>Source file and dependencies</h3>
+<p>Load the YAHOO namespace and connection manager source file:</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1">
+<script src="yahoo.js"></script>
+<script src="connection.js"></script>
+</textarea></pre>
+
+<h3>The Callback Object</h3>
+<p>The callback object includes a new property: timeout. To enable a
transaction to automatically timeout, the timeout property must be defined wih
a value in millseconds. This example defines timeout with a value of
5000(milliseconds). If the transaction is not complete by 5000ms, it will be
aborted.</p>
+<pre>
+<textarea name="code" class="JScript" cols="60" rows="1">
+var handleSuccess = function(o){
+ if(o.responseText !== undefined){
+ div.innerHTML = "Transaction id: " + o.tId;
+ div.innerHTML += "HTTP status: " + o.status;
+ div.innerHTML += "Server response: " + o.responseText;
+ div.innerHTML += "Argument object: property foo = " +
o.argument.foo +
+ "and property bar = " +
o.argument.bar;
+ }
+}
+
+var handleFailure = function(o){
+ div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
+ div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
+ div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
+}
+
+var callback =
+{
+ success:handleSuccess,
+ failure: handleFailure,
+ argument: { foo:"foo", bar:"bar" },
+ timeout: 5000
+};
+</textarea>
+</pre>
+
+<h3>Initiate the Transaction</h3>
+<p>
+Call YAHOO.util.Connect.asyncRequest to send the request to sync.php. The PHP
file will return a string message after a random delay of 0 to 10 seconds, if
the transaction was not aborted. If the transaction was successfully aborted,
the response object's status property will report -1 and the statusText
property will report "transaction aborted".
+</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1">
+var sUrl = "php/sync.php";
+var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
+</textarea></pre>
+
+<div id="container"></div>
+<script>
+
+var div = document.getElementById('container');
+
+var handleSuccess = function(o){
+ if(o.responseText !== undefined){
+ div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
+ div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
+ div.innerHTML += "<li>Status code message: " + o.statusText +
"</li>";
+ div.innerHTML += "<li>HTTP headers: <ul>" +
o.getAllResponseHeaders + "</ul></li>";
+ div.innerHTML += "<li>Server response: " + o.responseText +
"</li>";
+ div.innerHTML += "<li>Argument object: Object ( [foo] => " +
o.argument.foo +
+ " [bar] => " + o.argument.bar
+" )</li>";
+ }
+}
+
+var handleFailure = function(o){
+ div.innerHTML += "<li>Transaction id: " + o.tId + "</li>";
+ div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
+ div.innerHTML += "<li>Status code message: " + o.statusText + "</li>";
+}
+
+var callback =
+{
+ success: handleSuccess,
+ failure: handleFailure,
+ argument: { foo:"foo", bar:"bar" },
+ timeout: 5000
+};
+
+var sUrl = 'php/sync.php';
+
+function makeRequest(){
+ var obj1 = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
+ var obj2 = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
+}
+
+</script>
+<form><input type="button" value="Create Two Transactions"
onClick="makeRequest();"></form>
+<script src="../../docs/assets/dpSyntaxHighlighter.js"></script>
+<script language="javascript">
+dp.SyntaxHighlighter.HighlightAll('code');
+</script>
+</body>
+</html>
Index: connection/get.html
===================================================================
RCS file: connection/get.html
diff -N connection/get.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ connection/get.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,123 @@
+<html>
+ <head>
+ <script src = "../../build/yahoo/yahoo-min.js" ></script>
+ <script src = "../../build/connection/connection-min.js" ></script>
+ <link rel="stylesheet" type="text/css"
href="../../docs/assets/dpSyntaxHighlighter.css" />
+ </head>
+<body>
+<h1> Connection Manager GET Transaction</h1>
+<p>
+To construct a GET transaction using the Connection Manager, you will need to
construct a querystring of key-value pairs and append it to the URL.
+The following code example provides a step-by-step approach to creating a
simple GET transaction.
+</p>
+
+<h3>Source file and dependencies</h3>
+<p>Load the YAHOO namespace and connection manager source file:</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1"><script
src="yahoo.js"></script>
+<script src="connection.js"></script></textarea></pre>
+
+<h3>Assemble the Querystring</h3>
+<p>Construct a querystring with two key-value pairs of <em>username =
anonymous</em> and <em>userid = 0</em>:</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1"> /*
+ *
+ * Create a querystring with example key-value pairs of
+ * username and userid. Remember to encode the querystring
+ * if and when the string contains special characters.
+ *
+ */
+ var sUrl = "php/get.php?username=anonymous&userid=0";</textarea></pre>
+
+<h3>The Callback Object</h3>
+<p>Create a callback object to handle the response, and pass an object literal
to both success and failure as the argument.</p>
+<pre><textarea name="code" class="JScript" cols="60" rows="1">var
handleSuccess = function(o){
+
+ function parseHeaders(){
+ var allHeaders = headerStr.split("\n");
+ var headers;
+ for(var i=0; i < headers.length; i++){
+ var delimitPos = header[i].indexOf(':');
+ if(delimitPos != -1){
+ headers[i] = "<p>" +
+ headers[i].substring(0,delimitPos) + ":"+
+ headers[i].substring(delimitPos+1) +
"</p>";
+ }
+ return headers;
+ }
+
+ if(o.responseText !== undefined){
+ div.innerHTML = "Transaction id: " + o.tId;
+ div.innerHTML += "HTTP status: " + o.status;
+ div.innerHTML += "Status code message: " + o.statusText;
+ div.innerHTML += "HTTP headers: " + parseHeaders();
+ div.innerHTML += "Server response: " + o.responseText;
+ div.innerHTML += "Argument object: property foo = " +
o.argument.foo +
+ "and property bar = " +
o.argument.bar;
+ }
+}
+
+var callback =
+{
+ success:handleSuccess,
+ failure: handleFailure
+ argument: { foo:"foo", bar:"bar" }
+};</textarea></pre>
+
+<h3>Initiate the GET Transaction</h3>
+<p>Call YAHOO.util.Connect.asyncRequest to send the request to get.php,
+and the PHP file will return the output of $_POST via
<strong>print_r()</strong>.
+The handleSuccess callback will print the response object's properties,
including
+the server response data.
+</p>
+<p>
+Note: Caching and GET idempotency.
+</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1">var request =
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);</textarea></pre>
+
+<div id="container"></div>
+<script>
+var div = document.getElementById('container');
+
+var handleSuccess = function(o){
+ if(o.responseText !== undefined){
+ div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
+ div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
+ div.innerHTML += "<li>Status code message: " + o.statusText +
"</li>";
+ div.innerHTML += "<li>HTTP headers: <ul>" +
o.getAllResponseHeaders + "</ul></li>";
+ div.innerHTML += "<li>Server response: " + o.responseText +
"</li>";
+ div.innerHTML += "<li>Argument object: Object ( [foo] => " +
o.argument.foo +
+ " [bar] => " + o.argument.bar
+" )</li>";
+ }
+}
+
+var handleFailure = function(o){
+ if(o.responseText !== undefined){
+ div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
+ div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
+ div.innerHTML += "<li>Status code message: " + o.statusText +
"</li>";
+ }
+}
+
+var callback =
+{
+ success:handleSuccess,
+ failure:handleFailure,
+ argument: { foo:"foo", bar:"bar" }
+};
+
+var sUrl = "php/get.php?username=anonymous&userid=0";
+
+function makeRequest(){
+ var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
+}
+</script>
+<form><input type="button" value="Send a GET Request"
onClick="makeRequest();"></form>
+
+<script src="../../docs/assets/dpSyntaxHighlighter.js"></script>
+<script language="javascript">
+dp.SyntaxHighlighter.HighlightAll('code');
+</script>
+</body>
+</html>
Index: connection/index.html
===================================================================
RCS file: connection/index.html
diff -N connection/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ connection/index.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,23 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>YUI Library - Connection Manager</title>
+<link rel="stylesheet" type="text/css" media="screen"
href="../../docs/assets/examples.css">
+</head>
+<body>
+<div id="doc">
+ <div id="hd">
+ <img src="../../docs/assets/logo.gif">
+ <h1>YUI Library - Connection Manager</h1>
+ </div>
+ <div id="bd">
+ <ul id="examples">
+ <li><a href="get.html">GET Transaction</a></li>
+ <li><a href="post.html">POST Transaction</a></li>
+ <li><a href="weather.html">Retrieving a Y! Weather RSS Feed</a></li>
+ <li><a href="abort.html">Transaction timeout</a></li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
Index: connection/post.html
===================================================================
RCS file: connection/post.html
diff -N connection/post.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ connection/post.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,102 @@
+<html>
+ <head>
+ <script src = "../../build/yahoo/yahoo-min.js" ></script>
+ <script src = "../../build/connection/connection-min.js" ></script>
+ <link rel="stylesheet" type="text/css"
href="../../docs/assets/dpSyntaxHighlighter.css" />
+ </head>
+<body>
+<h1> Connection Manager POST Transaction</h1>
+<p>
+To construct a POST transaction using the Connection Manager, you will need to
construct a data string as the POST message. The following code example
provides a step-by-step approach to creating a simple POST transaction.
+</p>
+
+<h3>Source file and dependencies</h3>
+<p>Load the YAHOO namespace and connection manager source file:</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1"><script
src="yahoo.js"></script>
+<script src="connection.js"></script></textarea></pre>
+
+<h3>Assemble the POST message</h3>
+<p>Construct an example of key-value string of <em>username = anonymous</em>
and <em>userid = 0</em>:</p>
+<pre><textarea name="code" class="JScript" cols="60" rows="1">/*
+* Remember to encode the key-value string if and when
+* the string contains special characters.
+*/
+var postData = "username=anonymous&userid=0";
+</textarea></pre>
+<h3>The Callback Object</h3>
+<p>Create a callback object to handle the response and pass an array of values
to success and failure as the argument.</p>
+<pre>
+<pre><textarea name="code" class="JScript" cols="60" rows="1">var
handleSuccess = function(o){
+
+ if(o.responseText !== undefined){
+ div.innerHTML = "Transaction id: " + o.tId;
+ div.innerHTML += "HTTP status: " + o.status;
+ div.innerHTML += "Status code message: " + o.statusText;
+ div.innerHTML += "<li>HTTP headers: <ul>" +
o.getAllResponseHeaders + "</ul></li>";
+ div.innerHTML += "PHP response: " + o.responseText;
+ div.innerHTML += "Argument object: " + o.argument;
+ }
+}
+
+var callback =
+{
+ success:handleSuccess,
+ failure: handleFailure,
+ argument: ['foo','bar']
+};
+</textarea></pre></pre>
+
+<h3>Initiate the POST Transaction</h3>
+<p>
+Call YAHOO.util.Connect.asyncRequest to send the request to post.php, and the
PHP file will return the a readable output of $_POST via
<strong>print_r()</strong>. The handleSuccess callback will print the response
object's properties, including the server response data.
+</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1">var request =
YAHOO.util.Connect.asyncRequest('POST', sUrl, callback, postData);
+</textarea></pre>
+
+<div id="container"></div>
+<script>
+var div = document.getElementById('container');
+
+var handleSuccess = function(o){
+ if(o.responseText !== undefined){
+ div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
+ div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
+ div.innerHTML += "<li>Status code message: " + o.statusText +
"</li>";
+ div.innerHTML += "<li>HTTP headers received: <ul>" +
o.getAllResponseHeaders + "</ul></li>";
+ div.innerHTML += "<li>PHP response: " + o.responseText +
"</li>";
+ div.innerHTML += "<li>Argument object: Array ([0] => " +
o.argument[0] +
+ " [1] => " + o.argument[1] + "
)</li>";
+ }
+};
+
+var handleFailure = function(o){
+ if(o.responseText !== undefined){
+ div.innerHTML = "<li>Transaction id: " + o.tId + "</li>";
+ div.innerHTML += "<li>HTTP status: " + o.status + "</li>";
+ div.innerHTML += "<li>Status code message: " + o.statusText +
"</li>";
+ }
+};
+
+var callback =
+{
+ success:handleSuccess,
+ failure:handleFailure,
+ argument:['foo','bar']
+};
+
+var sUrl = "php/post.php";
+var postData = "username=anonymous&userid=0";
+
+function makeRequest(){
+ var request = YAHOO.util.Connect.asyncRequest('POST', sUrl, callback,
postData);
+}
+</script>
+<form><input type="button" value="Send a POST Request"
onClick="makeRequest();"></form>
+<script src="../../docs/assets/dpSyntaxHighlighter.js"></script>
+<script language="javascript">
+dp.SyntaxHighlighter.HighlightAll('code');
+</script>
+</body>
+</html>
Index: connection/weather.html
===================================================================
RCS file: connection/weather.html
diff -N connection/weather.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ connection/weather.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,155 @@
+<html>
+<head>
+ <script src = "../../build/yahoo/yahoo-min.js" ></script>
+ <script src = "../../build/connection/connection-min.js" ></script>
+ <link rel="stylesheet" type="text/css"
href="../../docs/assets/dpSyntaxHighlighter.css" />
+ <style type="text/css">
+ #weatherModule {
+ height:200px;
+ }
+ </style>
+</head>
+<body>
+<h1> Retrieving a Y! Weather RSS Feed</h1>
+<p>
+This example demonstrates how to use the Connection Manager and a PHP proxy
(to work around XMLHttpRequest's same-domain policy) to retrieve an XML
document from the <a href="http://developer.yahoo.com/weather/";>Yahoo! Weather
RSS</a> webservice at http://xml.weather.yahoo.com/forecastrss.</p>
+
+<h3>Source file and dependencies</h3>
+<p>Load the YAHOO namespace and Connection Manager source files using the
<script> tag: </p>
+<textarea name="code" class="JScript" cols="60" rows="1">
+ <script src="yahoo.js">
+ <script src="connection.js">
+</textarea>
+
+<h3>Callback Object and the Weather RSS</h3>
+<p>Yahoo! Weather RSS will return an XML document if the transaction is
successful. The following callback object with success and failure handlers is
used to process the response.</p>
+<textarea name="code" class="JScript" cols="60" rows="1">
+// This is the response display container
+var div = document.getElementById('weatherModule');
+// This is a reference to the HTML form.
+var oForm = document.getElementById('wForm');
+
+/*
+ * This method will traverse the response XML document and build a
+ * simple HTML module comprised of data from the following tags:
+ *
+ * Data in the first <title> tag in the document.
+ * Data in the first <lastBuildDate> tag in the document.
+ * HTML from the second <description> tag in the document.
+ *
+ */
+function successHandler(o){
+ var root = o.responseXML.documentElement;
+ var oTitle =
root.getElementsByTagName('description')[0].firstChild.nodeValue;
+ var oDateTime =
root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
+ var descriptionNode =
root.getElementsByTagName('description')[1].firstChild.nodeValue;
+
+ // Format and display results in the response container.
+ div.innerHTML = "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" +
descriptionNode;
+}
+
+/*
+ *
+ * This is a simple failure handler that will display
+ * the HTTP status code and status message if the resource
+ * returns a non-2xx code.
+ *
+ */
+function failureHandler(o){
+ div.innerHTML = o.status + " " + o.statusText;
+}
+
+var oCallback = {
+ success: successHandler,
+ failure: failureHandler
+}
+</textarea>
+
+<h3>Assemble the Querystring and Initiate the Transaction</h3>
+<p>The Yahoo! Weather RSS feed requires a simple HTTP GET request, with a base
URL and a querystring whose parameters are defined by the webservice's API. In
this example, we will use the following parameters:</p>
+<ul>
+ <li>p: location as U.S. Zip Code or Location ID</li>
+ <li>u: temperature units</li>
+</ul>
+
+<p>The following are some example location IDs (do not include the city
name):</p>
+<ul>
+ <li>Beijing: <em>CHXX0008</em></li>
+ <li>Helsinki: <em>FIXX0002</em></li>
+ <li>London: <em>UKXX0085</em></li>
+ <li>Moscow: <em>RSXX0063</em></li>
+ <li>Munich: <em>GMXX0087</em></li>
+ <li>Paris: <em>FRXX0076</em></li>
+ <li>Riyadh: <em>SAXX0017</em></li>
+ <li>Tokyo: <em>JAXX0085</em></li>
+</ul>
+<p>(<strong>Note:</strong> For more details on the Y! Weather RSS feed and
other location IDs, please visit <a
href="http://developer.yahoo.com/weather/";>http://developer.yahoo.com/weather/index.html</a>,
where you'll find thorough documentation of this webservice and its API.)</p>
+
+<p>Method getModule retrieves the input values for location and temperature
and creates a querystring.</p>
+<textarea name="code" class="JScript" cols="60" rows="1">
+function getModule(){
+
+ // retrieve the field values for the zip code
+ // input and the unit input.
+ var sLocation = oForm.elements['zip'].value;
+ var sUnit = oForm.elements['unit'].value;
+
+ // entryPoint is the base URL
+ var entryPoint = 'php/weather.php';
+
+ // queryString is the key-value pairs of zip and unit.
+ var queryString = encodeURI('?p=' + sLocation + '&' + 'u=' + sUnit);
+ var sUrl = entryPoint + queryString;
+
+ // Initiate the HTTP GET request.
+ var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, oCallback);
+}
+</textarea>
+
+<form id="wForm">
+<fieldset>
+ <label>Zip Code or Location ID</label> <input type="text" name="zip"
value="94089">
+ <p>Please enter a U.S. Zip Code or a location ID to get the current
temperature. The default is Zip Code 94089 for Sunnyvale, California; its
location ID is: USCA1116.</p>
+</fieldset>
+<fieldset>
+<label>Unit</label> <input type="text" name="unit" length="1" maxlength="1">
+<p>Enter *F* for Fahrenheit or *C* for Celsius temperature unit.
+</fieldset>
+<input type="button" value="Get Weather RSS" onClick="getModule()">
+</form>
+<div id="weatherModule"></div>
+<script>
+var div = document.getElementById('weatherModule');
+var oForm = document.getElementById('wForm');
+
+function successHandler(o){
+ var root = o.responseXML.documentElement;
+ var oTitle =
root.getElementsByTagName('description')[0].firstChild.nodeValue;
+ var oDateTime =
root.getElementsByTagName('lastBuildDate')[0].firstChild.nodeValue;
+ var descriptionNode =
root.getElementsByTagName('description')[1].firstChild.nodeValue;
+
+ div.innerHTML = "<p>" + oTitle + "</p>" + "<p>" + oDateTime + "</p>" +
descriptionNode;
+}
+
+function failureHandler(o){
+ div.innerHTML = o.status + " " + o.statusText;
+}
+
+function getModule(){
+ var iZip = oForm.elements['zip'].value;
+ var sUnit = oForm.elements['unit'].value;
+ var entryPoint = 'php/weather.php';
+ var queryString = encodeURI('?p=' + iZip + '&' + 'u=' + sUnit);
+ var sUrl = entryPoint + queryString;
+ var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, {
success:successHandler });
+}
+
+</script>
+
+<script src="../../docs/assets/dpSyntaxHighlighter.js"></script>
+<script language="javascript">
+dp.SyntaxHighlighter.HighlightAll('code');
+</script>
+
+</body>
+</html>
Index: container/dialog.html
===================================================================
RCS file: container/dialog.html
diff -N container/dialog.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/dialog.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,130 @@
+<!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">
+<title>YAHOO.widget.Dialog</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+<script type="text/javascript" src="../../build/connection/connection.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+
+<script language="javascript">
+ YAHOO.namespace('example.container');
+
+ function submitCallback(obj) {
+ var response = obj.responseText;
+ response = response.split("<!")[0];
+ document.getElementById("resp").innerHTML = response;
+ eval(response);
+ }
+
+ function submitFailure(obj) {
+ alert("Submission failed: " + obj.status);
+ }
+
+ function init() {
+ var handleCancel = function() {
+ this.cancel();
+ }
+ var handleSubmit = function() {
+ this.submit();
+ }
+
+
+ YAHOO.example.container.dlg = new YAHOO.widget.Dialog("dlg", {
modal:true, visible:false, width:"350px", fixedcenter:true,
constraintoviewport:true, draggable:true });
+
+ YAHOO.example.container.dlg.callback.success = submitCallback;
+ YAHOO.example.container.dlg.callback.failure = submitFailure;
+
+ var listeners = new YAHOO.util.KeyListener(document, { keys :
27 }, {fn:handleCancel,scope:YAHOO.example.container.dlg,correctScope:true} );
+
+ YAHOO.example.container.dlg.cfg.queueProperty("keylisteners",
listeners);
+
+ YAHOO.example.container.dlg.cfg.queueProperty("buttons", [ {
text:"Submit", handler:handleSubmit } ]);
+
+ var handleManual = function(type, args, obj) {
+ alert("Manual submission of " + this.id + " detected");
+ }
+
+
YAHOO.example.container.dlg.manualSubmitEvent.subscribe(handleManual,
YAHOO.example.container.dlg, true);
+ YAHOO.example.container.dlg.render();
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+
+</script>
+</head>
+<body>
+
+ <div class="box">
+ <div class="hd">
+ <h1>Dialog Example</h1>
+ </div>
+ <div class="bd">
+ <p>Dialog is a Panel implementation that is used for
submitting forms. You can submit the form in three different ways:
asynchronously, using the Connection utility, form-based submission, or you can
handle the submission manually.</p>
+
+ <p>The URLs for both asynchronous and form-based
submission are taken from the form's action property.</p>
+
+ <p><button
onclick="YAHOO.example.container.dlg.show()">Enter your information</button>
+ <div class="radioline first"><input
type="radio" name="async" id="asyncon" checked
onclick="YAHOO.example.container.dlg.cfg.setProperty('postmethod','async')"/><label
for="asyncon">Submit asynchronously (Dynamic XmlHttpRequest, POST
only)</label></div>
+ <div class="radioline"><input type="radio"
name="async" id="asyncoff"
onclick="YAHOO.example.container.dlg.cfg.setProperty('postmethod','form')"
/><label for="asyncoff">Standard form submit (GET or POST)</label></div>
+ <div class="radioline last"><input type="radio"
name="async" id="asyncoff"
onclick="YAHOO.example.container.dlg.cfg.setProperty('postmethod','none')"
/><label for="asyncoff">Do nothing and handle posts manually</label></div>
+ <select>
+ <option>This is a <select> element,
helpul for testing the IFRAME shim</option>
+ </select>
+ </p>
+ </div>
+ <div class="ft"></div>
+ </div>
+
+ <div class="box" style="margin-top:25px">
+ <div class="hd">
+ <h2>Server Response</h1>
+ </div>
+
+ <div class="bd">
+ <h3>Post Response Text</h2>
+ <p id="resp">[ Server Response will be displayed here
]</p>
+ </div>
+ </div>
+
+ <div id="dlg">
+ <div class="hd">Please enter your information</div>
+ <div class="bd">
+ <form name="dlgForm" method="POST"
action="php/post.php">
+ <p>Please enter your personal contact information:</p>
+ <label for="firstname">First
Name:</label><input type="textbox" name="firstname" /><br/>
+ <label for="lastname">Last
Name:</label><input type="textbox" name="lastname" /><br/>
+ <label
for="email">E-mail:</label><input type="textbox" name="email" /><br/>
+ <label
for="state[]">State:</label><select multiple name="state[]" ><option
value="California">California</option><option value="New Jersey">New
Jersey</option><option value="New York">New York</option></select><br/>
+
+ <label for="radiobuttons">Radio
buttons:</label>
+ <input type="radio"
name="radiobuttons[]" value="1" checked/> 1
+ <input type="radio"
name="radiobuttons[]" value="2" /> 2<br/>
+
+ <label for="check">Single
checkbox:</label><input type="checkbox" name="check" value="1" /> 1<br/>
+
+ <label for="textarea">Text
area:</label><textarea name="textarea"></textarea><br/>
+
+ <label for="cbarray">Multi
checkbox:</label>
+ <input type="checkbox" name="cbarray[]"
value="1" /> 1
+ <input type="checkbox" name="cbarray[]"
value="2" /> 2
+ </div>
+ </form>
+ </div>
+ </div>
+
+
+
+</body>
+</html>
Index: container/index.html
===================================================================
RCS file: container/index.html
diff -N container/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/index.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,61 @@
+<!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">
+<title>YAHOO.widget Container Package</title>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<style>
+li {
+ margin-bottom:10px;
+}
+li.b {
+ margin-left:10px;
+}
+li.c {
+ margin-left:20px;
+}
+li.d {
+ margin-left:30px;
+}
+li.e {
+ margin-left:40px;
+}
+</style>
+
+</head>
+<body>
+
+ <div class="box">
+ <div class="hd">
+ <h1>Container Functional Examples</h1>
+ </div>
+ <div class="bd">
+ <ul>
+ <li class="a"><a
href="module.html">YAHOO.widget.Module</a></li>
+ <li class="b"><a
href="overlay.html">YAHOO.widget.Overlay</a></li>
+ <li class="c"><a
href="tooltip.html">YAHOO.widget.Tooltip</a></li>
+
+ <li class="c"><a
href="panel.html">YAHOO.widget.Panel</a></li>
+ <li class="d"><a
href="panel-wait.html">Panel example: Wait Panel</a></li>
+ <li class="d"><a
href="panel-xp.html">Panel example: XP Panel</a></li>
+ <li class="d"><a
href="panel-aqua.html">Panel example: Aqua Panel</a></li>
+ <li class="d"><a
href="panel-photo.html">Panel example: PhotoBox</a></li>
+
+ <li class="d"><a
href="dialog.html">YAHOO.widget.Dialog</a></li>
+ <li
class="e"><a href="simpledialog.html">YAHOO.widget.SimpleDialog</a></li>
+ </ul>
+ <ul>
+ <li class="a"><a
href="keylistener.html">YAHOO.util.KeyListener</a></li>
+ <li class="a"><a
href="overlay-manager.html">YAHOO.util.OverlayManager</a></li>
+ </ul>
+ </div>
+
+ <div class="ft"></div>
+ </div>
+
+
+</body>
+</html>
Index: container/keylistener.html
===================================================================
RCS file: container/keylistener.html
diff -N container/keylistener.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/keylistener.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,62 @@
+<!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">
+<title>YAHOO.util.KeyListener</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+<style>
+</style>
+
+<script language="javascript">
+
+ YAHOO.namespace("example.keylistener");
+
+ function init() {
+ var debug = document.getElementById("debug");
+
+ document.documentElement.focus();
+ document.body.focus();
+
+ var handler = function(type, args, obj) {
+ debug.appendChild(document.createTextNode("key press
handled: " + args[0]));
+ debug.appendChild(document.createElement("BR"));
+ }
+
+ YAHOO.example.keylistener.kpl1 = new
YAHOO.util.KeyListener(document, { keys:[49,50,51] }, { fn:handler } );
+ YAHOO.example.keylistener.kpl1.enable();
+
+ YAHOO.example.keylistener.kpl2 = new
YAHOO.util.KeyListener(document, { shift:true, alt:true, keys:[52,53,54,55] },
handler );
+ YAHOO.example.keylistener.kpl2.enable();
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+
+</script>
+
+</head>
+<body>
+ <div class="box">
+ <div class="hd">
+ <h1>KeyListener Example</h1>
+ </div>
+ <div class="bd">
+ <p>KeyListener takes three arguments: the element reference or
id to attach the listener to, an object literal that contains the details about
the key(s) to listen for, and the handler (represented either as a function, or
a literal containing arguments for the handler function, the scope, and a scope
correction flag).</p>
+ <p>KeyListeners are enabled and disabled by calling the
enable() and disable() functions on a listener. The DOM events for keys are
dynamically attached and detached upon enable and disable.
+ </p>
+ <p>Press 1, 2, 3 to trigger KeyListener1.<button
onclick="YAHOO.example.keylistener.kpl1.disable()">disable kpl1</button><button
onclick="YAHOO.example.keylistener.kpl1.enable()">enable kpl1</button></p>
+ <p>Press Alt+Shift+(4, 5, 6, or 7) to trigger
KeyListener2.<button onclick="YAHOO.example.keylistener.kpl2.disable()">disable
kpl2</button><button onclick="YAHOO.example.keylistener.kpl2.enable()">enable
kpl2</button></p>
+ </div>
+ <div id="debug">
+ </div>
+ </div>
+</body>
+</html>
Index: container/module.html
===================================================================
RCS file: container/module.html
diff -N container/module.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/module.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,220 @@
+<!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">
+<title>YAHOO.widget.Module</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+<link rel="stylesheet" type="text/css" href="css/module.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+<style>
+
+</style>
+
+<script language="javascript">
+
+ YAHOO.namespace("example.module");
+
+ YAHOO.example.module.modules = [];
+
+ function init() {
+
+ //
*****************************************************************
+ // This represents a Overlay already on the page
+ //
*****************************************************************
+
+ YAHOO.example.module.mPredefined = new
YAHOO.widget.Module("mPredefined", {visible:true} );
+ YAHOO.example.module.mPredefined.render();
+
+ //
*****************************************************************
+ // This represents an Overlay completely pre-constructed from
code
+ //
*****************************************************************
+
+ YAHOO.example.module.mDynamic = new
YAHOO.widget.Module("mDynamic", {visible:true} );
+
+ YAHOO.example.module.mDynamic.setHeader("Completely
dynamic overlay");
+ YAHOO.example.module.mDynamic.setBody("I was created
completely at runtime!");
+
+
YAHOO.example.module.mDynamic.render(document.getElementById("mainBody"));
+
+ //
*****************************************************************
+ // This represents a overlay with a container, but no body
content defined
+ //
*****************************************************************
+ YAHOO.example.module.mChangedAtRuntime = new
YAHOO.widget.Module("mChangedAtRuntime", {visible:true} );
+
+ YAHOO.example.module.mChangedAtRuntime.setHeader("I was
changed at runtime!");
+ YAHOO.example.module.mChangedAtRuntime.setBody("<b>My
original markup text was replaced at runtime with this text.</b>");
+ YAHOO.example.module.mChangedAtRuntime.setFooter("The
footer was changed too!");
+
+ YAHOO.example.module.mChangedAtRuntime.render();
+ //
*****************************************************************
+
+ YAHOO.example.module.modules["mPredefined"] =
YAHOO.example.module.mPredefined;
+ YAHOO.example.module.modules["mDynamic"] =
YAHOO.example.module.mDynamic;
+ YAHOO.example.module.modules["mChangedAtRuntime"] =
YAHOO.example.module.mChangedAtRuntime;
+
+
+ var btnShow = document.getElementById("btnShow");
+ btnShow.onclick = showAll;
+
+ var btnHide = document.getElementById("btnHide");
+ btnHide.onclick = hideAll;
+ }
+
+ function hideAll() {
+ for (var i in YAHOO.example.module.modules) {
+ var m = YAHOO.example.module.modules[i];
+ m.hide();
+ }
+ }
+
+ function showAll() {
+ for (var i in YAHOO.example.module.modules) {
+ var m = YAHOO.example.module.modules[i];
+ m.show();
+ }
+ }
+ function create() {
+ var form = document.forms["overlayform"];
+
+ // get form values
+ var id = form["id"].value;
+
+ var header = form["header"].value;
+ var body = form["body"].value;
+ var footer = form["footer"].value;
+
+ var visible = form["visible"].checked;
+
+ var args = {};
+ args.visible = visible;
+
+ var newMod;
+ var isNew = true;
+
+ if (YAHOO.example.module.modules[id]) {
+ newMod = YAHOO.example.module.modules[id];
+ newMod.cfg.applyConfig(args);
+ isNew = false;
+ } else {
+ newMod = new YAHOO.widget.Module(id, args);
+ YAHOO.example.module.modules[id] = newMod;
+ }
+
+ if (header) {
+ newMod.setHeader(header);
+ }
+ if (body) {
+ newMod.setBody(body);
+ }
+ if (footer) {
+ newMod.setFooter(footer);
+ }
+
+ if (isNew) {
+ newMod.render(document.getElementById("mainBody"));
+ } else {
+ newMod.render();
+ }
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+
+</script>
+</head>
+<body>
+
+ <div class="box">
+ <div class="hd">
+ <h1>Module Example</h1>
+ </div>
+ <div class="bd" id="mainBody">
+
+ <button id="btnHide">Hide All</button>
+ <button id="btnShow">Show All</button>
+
+ <div id="content">
+ <p>A Module is an object representation of
Yahoo!'s Standard Module Format. A Module can optionally contain three elements
(but must include at least one): a header, a body, and a footer, each which are
denoted by CSS classes: "hd", "bd", and "ft" respectively. An empty module
would look like this:</p>
+<xmp><div id="myModule">
+ <div class="hd"></div>
+ <div class="bd"></div>
+ <div class="ft"></div>
+</div></xmp>
+ <p>Modules can be constructed by attaching the
Module object to pre-existing markup, or dynamically creating them from scratch
and appending them to the DOM. The code to create a Module around that markup
would look as simple as this:
+ <code>myModule = new
YAHOO.widget.Module("myModule");</code>
+ </p>
+ <p>A Module can be dynamically created by
passing the arbitrary ID of the Module to create into the constructor, setting
some content, and rendering the Module using the render method, passing in the
node that the Module should be appended to, as in this example:
+ <code>
+ myDynamicModule = new
YAHOO.widget.Module("myDynamicModule");<br/>
+ myDynamicModule.setBody("Here's
some body content.");<br/>
+
myDynamicModule.render(document.getElementById("dynamic"));<br/>
+ </code>
+ </p>
+ <p>Here are some example modules, including the
one from above:</p>
+ </div>
+
+ <div id="mPredefined" class="module">
+ <div class="hd">Predefined Module Header</div>
+ <div class="bd">I was created using simple predefined
markup.</div>
+ <div class="ft">Predefined Module Footer</div>
+ </div>
+
+ <div id="mChangedAtRuntime" class="module">
+ <div class="hd">Placeholder Header</div>
+ <div class="bd">This is only placeholder text in the
markup.</div>
+ <div class="ft">Placeholder Footer</div>
+ </div>
+ <div id="dynamic"></div>
+
+ </div>
+ <div class="ft"></div>
+ </div>
+
+<form onsubmit="return false" id="overlayform">
+<div class="overlayform">
+
+ <div class="formheader">
+ Create / Modify a Dynamic Module
+ </div>
+
+ <div class="row header">
+ <div class="label" style="text-align:center">Property</div><div
class="formw">Value</div>
+ </div>
+
+ <div class="row first">
+ <div class="label">ID</div><div class="formw"><input type="text"
name="id" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Visible</div><div class="formw"><input
type="checkbox" name="visible" value="checkbox" checked="true"/></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Header</div><div class="formw"><textarea
name="header"></textarea></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Body</div><div class="formw"><textarea
name="body"></textarea></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Footer</div><div class="formw"><textarea
name="footer"></textarea></div>
+ </div>
+
+ <div class="row last">
+ <div class="label"></div><div class="formw"><button
onclick="create()">create/modify my Module</button></div>
+ </div>
+
+</div>
+</form>
+
+</body>
+</html>
Index: container/overlay-manager.html
===================================================================
RCS file: container/overlay-manager.html
diff -N container/overlay-manager.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/overlay-manager.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,374 @@
+<!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">
+<title>YAHOO.widget.OverlayManager</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<style>
+
+.overlay {
+ visibility:hidden;
+ border:1px solid black;
+ background-color:#FFFFFF;
+ z-index:10;
+ padding:5px;
+}
+
+.overlay.focused {
+ border:3px solid red;
+ background-color:yellow;
+}
+
+</style>
+
+<script language="javascript">
+
+ YAHOO.namespace("example.overlaymanager");
+
+ function init() {
+
+ //
*****************************************************************
+ // This represents a Overlay already on the page
+ //
*****************************************************************
+
+ YAHOO.example.overlaymanager.oPredefined = new
YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
+ YAHOO.example.overlaymanager.oPredefined.render();
+
+ //
*****************************************************************
+ // This represents an Overlay completely pre-constructed from
code
+ //
*****************************************************************
+
+ YAHOO.example.overlaymanager.oDynamic = new
YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
+
+
YAHOO.example.overlaymanager.oDynamic.setHeader("Completely dynamic overlay");
+ YAHOO.example.overlaymanager.oDynamic.setBody("I was
created completely at runtime!");
+
+
YAHOO.example.overlaymanager.oDynamic.render(document.body);
+
+ //
*****************************************************************
+ // This represents a overlay with a container, but no body
content defined
+ //
*****************************************************************
+ YAHOO.example.overlaymanager.oChangedAtRuntime = new
YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
+
+
YAHOO.example.overlaymanager.oChangedAtRuntime.setHeader("I was changed at
runtime!");
+
YAHOO.example.overlaymanager.oChangedAtRuntime.setBody("<b>My original markup
text was replaced at runtime with this text.</b>");
+
YAHOO.example.overlaymanager.oChangedAtRuntime.setFooter("The footer was
changed too!");
+
+ YAHOO.example.overlaymanager.oChangedAtRuntime.render();
+ //
*****************************************************************
+
+
+ YAHOO.example.overlaymanager.mgr = new
YAHOO.widget.OverlayManager( {
overlays:[YAHOO.example.overlaymanager.oPredefined,YAHOO.example.overlaymanager.oDynamic,YAHOO.example.overlaymanager.oChangedAtRuntime]
} );
+
+ var button2 = document.getElementById("btnHide");
+ button2.onclick = hideAll;
+
+ var button3 = document.getElementById("btnShow");
+ button3.onclick = showAll;
+
+ var dd1 = new
YAHOO.util.DD(YAHOO.example.overlaymanager.oDynamic.element.id, "module");
+ dd1.onDrag = function() {
+
YAHOO.example.overlaymanager.oDynamic.cfg.refireEvent("iframe");
+ var pos =
YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oDynamic.element);
+
YAHOO.example.overlaymanager.oDynamic.cfg.setProperty("xy", pos);
+ }
+
+ var dd2 = new
YAHOO.util.DD(YAHOO.example.overlaymanager.oPredefined.element.id, "module");
+ dd2.onDrag = function() {
+
YAHOO.example.overlaymanager.oPredefined.cfg.refireEvent("iframe");
+ var pos =
YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oPredefined.element);
+
YAHOO.example.overlaymanager.oPredefined.cfg.setProperty("xy", pos);
+ }
+
+ var dd3 = new
YAHOO.util.DD(YAHOO.example.overlaymanager.oChangedAtRuntime.element.id,
"module");
+ dd3.onDrag = function() {
+
YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.refireEvent("iframe");
+ var pos =
YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oChangedAtRuntime.element);
+
YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.setProperty("xy", pos);
+ }
+
+ }
+
+ function hideAll() {
+ YAHOO.example.overlaymanager.mgr.hideAll();
+ }
+
+ function showAll() {
+ YAHOO.example.overlaymanager.mgr.showAll();
+ }
+
+ function create() {
+ var form = document.forms["overlayform"];
+
+ // get form values
+ var id = form["id"].value;
+
+ var x = form["x"].value;
+ var y = form["y"].value;
+
+ var header = form["header"].value;
+ var body = form["body"].value;
+ var footer = form["footer"].value;
+
+ var visible = form["visible"].checked;
+
+ var effectArg;
+
+ if (form["effect"].selectedIndex > 0) {
+ var dur = form["duration"].value;
+ if (! dur) {
+ dur = 0.5;
+ } else {
+ dur = parseFloat(dur);
+ }
+ var effect =
form["effect"].options[form["effect"].selectedIndex].value;
+ var effectClass = eval(effect);
+
+ effectArg = {
+ effect:effectClass,
+ duration:dur
+ }
+ }
+
+ var width = form["width"].value;
+ var height = form["height"].value;
+ var zIndex = form["zIndex"].value;
+ var constrain = form["constraintoviewport"].checked;
+ var useIframe = form["iframe"].checked;
+
+ var fixedcenter = form["fixedcenter"].checked;
+
+ var context = form["context"].value;
+ var contextArg = new Array();
+ if (context) {
+ contextArg[0] = context;
+ contextArg[1] =
form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
+ contextArg[2] =
form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
+ }
+
+ var args = {};
+ args.visible = visible;
+
+ if (effectArg) {
+ args.effect = effectArg;
+ }
+
+ if (x) {
+ args.x = parseInt(x);
+ }
+
+ if (y) {
+ args.y = parseInt(y);
+ }
+
+ if (width) {
+ args.width = width;
+ }
+
+ if (height) {
+ args.height = height;
+ }
+
+ if (constrain) {
+ args.constraintoviewport = true;
+ }
+
+ if (useIframe) {
+ args.iframe = true;
+ }
+
+ if (fixedcenter) {
+ args.fixedcenter = true;
+ }
+
+ if (contextArg.length > 0) {
+ args.context = contextArg;
+ }
+
+ var newMod;
+ var isNew = true;
+
+ if (YAHOO.example.overlaymanager.mgr.find(id)) {
+ newMod = YAHOO.example.overlaymanager.mgr.find(id);
+ newMod.cfg.applyConfig(args);
+ isNew = false;
+ } else {
+ newMod = new YAHOO.widget.Overlay(id, args);
+ YAHOO.example.overlaymanager.mgr.register(newMod);
+ }
+
+ if (header) {
+ newMod.setHeader(header);
+ }
+ if (body) {
+ newMod.setBody(body);
+ }
+ if (footer) {
+ newMod.setFooter(footer);
+ }
+
+ if (isNew) {
+ newMod.render(document.body);
+ } else {
+ newMod.render();
+ }
+
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+
+</script>
+</head>
+<body>
+ <div class="box">
+ <div class="hd">
+ <h1>OverlayManager Example</h1>
+ </div>
+ <div class="bd">
+ <p>OverlayManager is used to manage the focused state
of a collection of Overlay objects. Creating an OverlayManager and registering
an Overlay is simple:
+ <code>mgr = new YAHOO.widget.OverlayManager();<br/>
+ mgr.register(myOverlay);
+ </code>
+ </p>
+ <p>Note that when you click on an Overlay, the Overlay
is highlighted, indicating that it currently has the focus. This is because the
OverlayManager keeps track of which of the registered Overlays currently is
focused, and ensures that the z-index of that Overlay is the highest.</p>
+ <button id="btnHide">Hide All</button>
+ <button id="btnShow">Show All</button>
+ </div>
+ <p></p>
+ </div>
+
+ <select style="display:block">
+ <option>This is a <select> element, helpul for testing
the IFRAME shim</option>
+ </select>
+
+ <div id="oPredefined" style="visibility:hidden;position:absolute">
+ <div class="hd">Predefined Overlay Header</div>
+ <div class="bd">I was created using simple predefined
markup.</div>
+ <div class="ft">Predefined Overlay Footer</div>
+ </div>
+
+ <div id="oChangedAtRuntime" style="visibility:hidden;position:absolute">
+ <div class="hd">Placeholder Header</div>
+ <div class="bd">This is only placeholder text in the
markup.</div>
+ <div class="ft">Placeholder Footer</div>
+ </div>
+
+
+ <img id="ctx1" src="img/ctx.gif" />
+
+<form onsubmit="return false" id="overlayform">
+<div class="overlayform">
+
+ <div class="formheader">
+ Create / Modify a Dynamic Overlay
+ </div>
+
+ <div class="row header">
+ <div class="label" style="text-align:center">Property</div><div
class="formw">Value</div>
+ </div>
+
+ <div class="row first">
+ <div class="label">ID</div><div class="formw"><input type="text"
name="id" /></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Header</div><div class="formw"><textarea
name="header"></textarea></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Body</div><div class="formw"><textarea
name="body"></textarea></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Footer</div><div class="formw"><textarea
name="footer"></textarea></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Show/Hide Effect(s)</div><div class="formw"><select
name="effect">
+ <option value="">*none*</option>
+ <option value="YAHOO.widget.ContainerEffect.FADE">Fade</option>
+ <option value="YAHOO.widget.ContainerEffect.SLIDE">Slide</option>
+ </select> Duration: <input type="text" name="duration"
style="width:25px"/>s</div>
+ </div>
+
+ <div class="row">
+ <div class="label">Visible</div><div class="formw"><input
type="checkbox" name="visible" value="checkbox" checked="true"/></div>
+ </div>
+
+ <div class="row">
+ <div class="label">x position</div><div class="formw"><input type="text"
name="x" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">y position</div><div class="formw"><input type="text"
name="y" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">width</div><div class="formw"><input type="text"
name="width" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">height</div><div class="formw"><input type="text"
name="height" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">z-index</div><div class="formw"><input type="text"
name="zIndex" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">constrain to viewport</div><div class="formw"><input
type="checkbox" name="constraintoviewport" value="checkbox" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">fix to center of viewport</div><div
class="formw"><input type="checkbox" name="fixedcenter" value="checkbox"
/></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Use iframe shim</div><div class="formw"><input
type="checkbox" name="iframe" value="checkbox" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Context element</div><div class="formw">ID:<input
type="text" name="context" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label"> </div>
+ <div class="formw">
+ Align overlay's
+ <select name="elementMagnet">
+ <option value="tl">top left</option>
+ <option value="tr">top right</option>
+ <option value="bl">bottom left</option>
+ <option value="br">bottom right</option>
+ </select>
+ corner to context element's
+ <select name="contextMagnet">
+ <option value="tl">top left</option>
+ <option value="tr">top right</option>
+ <option value="bl">bottom left</option>
+ <option value="br">bottom right</option>
+ </select> corner
+ </div>
+ </div>
+
+ <div class="row last">
+ <div class="label"></div><div class="formw"><button
onclick="create()">create/modify my overlay</button></div>
+ </div>
+
+</div>
+</form>
+
+</body>
+</html>
Index: container/overlay.html
===================================================================
RCS file: container/overlay.html
diff -N container/overlay.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/overlay.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,373 @@
+<!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">
+<title>YAHOO.widget.Overlay</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+<link rel="stylesheet" type="text/css" href="css/module.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<style>
+ .overlay {
+ visibility:hidden;
+ border:1px solid black;
+ background-color:#FFFFFF;
+ z-index:10;
+ padding:5px;
+ }
+</style>
+
+<script language="javascript">
+
+ YAHOO.namespace("example.overlay");
+
+ YAHOO.example.overlay.overlays = [];
+
+ function init() {
+
+ //
*****************************************************************
+ // This represents a Overlay already on the page
+ //
*****************************************************************
+
+ YAHOO.example.overlay.oPredefined = new
YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
+ YAHOO.example.overlay.oPredefined.render();
+
+ //
*****************************************************************
+ // This represents an Overlay completely pre-constructed from
code
+ //
*****************************************************************
+
+ YAHOO.example.overlay.oDynamic = new
YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
+
+ YAHOO.example.overlay.oDynamic.setHeader("Completely
dynamic overlay");
+ YAHOO.example.overlay.oDynamic.setBody("I was created
completely at runtime!");
+
+ YAHOO.example.overlay.oDynamic.render(document.body);
+
+ //
*****************************************************************
+ // This represents a overlay with a container, but no body
content defined
+ //
*****************************************************************
+ YAHOO.example.overlay.oChangedAtRuntime = new
YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
+
+ YAHOO.example.overlay.oChangedAtRuntime.setHeader("I
was changed at runtime!");
+ YAHOO.example.overlay.oChangedAtRuntime.setBody("<b>My
original markup text was replaced at runtime with this text.</b>");
+ YAHOO.example.overlay.oChangedAtRuntime.setFooter("The
footer was changed too!");
+
+ YAHOO.example.overlay.oChangedAtRuntime.render();
+ //
*****************************************************************
+
+
+ var button2 = document.getElementById("btnHide");
+ button2.onclick = hideAll;
+
+ var button3 = document.getElementById("btnShow");
+ button3.onclick = showAll;
+
+ var dd1 = new
YAHOO.util.DD(YAHOO.example.overlay.oDynamic.element.id, "module");
+ dd1.onDrag = function() {
+
YAHOO.example.overlay.oDynamic.cfg.refireEvent("iframe");
+ var pos =
YAHOO.util.Dom.getXY(YAHOO.example.overlay.oDynamic.element);
+
YAHOO.example.overlay.oDynamic.cfg.setProperty("xy", pos);
+ }
+
+ var dd2 = new
YAHOO.util.DD(YAHOO.example.overlay.oPredefined.element.id, "module");
+ dd2.onDrag = function() {
+
YAHOO.example.overlay.oPredefined.cfg.refireEvent("iframe");
+ var pos =
YAHOO.util.Dom.getXY(YAHOO.example.overlay.oPredefined.element);
+
YAHOO.example.overlay.oPredefined.cfg.setProperty("xy", pos);
+ }
+
+ var dd3 = new
YAHOO.util.DD(YAHOO.example.overlay.oChangedAtRuntime.element.id, "module");
+ dd3.onDrag = function() {
+
YAHOO.example.overlay.oChangedAtRuntime.cfg.refireEvent("iframe");
+ var pos =
YAHOO.util.Dom.getXY(YAHOO.example.overlay.oChangedAtRuntime.element);
+
YAHOO.example.overlay.oChangedAtRuntime.cfg.setProperty("xy", pos);
+ }
+
+ YAHOO.example.overlay.overlays["oPredefined"] =
YAHOO.example.overlay.oPredefined;
+ YAHOO.example.overlay.overlays["oDynamic"] =
YAHOO.example.overlay.oDynamic;
+ YAHOO.example.overlay.overlays["oChangedAtRuntime"] =
YAHOO.example.overlay.oChangedAtRuntime;
+
+ }
+
+ function hideAll() {
+ for (var i in YAHOO.example.overlay.overlays) {
+ var m = YAHOO.example.overlay.overlays[i];
+ m.hide();
+ }
+ }
+
+ function showAll() {
+ for (var i in YAHOO.example.overlay.overlays) {
+ var m = YAHOO.example.overlay.overlays[i];
+ m.show();
+ }
+ }
+
+ function create() {
+ var form = document.forms["overlayform"];
+
+ // get form values
+ var id = form["id"].value;
+
+ var x = form["x"].value;
+ var y = form["y"].value;
+
+ var header = form["header"].value;
+ var body = form["body"].value;
+ var footer = form["footer"].value;
+
+ var visible = form["visible"].checked;
+
+ var effectArg;
+
+ if (form["effect"].selectedIndex > 0) {
+ var dur = form["duration"].value;
+ if (! dur) {
+ dur = 0.5;
+ } else {
+ dur = parseFloat(dur);
+ }
+ var effect =
form["effect"].options[form["effect"].selectedIndex].value;
+ var effectClass = eval(effect);
+
+ effectArg = {
+ effect:effectClass,
+ duration:dur
+ }
+ }
+
+ var width = form["width"].value;
+ var height = form["height"].value;
+ var zIndex = form["zIndex"].value;
+ var constrain = form["constraintoviewport"].checked;
+ var useIframe = form["iframe"].checked;
+
+ var fixedcenter = form["fixedcenter"].checked;
+
+ var context = form["context"].value;
+ var contextArg = new Array();
+ if (context) {
+ contextArg[0] = context;
+ contextArg[1] =
form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
+ contextArg[2] =
form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
+ }
+
+ var args = {};
+ args.visible = visible;
+
+ if (effectArg) {
+ args.effect = effectArg;
+ }
+
+ if (x) {
+ args.x = parseInt(x);
+ }
+
+ if (y) {
+ args.y = parseInt(y);
+ }
+
+ if (width) {
+ args.width = width;
+ }
+
+ if (height) {
+ args.height = height;
+ }
+
+ if (zIndex) {
+ args.zIndex = zIndex;
+ }
+
+ args.constraintoviewport = constrain;
+
+ args.iframe = useIframe;
+
+ args.fixedcenter = fixedcenter;
+
+ if (contextArg.length > 0) {
+ args.context = contextArg;
+ } else {
+ args.context = null;
+ }
+
+ var newMod;
+ var isNew = true;
+
+ if (YAHOO.example.overlay.overlays[id]) {
+ newMod = YAHOO.example.overlay.overlays[id];
+ newMod.cfg.applyConfig(args);
+ isNew = false;
+ } else {
+ newMod = new YAHOO.widget.Overlay(id, args);
+ YAHOO.example.overlay.overlays[id] = newMod;
+ }
+
+ if (header) {
+ newMod.setHeader(header);
+ }
+ if (body) {
+ newMod.setBody(body);
+ }
+ if (footer) {
+ newMod.setFooter(footer);
+ }
+
+ if (isNew) {
+ newMod.render(document.body);
+ } else {
+ newMod.render();
+ }
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+
+</script>
+</head>
+<body>
+ <div class="box">
+ <div class="hd">
+ <h1>Overlay Example</h1>
+ </div>
+ <div class="bd">
+ <button id="btnHide">Hide All</button>
+ <button id="btnShow">Show All</button>
+ </div>
+ <p>An Overlay is a <a href="module.html">Module</a> that is
positioned to float above document content. It contains no default behavior or
styling, but has several properties for manipulating its size and position.
Overlay is extended to create subclasses like <a
href="tooltip.html">Tooltip</a>, <a href="panel.html">Panel</a>, and <a
href="dialog.html">Dialog</a>.</p>
+ <p>In this example, there are three draggable overlays that are
displayed, two of which are already completely or partially marked up, and one
which is dynamically created using JavaScript alone.</p>
+ <p>Each overlay automatically has a hidden IFRAME element wired
underneath it when the browser is Internet Explorer, so that the overlays can
be positioned above SELECT elements without the SELECT bleeding through. The
IFRAME also ensures that the overlay can be positioned above Flash elements
easily.</p>
+ </div>
+
+ <select style="display:block">
+ <option>This is a <select> element, helpul for testing
the IFRAME shim</option>
+ </select>
+
+ <div id="oPredefined" style="visibility:hidden;position:absolute">
+ <div class="hd">Predefined Overlay Header</div>
+ <div class="bd">I was created using simple predefined
markup.</div>
+ <div class="ft">Predefined Overlay Footer</div>
+ </div>
+
+ <div id="oChangedAtRuntime" style="visibility:hidden;position:absolute">
+ <div class="hd">Placeholder Header</div>
+ <div class="bd">This is only placeholder text in the
markup.</div>
+ <div class="ft">Placeholder Footer</div>
+ </div>
+
+
+ <img id="ctx1" src="img/ctx.gif" />
+
+<form onsubmit="return false" id="overlayform">
+<div class="overlayform">
+
+ <div class="formheader">
+ Create / Modify a Dynamic Overlay
+ </div>
+
+ <div class="row header">
+ <div class="label" style="text-align:center">Property</div><div
class="formw">Value</div>
+ </div>
+
+ <div class="row first">
+ <div class="label">ID</div><div class="formw"><input type="text"
name="id" /></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Header</div><div class="formw"><textarea
name="header"></textarea></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Body</div><div class="formw"><textarea
name="body"></textarea></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Footer</div><div class="formw"><textarea
name="footer"></textarea></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Show/Hide Effect(s)</div><div class="formw"><select
name="effect">
+ <option value="">*none*</option>
+ <option value="YAHOO.widget.ContainerEffect.FADE">Fade</option>
+ <option value="YAHOO.widget.ContainerEffect.SLIDE">Slide</option>
+ </select> Duration: <input type="text" name="duration"
style="width:25px"/>s</div>
+ </div>
+
+ <div class="row">
+ <div class="label">Visible</div><div class="formw"><input
type="checkbox" name="visible" value="checkbox" checked="true"/></div>
+ </div>
+
+ <div class="row">
+ <div class="label">x position</div><div class="formw"><input type="text"
name="x" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">y position</div><div class="formw"><input type="text"
name="y" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">width</div><div class="formw"><input type="text"
name="width" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">height</div><div class="formw"><input type="text"
name="height" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">z-index</div><div class="formw"><input type="text"
name="zIndex" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">constrain to viewport</div><div class="formw"><input
type="checkbox" name="constraintoviewport" value="checkbox" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">fix to center of viewport</div><div
class="formw"><input type="checkbox" name="fixedcenter" value="checkbox"
/></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Use iframe shim</div><div class="formw"><input
type="checkbox" name="iframe" value="checkbox" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Context element</div><div class="formw">ID:<input
type="text" name="context" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label"> </div>
+ <div class="formw">
+ Align overlay's
+ <select name="elementMagnet">
+ <option value="tl">top left</option>
+ <option value="tr">top right</option>
+ <option value="bl">bottom left</option>
+ <option value="br">bottom right</option>
+ </select>
+ corner to context element's
+ <select name="contextMagnet">
+ <option value="tl">top left</option>
+ <option value="tr">top right</option>
+ <option value="bl">bottom left</option>
+ <option value="br">bottom right</option>
+ </select> corner
+ </div>
+ </div>
+
+ <div class="row last">
+ <div class="label"></div><div class="formw"><button
onclick="create()">create/modify my overlay</button></div>
+ </div>
+
+</div>
+</form>
+
+</body>
+</html>
Index: container/panel-aqua.html
===================================================================
RCS file: container/panel-aqua.html
diff -N container/panel-aqua.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/panel-aqua.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,61 @@
+<!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">
+<title>YAHOO.widget.Panel - Aqua Panel Example</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<link rel="stylesheet" type="text/css" href="css/panel-aqua.css" />
+
+<script language="javascript">
+ YAHOO.namespace("example.aqua");
+
+ function init() {
+ YAHOO.example.aqua.panel = new YAHOO.widget.Panel("win", {
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, width:"30em",
fixedcenter: true, constraintoviewport: true, underlay:"none", close:true,
visible:false, draggable:true, modal:false } );
+ YAHOO.example.aqua.panel.render();
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+</script>
+</head>
+<body>
+ <div class="box" id="bodyMain">
+ <div class="hd">
+ <h1>Aqua Panel Example</h1>
+ </div>
+ <div class="bd">
+ <p>Some custom CSS allows Panel to be rendered with a
familiar skin.
+ </p>
+
+ <button onclick="YAHOO.example.aqua.panel.show()">Show
the Panel</button>
+ <select>
+ <option>This is a <select> element,
helpul for testing the IFRAME shim</option>
+ </select>
+ </div>
+ </div>
+
+<div id="win">
+ <div class="hd"><div
class="lt"></div><span>Sprockets!</span><div class="rt"></div></div>
+ <div class="bd">
+ <img
src="http://static.flickr.com/7/6301565_7123909f10_t.jpg"; alt="sprockets!"
style="float:left;margin:0 5px 5px"/>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis in risus. Vestibulum a nibh tincidunt elit iaculis laoreet. In pede
metus, tristique non, consectetuer a, vestibulum vel, enim. Curabitur neque
magna, pulvinar sit amet, lobortis viverra, porta non, dui. Donec tempor, arcu
quis interdum pellentesque, dui dolor gravida pede, in iaculis justo tortor
venenatis ligula. Cras non pede vel risus egestas faucibus. Nam pulvinar
lobortis nisi. In vehicula venenatis sapien.</p>
+
+ <p style="margin-bottom:0px">Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam et
risus ut est adipiscing congue. Praesent ut justo. Proin hendrerit urna eget
eros. Curabitur condimentum tempor diam. Pellentesque tortor odio, sollicitudin
eget, pellentesque ut, ullamcorper a, justo. Nam tellus pede, fermentum ac,
sollicitudin sed, mollis vel, turpis. Fusce pulvinar nibh et erat. Praesent
purus nibh, fermentum ac, imperdiet vel, aliquet eu, mi. Praesent non nisi ac
mauris tempor ultricies. Nulla mollis tellus porta leo. Nunc accumsan dapibus
tellus. Nunc nec nunc.</p>
+ </div>
+ </div>
+</div>
+
+
+</body>
+</html>
Index: container/panel-photo.html
===================================================================
RCS file: container/panel-photo.html
diff -N container/panel-photo.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/panel-photo.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,66 @@
+<!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">
+<title>YAHOO.widget.Panel - PhotoBox Example</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<script type="text/javascript" src="js/PanelEffect.js"></script>
+<script type="text/javascript" src="js/PhotoBox.js"></script>
+
+<link rel="stylesheet" type="text/css" href="css/photobox.css" />
+
+<script language="javascript">
+ YAHOO.namespace("example.photobox");
+
+ function init() {
+ YAHOO.example.photobox.box = new YAHOO.widget.PhotoBox("win", {
+
effect:[{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},{effect:YAHOO.widget.PanelEffect.BODY_EXPAND_V,duration:0.35}],
+ fixedcenter: true, constraintoviewport: true, underlay:"none",
close:true, visible:false, draggable:false, modal:true,
+
photos:[{src:"http://static.flickr.com/51/129586913_e78683c466.jpg",caption:"Linus"},
+
{src:"http://static.flickr.com/50/129590195_0642f2d96a.jpg",caption:"Linus 2"},
+
{src:"http://static.flickr.com/8/12669712_be928a0d97.jpg",caption:"Dobb's
Ferry, NY"}
+ ], width:"500px"}
+ );
+ YAHOO.example.photobox.box.render();
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+</script>
+</head>
+<body>
+
+ <div class="box" id="bodyMain">
+ <div class="hd">
+ <h1>PhotoBox Example</h1>
+ </div>
+ <div class="bd">
+ <button
onclick="YAHOO.example.photobox.box.show()">Show the PhotoBox</button>
+ <select>
+ <option>This is a <select> element,
helpul for testing the IFRAME shim</option>
+ </select>
+ </div>
+ </div>
+
+ <div id="win">
+ <div class="hd"><div class="lt"></div><span
id="win_title">Linus</span><div class="rt"></div></div>
+ <div class="bd">
+ <img id="win_img" src="#" width="500"/>
+ </div>
+ </div>
+ </div>
+
+
+</body>
+</html>
Index: container/panel-wait.html
===================================================================
RCS file: container/panel-wait.html
diff -N container/panel-wait.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/panel-wait.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,87 @@
+<!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">
+<title>YAHOO.widget.Panel</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+<script type="text/javascript" src="../../build/connection/connection.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<style>
+
+#wait .bd {
+ padding:10px 0;
+ text-align:center;
+}
+
+#content {
+ margin-top:50px;
+ border:1px solid #CCC;
+ background-color:white;
+ width:400px;
+ height:250px;
+ margin-left:auto;
+ margin-right:auto;
+ padding:10px;
+}
+</style>
+
+<script language="javascript">
+
+ YAHOO.namespace("example.panel");
+
+
+ function init() {
+ YAHOO.example.panel.wait =
+ new YAHOO.widget.Panel("wait",
+ {
width:"240px",
+
fixedcenter:true,
+
underlay:"shadow",
+ close:false,
+ visible:true,
+
draggable:false,
+ modal:true,
+
effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.5}
+ }
+ );
+
+ YAHOO.example.panel.wait.setHeader("Loading, please wait...");
+ YAHOO.example.panel.wait.setBody("<img
src=\"http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif\"/>");
+
+ YAHOO.example.panel.wait.render(document.body);
+
+ var callback = {
+ success : function(o) {
+ document.getElementById("content").innerHTML =
o.responseText;
+ YAHOO.example.panel.wait.hide();
+ },
+ failure : function(o) {
+ document.getElementById("content").innerHTML =
"CONNECTION FAILED!";
+ YAHOO.example.panel.wait.hide();
+ }
+ }
+
+ var conn = YAHOO.util.Connect.asyncRequest("GET",
"php/somedata.php?r=" + new Date().getTime(), callback);
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+</script>
+</head>
+<body>
+
+<div id="content">
+
+</div>
+
+</body>
+</html>
Index: container/panel-xp.html
===================================================================
RCS file: container/panel-xp.html
diff -N container/panel-xp.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/panel-xp.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,65 @@
+<!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">
+<title>YAHOO.widget.Panel - XP Panel Example</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<link rel="stylesheet" type="text/css" href="css/panel-xp.css" />
+
+<script language="javascript">
+ YAHOO.namespace("example.xp");
+
+ function init() {
+ YAHOO.example.xp.panel = new YAHOO.widget.Panel("win", {
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}, width:"30em",
fixedcenter: true, constraintoviewport: true, underlay:"none", close:true,
visible:false, draggable:true, modal:false } );
+ YAHOO.example.xp.panel.render();
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+</script>
+</head>
+<body>
+
+ <div class="box" id="bodyMain">
+ <div class="hd">
+ <h1>XP Panel Example</h1>
+ </div>
+ <div class="bd">
+ <p>Some custom CSS allows Panel to be rendered with a
familiar skin.
+ </p>
+
+ <button onclick="YAHOO.example.xp.panel.show()">Show
the Panel</button>
+ <select>
+ <option>This is a <select> element,
helpul for testing the IFRAME shim</option>
+ </select>
+ </div>
+ </div>
+
+<div id="win">
+ <div class="hd"><div
class="tl"></div><span>Sprockets!</span><div class="tr"></div></div>
+ <div class="bd">
+ <img
src="http://static.flickr.com/7/6301565_7123909f10_t.jpg"; alt="sprockets!"
style="float:left;margin:0 5px 5px"/>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis in risus. Vestibulum a nibh tincidunt elit iaculis laoreet. In pede
metus, tristique non, consectetuer a, vestibulum vel, enim. Curabitur neque
magna, pulvinar sit amet, lobortis viverra, porta non, dui. Donec tempor, arcu
quis interdum pellentesque, dui dolor gravida pede, in iaculis justo tortor
venenatis ligula. Cras non pede vel risus egestas faucibus. Nam pulvinar
lobortis nisi. In vehicula venenatis sapien.</p>
+
+ <p style="margin-bottom:0px">Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam et
risus ut est adipiscing congue. Praesent ut justo. Proin hendrerit urna eget
eros. Curabitur condimentum tempor diam. Pellentesque tortor odio, sollicitudin
eget, pellentesque ut, ullamcorper a, justo. Nam tellus pede, fermentum ac,
sollicitudin sed, mollis vel, turpis. Fusce pulvinar nibh et erat. Praesent
purus nibh, fermentum ac, imperdiet vel, aliquet eu, mi. Praesent non nisi ac
mauris tempor ultricies. Nulla mollis tellus porta leo. Nunc accumsan dapibus
tellus. Nunc nec nunc.</p>
+ </div>
+ <div class="ft">
+ <div class="bl"></div><span>Some footer text</span><div
class="br"></div>
+ </div>
+ </div>
+</div>
+
+
+</body>
+</html>
Index: container/panel.html
===================================================================
RCS file: container/panel.html
diff -N container/panel.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/panel.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,321 @@
+<!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">
+<title>YAHOO.widget.Panel</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<style>
+#win {
+ visibility:hidden;
+}
+</style>
+
+<script language="javascript">
+
+ YAHOO.namespace("example.panel");
+
+ YAHOO.example.panel.panels = [];
+
+ function init() {
+ YAHOO.example.panel.panel = new YAHOO.widget.Panel("win", {
width:"30em", fixedcenter: true, constraintoviewport: true, underlay:"shadow",
close:true, visible:false, draggable:true, modal:false } );
+ YAHOO.example.panel.panel.render();
+
+ YAHOO.example.panel.panels["win"] = YAHOO.example.panel.panel;
+ }
+
+ function create() {
+ var form = document.forms["overlayform"];
+
+ // get form values
+ var id = form["id"].value;
+
+ var x = form["x"].value;
+ var y = form["y"].value;
+
+ var header = form["header"].value;
+ var body = form["body"].value;
+ var footer = form["footer"].value;
+
+ var visible = form["visible"].checked;
+
+ var effectArg;
+
+ if (form["effect"].selectedIndex > 0) {
+ var dur = form["duration"].value;
+ if (! dur) {
+ dur = 0.5;
+ } else {
+ dur = parseFloat(dur);
+ }
+ var effect =
form["effect"].options[form["effect"].selectedIndex].value;
+ var effectClass = eval(effect);
+
+ effectArg = {
+ effect:effectClass,
+ duration:dur
+ }
+ }
+
+ var width = form["width"].value;
+ var height = form["height"].value;
+ var zIndex = form["zIndex"].value;
+ var constrain = form["constraintoviewport"].checked;
+ var useIframe = form["iframe"].checked;
+
+ var fixedcenter = form["fixedcenter"].checked;
+
+ var modal = form["modal"].checked;
+ var close = form["close"].checked;
+ var draggable = form["draggable"].checked;
+
+ var context = form["context"].value;
+ var contextArg = new Array();
+ if (context) {
+ contextArg[0] = context;
+ contextArg[1] =
form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
+ contextArg[2] =
form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
+ }
+
+ var underlay = "none";
+ if (form["underlay"].selectedIndex > 0) {
+ underlay =
form["underlay"].options[form["underlay"].selectedIndex].value;
+ }
+
+ var args = {};
+ args.visible = visible;
+
+ if (effectArg) {
+ args.effect = effectArg;
+ }
+
+ if (x) {
+ args.x = parseInt(x);
+ }
+
+ if (y) {
+ args.y = parseInt(y);
+ }
+
+ if (width) {
+ args.width = width;
+ }
+
+ if (height) {
+ args.height = height;
+ }
+
+ args.constraintoviewport = constrain;
+
+ args.iframe = useIframe;
+
+ args.fixedcenter = fixedcenter;
+
+ args.draggable = draggable;
+ args.modal = modal;
+ args.underlay = underlay;
+ args.close = close;
+
+ if (contextArg.length > 0) {
+ args.context = contextArg;
+ }
+
+ var newMod;
+ var isNew = true;
+
+ if (YAHOO.example.panel.panels[id]) {
+ newMod = YAHOO.example.panel.panels[id];
+ newMod.cfg.applyConfig(args);
+ isNew = false;
+ } else {
+ newMod = new YAHOO.widget.Panel(id, args);
+ YAHOO.example.panel.panels[id] = newMod;
+ }
+
+ if (header) {
+ newMod.setHeader(header);
+ }
+ if (body) {
+ newMod.setBody(body);
+ }
+ if (footer) {
+ newMod.setFooter(footer);
+ }
+
+ if (isNew) {
+ newMod.render(document.body);
+ } else {
+ newMod.render();
+ }
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+</script>
+</head>
+<body>
+ <div class="box" id="bodyMain">
+ <div class="hd">
+ <h1>Panel Example</h1>
+ </div>
+ <div class="bd">
+ <p>A Panel is a configurable Overlay which behaves like
a traditional OS window, and includes built-in drag & drop, a close icon, an
underlay (shadow or matte) and built-in modality. To instantiate a Panel
against existing markup, the constructor is very similar to the one used for
Overlay. The example here is instantiated using this constructor:
+ <code>win = new YAHOO.widget.Panel("win", {
width:"400px", fixedcenter: true, constraintoviewport: true, underlay:"shadow",
close:true, visible:false, draggable:true} );</code>
+ </p>
+
+ <p>Panel, like its base classes, features dynamic
configuration. Try executing the code below to change the underlay style to
matte:
+
<code>panel.cfg.setProperty("underlay","matte");<button
onclick="YAHOO.example.panel.panel.cfg.setProperty('underlay','matte');">try
it!</button></code>
+ </p>
+ <button onclick="YAHOO.example.panel.panel.show()">Show
the Panel</button>
+ <select>
+ <option>This is a <select> element,
helpul for testing the IFRAME shim</option>
+ </select>
+ </div>
+ </div>
+
+<div id="win">
+ <div class="hd">Sprockets!</div>
+ <div class="bd">
+ <img
src="http://static.flickr.com/7/6301565_7123909f10_t.jpg"; alt="sprockets!"
style="float:left;margin:0 5px 5px"/>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque vel
tellus quis pede congue rutrum. Proin quam. Nullam sit amet arcu. Vivamus
imperdiet. Cras iaculis odio sit amet risus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
volutpat laoreet metus. In vel risus non dolor gravida laoreet. Sed convallis
libero ut sapien. Aliquam risus tellus, volutpat vel, tincidunt quis, tristique
et, justo.</p>
+
+<p>Ut feugiat, sem non hendrerit convallis, nisi lectus laoreet mauris, eget
nonummy est eros a ligula. Fusce metus. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Pellentesque
adipiscing, mi in dapibus imperdiet, lacus diam auctor ligula, eu interdum nibh
nibh in ligula. Aliquam euismod pulvinar dolor. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Quisque metus augue, ornare scelerisque, tempor
eget, euismod porttitor, dui. Nulla neque. Praesent ut velit vel mi feugiat
posuere. Ut mollis. Aliquam ac massa non velit posuere facilisis.</p>
+
+ </div>
+ </div>
+</div>
+
+<form onsubmit="return false" id="overlayform">
+<div class="overlayform">
+
+ <div class="formheader">
+ Create / Modify a Dynamic Panel
+ </div>
+
+ <div class="row header">
+ <div class="label" style="text-align:center">Property</div><div
class="formw">Value</div>
+ </div>
+
+ <div class="row first">
+ <div class="label">ID</div><div class="formw"><input type="text"
name="id" /></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Header</div><div class="formw"><textarea
name="header"></textarea></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Body</div><div class="formw"><textarea
name="body"></textarea></div>
+ </div>
+
+ <div class="row first">
+ <div class="label">Footer</div><div class="formw"><textarea
name="footer"></textarea></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Show/Hide Effect(s)</div><div class="formw"><select
name="effect">
+ <option value="">*none*</option>
+ <option value="YAHOO.widget.ContainerEffect.FADE">Fade</option>
+ <option value="YAHOO.widget.ContainerEffect.SLIDE">Slide</option>
+ </select> Duration: <input type="text" name="duration"
style="width:25px"/>s</div>
+ </div>
+
+ <div class="row">
+ <div class="label">Visible</div><div class="formw"><input
type="checkbox" name="visible" value="checkbox" checked="true"/></div>
+ </div>
+
+ <div class="row">
+ <div class="label">x position</div><div class="formw"><input type="text"
name="x" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">y position</div><div class="formw"><input type="text"
name="y" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">width</div><div class="formw"><input type="text"
name="width" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">height</div><div class="formw"><input type="text"
name="height" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">z-index</div><div class="formw"><input type="text"
name="zIndex" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">constrain to viewport</div><div class="formw"><input
type="checkbox" name="constraintoviewport" value="checkbox" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">fix to center of viewport</div><div
class="formw"><input type="checkbox" name="fixedcenter" value="checkbox"
/></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Use iframe shim</div><div class="formw"><input
type="checkbox" name="iframe" value="checkbox" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Modal</div><div class="formw"><input type="checkbox"
name="modal" value="checkbox" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Draggable</div><div class="formw"><input
type="checkbox" name="draggable" value="checkbox" checked="true"/></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Show close icon</div><div class="formw"><input
type="checkbox" name="close" value="checkbox" checked="true"/></div>
+ </div>
+
+ <div class="row">
+ <div class="label">Underlay</div><div class="formw"><select
name="underlay">
+ <option value="none">*none*</option>
+ <option value="shadow">Shadow</option>
+ <option value="matte">Matte</option>
+ </select>
+ </div>
+
+ <div class="row">
+ <div class="label">Context element</div><div class="formw">ID:<input
type="text" name="context" /></div>
+ </div>
+
+ <div class="row">
+ <div class="label"> </div>
+ <div class="formw">
+ Align overlay's
+ <select name="elementMagnet">
+ <option value="tl">top left</option>
+ <option value="tr">top right</option>
+ <option value="bl">bottom left</option>
+ <option value="br">bottom right</option>
+ </select>
+ corner to context element's
+ <select name="contextMagnet">
+ <option value="tl">top left</option>
+ <option value="tr">top right</option>
+ <option value="bl">bottom left</option>
+ <option value="br">bottom right</option>
+ </select> corner
+ </div>
+ </div>
+
+ <div class="row last">
+ <div class="label"></div><div class="formw"><button
onclick="create()">create/modify my Panel</button></div>
+ </div>
+
+</div>
+</form>
+
+</body>
+</html>
Index: container/simpledialog-async.html
===================================================================
RCS file: container/simpledialog-async.html
diff -N container/simpledialog-async.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/simpledialog-async.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,104 @@
+<!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">
+<title>YAHOO.widget.SimpleDialog</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+<script type="text/javascript" src="../../build/connection/connection.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<script language="javascript">
+ YAHOO.namespace("example.simpledialog");
+
+ function submitCallback(obj) {
+ var response = obj.responseText;
+ alert(response);
+ }
+
+ function init() {
+ var handleCancel = function() {
+ this.cancel();
+ }
+
+ var handleSubmit = function() {
+ alert("That wasn't so bad!");
+ this.form[this.id].value = "1";
+ this.submit();
+ }
+
+ YAHOO.example.simpledialog.dlg = new
YAHOO.widget.SimpleDialog("dlg", { postmethod:"async", visible:false, width:
"20em",
effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25},{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}],
fixedcenter:true, modal:true, draggable:false });
+
+ YAHOO.example.simpledialog.dlg.setHeader("Warning!");
+ YAHOO.example.simpledialog.dlg.setBody("Are you sure you want
to do this?");
+
+
YAHOO.example.simpledialog.dlg.cfg.queueProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
+ YAHOO.example.simpledialog.dlg.cfg.queueProperty("buttons", [ {
text:"OK", handler:handleSubmit, isDefault:true },
+
{ text:"Cancel", handler:handleCancel } ]);
+ YAHOO.example.simpledialog.dlg.cfg.queueProperty("onsuccess",
submitCallback);
+
+ var listeners = new YAHOO.util.KeyListener(document, { keys :
27 }, {fn:handleCancel,scope:YAHOO.example.simpledialog.dlg,correctScope:true}
);
+
YAHOO.example.simpledialog.dlg.cfg.queueProperty("keylisteners", listeners);
+
+ var handleManual = function(type, args, obj) {
+ alert("Manual submission of " + this.id + " detected");
+ alert(this.getData()[this.id]);
+ }
+
+
YAHOO.example.simpledialog.dlg.manualSubmitEvent.subscribe(handleManual,
YAHOO.example.simpledialog.dlg, true);
+
+ YAHOO.example.simpledialog.dlg.render(document.body);
+
+ YAHOO.example.simpledialog.dlg.form.action = "php/post.php";
+ YAHOO.example.simpledialog.dlg.form.method = "POST";
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+
+</script>
+</head>
+<body>
+ <div class="box">
+ <div class="hd">
+ <h1>SimpleDialog Example</h1>
+ </div>
+ <div class="bd">
+ <p>SimpleDialog is an implementation of <a
href="panel.html">Panel</a> that behaves like an OS dialog. SimpleDialog is
used for asking the user a simple question that usually involves a Yes/No or
OK/Cancel response.</p>
+
+ <p>Two sets of buttons with handlers are built into the
SimpleDialog object: a set for OK/Cancel and a set for Yes/No, which
respectively call the handleOKClick/handleCancelClick and
handleYesClick/handleNoClick DOM events that are built-in.
+ </p>
+
+ <p>The code to instantiate this SimpleDialog example
looks like this:
+ <code>dlg = new
YAHOO.widget.SimpleDialog("dlg", { width: "20em",
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
fixedcenter:true, modal:true, draggable:false });<br/><br/>
+ YAHOO.example.simpledialog.dlg.setHeader("Warning!");<br/>
+ YAHOO.example.simpledialog.dlg.setBody("Are you sure you want
to do this?");<br/>
+
YAHOO.example.simpledialog.dlg.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
+ </code>
+ Next, we wire up the buttons using a simple
JSON structure that points to local handlers for each button:
+ <code>
+ dlg.cfg.setProperty("buttons", [
+ { text:"OK", handler:handleOK,
isDefault:true },
+ {
text:"Cancel",handler:handleCancel }
+ ]
+ );
+ </code>
+ </p>
+
+ <button
onclick="YAHOO.example.simpledialog.dlg.show()">Show me a dialog</button>
+ <select>
+ <option>This is a <select> element,
helpul for testing the IFRAME shim</option>
+ </select>
+ </div>
+ </div>
+
+</body>
+</html>
Index: container/simpledialog.html
===================================================================
RCS file: container/simpledialog.html
diff -N container/simpledialog.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/simpledialog.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,86 @@
+<!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">
+<title>YAHOO.widget.SimpleDialog</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"
></script>
+<script type="text/javascript" src="../../build/animation/animation.js"
></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<script language="javascript">
+ YAHOO.namespace("example.simpledialog");
+
+ function init() {
+ var handleCancel = function() {
+ alert("You clicked 'Cancel'!");
+ this.hide();
+ }
+
+ var handleOK = function() {
+ alert("You clicked 'OK'!");
+ this.hide();
+ }
+
+ YAHOO.example.simpledialog.dlg = new
YAHOO.widget.SimpleDialog("dlg", { visible:false, width: "20em",
effect:[{effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.25},{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25}],
fixedcenter:true, modal:true, draggable:false });
+
+ YAHOO.example.simpledialog.dlg.setHeader("Warning!");
+ YAHOO.example.simpledialog.dlg.setBody("Are you sure you want
to do this?");
+
+
YAHOO.example.simpledialog.dlg.cfg.queueProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
+ YAHOO.example.simpledialog.dlg.cfg.queueProperty("buttons", [
+
{ text:"OK",
handler:handleOK, isDefault:true },
+
{
text:"Cancel", handler:handleCancel }
+
]);
+
+ var listeners = new YAHOO.util.KeyListener(document, { keys :
27 }, {fn:handleCancel ,scope:YAHOO.example.simpledialog.dlg,
correctScope:true} );
+
YAHOO.example.simpledialog.dlg.cfg.queueProperty("keylisteners", listeners);
+
+ YAHOO.example.simpledialog.dlg.render(document.body);
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+
+</script>
+</head>
+<body>
+ <div class="box">
+ <div class="hd">
+ <h1>SimpleDialog Example</h1>
+ </div>
+ <div class="bd">
+ <p>SimpleDialog is an implementation of <a
href="panel.html">Panel</a> that behaves like an OS dialog. SimpleDialog is
used for asking the user a simple question that usually involves a Yes/No or
OK/Cancel response.</p>
+
+ <p>The code to instantiate this SimpleDialog example
looks like this:
+ <code>dlg = new
YAHOO.widget.SimpleDialog("dlg", { width: "20em",
effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25},
fixedcenter:true, modal:true, draggable:false });<br/><br/>
+ YAHOO.example.simpledialog.dlg.setHeader("Warning!");<br/>
+ YAHOO.example.simpledialog.dlg.setBody("Are you sure you want
to do this?");<br/>
+
YAHOO.example.simpledialog.dlg.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_WARN);
+ </code>
+ Next, we wire up the buttons using a simple
JSON structure that points to local handlers for each button:
+ <code>
+ dlg.cfg.setProperty("buttons", [
+ { text:"OK", handler:handleOK,
isDefault:true },
+ {
text:"Cancel",handler:handleCancel }
+ ]
+ );
+ </code>
+ </p>
+
+ <button
onclick="YAHOO.example.simpledialog.dlg.show()">Show me a dialog</button>
+ <select>
+ <option>This is a <select> element,
helpul for testing the IFRAME shim</option>
+ </select>
+ </div>
+ </div>
+
+</body>
+</html>
Index: container/tooltip.html
===================================================================
RCS file: container/tooltip.html
diff -N container/tooltip.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/tooltip.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,54 @@
+<!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">
+<title>YAHOO.widget.Tooltip</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+<script type="text/javascript" src="../../build/event/event.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="css/example.css" />
+
+<link rel="stylesheet" type="text/css"
href="../../build/container/assets/container.css" />
+<script type="text/javascript"
src="../../build/container/container.js"></script>
+
+<script language="javascript">
+
+ var tooltip1;
+ var tooltip2;
+ var tooltip3;
+
+ function init() {
+
+ tooltip2 = new YAHOO.widget.Tooltip("tt2", { context:"link" } );
+ tooltip3 = new YAHOO.widget.Tooltip("tt3", { context:"img",
showdelay: 1000 });
+ }
+
+ YAHOO.util.Event.addListener(window, "load", init);
+</script>
+</head>
+<body>
+ <div class="box" id="bodyMain">
+ <div class="hd">
+ <h1>Tooltip Example</h1>
+ </div>
+ <div class="bd">
+ <p>The creation of a Tooltip is very straight-forward.
To instantiate a Tooltip, the code looks like this:</p>
+ <code>tooltip1 = new YAHOO.widget.Tooltip("tt1", {
context:"btn1", text:"I'm a button. You can click me!" } );</code>
+ <p>Tooltips are generally always created dynamically,
and never need to be marked up in advance. The first argument is the DOM id
that you want to associate with the Tooltip. The second argument is the user
configuration object literal used for configuring the Tooltip. If no text is
specified, the Tooltip will attempt to use the object's title attribute to set
the text.</p>
+ <p>The first example, tooltip1, is included in an
inline script tag to demonstrate that Tooltip classes can be included inline
during document rendering.</p>
+ <p>By default, are shown after 200ms, displayed for 5
seconds and dismissed, or hidden 250ms after moving the mouse away from the
context element. You can configure these timings, as shown in the code for
tooltip3 (the one associated with the image), where we cause the Tooltip to
display after 1 second, instead of 250ms:</p>
+ <code>tooltip3 = new YAHOO.widget.Tooltip("tt3", {
context:"img", showdelay: 1000 });</code>
+ <p
style="margin-top:25px;padding-top:25px;border-top:1px dotted black"><button
id="btn1">Hover over me</button></p>
+ <script>tooltip1 = new YAHOO.widget.Tooltip("tt1", {
container:"bodyMain", context:"btn1", text:"I'm a button. You can click me!"}
); // This code is placed inline in a script tag to show that tooltips can be
instantiated inline as well.</script>
+ <p><a id="link" href="http://www.yahoo.com"; title="I'm
a link! I go to another page!" alt="">Hover over me too!</a></p>
+ <p><img id="img"
src="http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/alt3/close12_1.gif";
title="I'm an image and this is my title text!"/></p>
+
+ </div>
+ </div>
+
+
+</body>
+</html>
Index: container/css/example.css
===================================================================
RCS file: container/css/example.css
diff -N container/css/example.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/css/example.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,187 @@
+body {
+ background-image:url(../img/bg.png);
+ background-repeat:repeat-x;
+ background-color:#FFFFFF;
+}
+
+.homeLink {
+
background-color:#CCC;position:absolute;right:0;top:0;text-align:center;padding:5px;margin-bottom:5px;border:1px
solid #CCC;width:75px;
+}
+
+label {
+ float:left;
+ width:150px;
+}
+.buttonset {
+ clear:both;
+ text-align:right;
+}
+
+.box code, .box xmp {
+ display:block;
+ padding:5px;
+ font-size:11px;
+ background-color:#EEE;
+ border:1px solid #555;
+ margin:10px;
+}
+
+.bd form {
+ margin:0px;
+}
+
+.box {
+ border:1px solid #CCC;
+ background-color:#FFF;
+ padding:5px;
+ width:700px;
+ }
+
+ .box p {
+ margin:10px;
+ }
+
+ .box h1 {
+ font-family:georgia,times new roman,times,serif;
+ color:purple;
+ font-size:24px;
+ margin-top:0px;
+ margin-bottom:10px;
+ padding-bottom:5px;
+ border-bottom:1px dotted black;
+ }
+
+ .box h2 {
+ font-family:georgia,times new roman,times,serif;
+ color:purple;
+ font-size:14px;
+ margin-top:0px;
+ margin-bottom:10px;
+ padding-bottom:5px;
+ border-bottom:1px dotted black;
+ }
+
+ .box h3 {
+ font-family:georgia,times new roman,times,serif;
+ color:black;
+ font-size:11px;
+ margin-top:0px;
+ margin-bottom:5px;
+ padding-bottom:5px;
+ }
+
+
+button {
+ font:100 76% verdana;
+ text-decoration:none;
+ background-color: #E4E4E4;
+ color: #333;
+ cursor: hand;
+ vertical-align: middle;
+ border: 2px solid #797979;
+ border-top-color:#FFF;
+ border-left-color:#FFF;
+ margin:2px;
+ padding:2px;
+}
+
+button.default {
+ font-weight:bold;
+}
+
+button:hover, button.hover {
+ border:2px solid #90A029;
+ background-color:#EBF09E;
+ border-top-color:#FFF;
+ border-left-color:#FFF;
+}
+
+button:active {
+ border:2px solid #E4E4E4;
+ background-color:#BBB;
+ border-top-color:#333;
+ border-left-color:#333;
+}
+
+div.overlayform {
+ width:700px;
+ border:1px solid black;
+ background-color:#FFF;
+}
+
+div.overlayform .formheader {
+ padding:5px;
+ font-weight:bold;
+ background-color:#D92121;
+ color:#FFF;
+
+}
+
+div.overlayform textarea {
+ width:450px;
+ height:50px;
+}
+
+div.overlayform button {
+ float:right;
+ margin-right:10px
+}
+
+div.row {
+ clear:both;
+ vertical-align:middle;
+ padding-bottom:5px;
+}
+
+div.row.header {
+ font-weight:bold;
+ background-color:#666;
+ color:#FFF;
+ vertical-align:middle;
+ height:1em;
+}
+
+div.row.first {
+ margin-top:5px;
+}
+
+div.row.last {
+ margin-bottom:5px;
+}
+
+div.row div.label {
+ float: left;
+ width: 125px;
+ margin-right:10px;
+ text-align: right;
+ vertical-align:middle;
+}
+
+div.row div.formw {
+ float: left;
+ text-align: left;
+ vertical-align:middle;
+}
+
+#resp {
+ font-family:courier;
+ font-size:12px;
+ margin-top:0px;
+}
+
+.box label {
+ float:none;
+}
+
+.radioline {
+ width:100%;
+ clear:both;
+}
+
+.radioline.first {
+ margin-top:10px;
+}
+
+.radioline.last {
+ margin-bottom:10px;
+}
\ No newline at end of file
Index: container/css/module.css
===================================================================
RCS file: container/css/module.css
diff -N container/css/module.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/css/module.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,65 @@
+.module {
+ margin:5px;
+ padding:5px;
+ border:1px solid red;
+ background-color:#FFFFFF;
+}
+div.overlayform {
+ width:700px;
+ border:1px solid black;
+ background-color:#FFF;
+}
+
+div.overlayform .formheader {
+ padding:5px;
+ font-weight:bold;
+ background-color:#D92121;
+ color:#FFF;
+
+}
+
+div.overlayform textarea {
+ width:450px;
+ height:50px;
+}
+
+div.overlayform button {
+ float:right;
+ margin-right:10px
+}
+
+div.row {
+ clear:both;
+ vertical-align:middle;
+ padding-bottom:5px;
+}
+
+div.row.header {
+ font-weight:bold;
+ background-color:#666;
+ color:#FFF;
+ vertical-align:middle;
+ height:1em;
+}
+
+div.row.first {
+ margin-top:5px;
+}
+
+div.row.last {
+ margin-bottom:5px;
+}
+
+div.row div.label {
+ float: left;
+ width: 125px;
+ margin-right:10px;
+ text-align: right;
+ vertical-align:middle;
+}
+
+div.row div.formw {
+ float: left;
+ text-align: left;
+ vertical-align:middle;
+}
\ No newline at end of file
Index: container/css/panel-aqua.css
===================================================================
RCS file: container/css/panel-aqua.css
diff -N container/css/panel-aqua.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/css/panel-aqua.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,77 @@
+#win {
+ visibility:hidden;
+}
+
+.panel-container.shadow .underlay {
+ background-color:#999;
+}
+
+.panel {
+ border:none;
+ overflow:visible;
+ background-color:transparent;
+}
+
+.panel .hd {
+ padding:0;
+ border:none;
+ background:transparent url(../img/aqua-hd-bg.gif);
+ color:#000;
+ height:22px;
+ margin-left:7px;
+ margin-right:7px;
+ text-align:center;
+ overflow:visible;
+}
+
+.panel .hd span {
+ vertical-align:middle;
+ line-height:22px;
+}
+
+.panel .close {
+ top:3px;
+ left:4px;
+ height:18px;
+ width:17px;
+}
+
+.panel .close.nonsecure {
+ background-image:url(../img/aqua-hd-close.gif);
+}
+
+.panel .close.secure {
+ background-image:url(../img/aqua-hd-close.gif);
+}
+
+.panel .close.nonsecure:hover {
+ background-image:url(../img/aqua-hd-close-over.gif);
+}
+
+.panel .close.secure:hover {
+ background-image:url(../img/aqua-hd-close-over.gif);
+}
+
+
+
+.panel .lt {
+ width:7px;height:22px;
+ top:0;left:0;
+ background:transparent url(../img/aqua-hd-lt.gif);
+ position:absolute;
+}
+
+.panel .rt {
+ width:7px;height:22px;
+ top:0;right:0;
+ background:transparent url(../img/aqua-hd-rt.gif);
+ position:absolute;
+}
+
+.panel .bd {
+ overflow:hidden;
+ padding:4px;
+ border:1px solid #aeaeae;
+ background-color:#FFF;
+
+}
\ No newline at end of file
Index: container/css/panel-xp.css
===================================================================
RCS file: container/css/panel-xp.css
diff -N container/css/panel-xp.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/css/panel-xp.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,104 @@
+#win {
+ visibility:hidden;
+}
+
+.panel-container.shadow .underlay {
+ background-color:#999;
+}
+
+.panel {
+ border:none;
+ overflow:visible;
+ background:transparent url(../img/xp-brdr-rt.gif) no-repeat top right;
+}
+
+.panel .hd {
+ padding:0;
+ border:none;
+ background:transparent url(../img/xp-hd.gif);
+ color:#FFF;
+ height:30px;
+ margin-left:8px;
+ margin-right:8px;
+ text-align:left;
+ vertical-align:middle;
+ overflow:visible;
+}
+
+.panel .hd span {
+ line-height:30px;
+ vertical-align:middle;
+}
+
+.panel .close {
+ top:5px;
+ right:8px;
+ height:21px;
+ width:21px;
+}
+
+.panel .close.nonsecure {
+ background-image:url(../img/xp-close.gif);
+}
+
+.panel .close.secure {
+ background-image:url(../img/xp-close.gif);
+}
+
+.panel .tl {
+ width:8px;height:29px;
+ top:1px;left:0;
+ background:transparent url(../img/xp-tl.gif);
+ position:absolute;
+}
+
+.panel .tr {
+ width:8px;height:29px;
+ top:1px;right:0;
+ background:transparent url(../img/xp-tr.gif);
+ position:absolute;
+}
+
+.panel .bl {
+ width:8px;height:26px;
+ bottom:0;left:0;
+ background:transparent url(../img/xp-bl.gif);
+ position:absolute;
+}
+
+.panel .ft {
+ background:transparent url(../img/xp-ft.gif);
+ font-size:11px;
+ height:26px;
+ padding:0px 10px;
+}
+
+.panel .ft span {
+ line-height:22px;
+ vertical-align:middle;
+}
+
+.panel .br {
+ width:8px;height:26px;
+ bottom:0;right:0;
+ background:transparent url(../img/xp-br.gif);
+ position:absolute;
+}
+
+.panel .bd {
+ overflow:hidden;
+ padding:10px;
+ border:none;
+ background:#FFF url(../img/xp-brdr-lt.gif) repeat-y;
+ margin:0 4px 0 0;
+}
+
+.panel .bd .brdr-rt {
+ width:4px;
+ right:0;
+ top:29px;
+ bottom:26px;
+ height:auto;
+ background:#FFF url(../img/xp-brdr-rt.gif) repeat-y;
+ position:absolute;
+}
\ No newline at end of file
Index: container/css/photobox.css
===================================================================
RCS file: container/css/photobox.css
diff -N container/css/photobox.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ container/css/photobox.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,82 @@
+#win {
+ visibility:hidden;
+}
+
+.photobox {
+ border:3px solid #666;
+ overflow:visible;
+ background-color:#333;
+ padding:5px;
+}
+
+.photobox .hd {
+ font-family:georgia, times new roman, times, serif;
+ font-weight:normal;
+ border:none;
+ border-bottom:1px solid #666;
+ background:transparent;
+ color:#FFF;
+ height:18px;
+ text-align:left;
+ overflow:visible;
+ padding:0;
+ padding-bottom:5px;
+ margin-bottom:5px;
+ width:500px;
+}
+
+.photobox .hd span {
+ vertical-align:middle;
+ line-height:15px;
+}
+
+.photobox .close {
+ top:8px;
+ right:8px;
+ height:15px;
+ width:18px;
+}
+
+.photobox .close.nonsecure {
+ background-image:url(../img/ybox-close.gif);
+}
+
+.photobox .close.secure {
+ background-image:url(../img/ybox-close.gif);
+}
+
+.photobox .bd {
+ padding:0;
+}
+
+.photobox .bd img {
+ border:none;
+}
+
+.mask {
+ background-color:#000;
+ -moz-opacity: 0.75;
+ opacity:.75;
+ filter:alpha(opacity=75);
+}
+
+.photobox .ft {
+ height:16px;
+ width:500px;
+ padding:5px 0;
+ position:relative;
+}
+
+.photobox .ft .back {
+ position:absolute;
+ left:1px;
+}
+
+.photobox .ft .back img, .photobox .ft .next img {
+ border:none;
+}
+
+.photobox .ft .next {
+ position:absolute;
+ right:1px;
+}
Index: container/img/aqua-bg.gif
===================================================================
RCS file: container/img/aqua-bg.gif
diff -N container/img/aqua-bg.gif
Binary files /dev/null and /tmp/cvsBqQUAe differ
Index: container/img/aqua-hd-bg.gif
===================================================================
RCS file: container/img/aqua-hd-bg.gif
diff -N container/img/aqua-hd-bg.gif
Binary files /dev/null and /tmp/cvsWp6zRe differ
Index: container/img/aqua-hd-close-over.gif
===================================================================
RCS file: container/img/aqua-hd-close-over.gif
diff -N container/img/aqua-hd-close-over.gif
Binary files /dev/null and /tmp/cvstw1dof differ
Index: container/img/aqua-hd-close.gif
===================================================================
RCS file: container/img/aqua-hd-close.gif
diff -N container/img/aqua-hd-close.gif
Binary files /dev/null and /tmp/cvsYIejsd differ
Index: container/img/aqua-hd-lt.gif
===================================================================
RCS file: container/img/aqua-hd-lt.gif
diff -N container/img/aqua-hd-lt.gif
Binary files /dev/null and /tmp/cvsf1EVVd differ
Index: container/img/aqua-hd-rt.gif
===================================================================
RCS file: container/img/aqua-hd-rt.gif
diff -N container/img/aqua-hd-rt.gif
Binary files /dev/null and /tmp/cvsKoUKce differ
Index: container/img/bg.png
===================================================================
RCS file: container/img/bg.png
diff -N container/img/bg.png
Binary files /dev/null and /tmp/cvsfaU4Xg differ
Index: container/img/ctx.gif
===================================================================
RCS file: container/img/ctx.gif
diff -N container/img/ctx.gif
Binary files /dev/null and /tmp/cvsqM97vh differ
Index: container/img/xp-bl.gif
===================================================================
RCS file: container/img/xp-bl.gif
diff -N container/img/xp-bl.gif
Binary files /dev/null and /tmp/cvsJ4lvWh differ
Index: container/img/xp-border-rt.gif
===================================================================
RCS file: container/img/xp-border-rt.gif
diff -N container/img/xp-border-rt.gif
Binary files /dev/null and /tmp/cvs273bSf differ
Index: container/img/xp-br.gif
===================================================================
RCS file: container/img/xp-br.gif
diff -N container/img/xp-br.gif
Binary files /dev/null and /tmp/cvsjyX7hg differ
Index: container/img/xp-brdr-lt.gif
===================================================================
RCS file: container/img/xp-brdr-lt.gif
diff -N container/img/xp-brdr-lt.gif
Binary files /dev/null and /tmp/cvsU22RQg differ
Index: container/img/xp-brdr-rt.gif
===================================================================
RCS file: container/img/xp-brdr-rt.gif
diff -N container/img/xp-brdr-rt.gif
Binary files /dev/null and /tmp/cvspsG3Dj differ
Index: container/img/xp-close.gif
===================================================================
RCS file: container/img/xp-close.gif
diff -N container/img/xp-close.gif
Binary files /dev/null and /tmp/cvsuNRMUj differ
Index: container/img/xp-ft.gif
===================================================================
RCS file: container/img/xp-ft.gif
diff -N container/img/xp-ft.gif
Binary files /dev/null and /tmp/cvsZvDRkk differ
Index: container/img/xp-hd.gif
===================================================================
RCS file: container/img/xp-hd.gif
diff -N container/img/xp-hd.gif
Binary files /dev/null and /tmp/cvskhtkvi differ
Index: container/img/xp-tl.gif
===================================================================
RCS file: container/img/xp-tl.gif
diff -N container/img/xp-tl.gif
Binary files /dev/null and /tmp/cvs9qwXLi differ
Index: container/img/xp-tr.gif
===================================================================
RCS file: container/img/xp-tr.gif
diff -N container/img/xp-tr.gif
Binary files /dev/null and /tmp/cvsWMX3bj differ
Index: container/img/ybox-back.gif
===================================================================
RCS file: container/img/ybox-back.gif
diff -N container/img/ybox-back.gif
Binary files /dev/null and /tmp/cvsd0gk6l differ
Index: container/img/ybox-close.gif
===================================================================
RCS file: container/img/ybox-close.gif
diff -N container/img/ybox-close.gif
Binary files /dev/null and /tmp/cvs4xkZvm differ
Index: container/img/ybox-next.gif
===================================================================
RCS file: container/img/ybox-next.gif
diff -N container/img/ybox-next.gif
Binary files /dev/null and /tmp/cvs7NB5Mm differ
Index: dom/addclass.html
===================================================================
RCS file: dom/addclass.html
diff -N dom/addclass.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/addclass.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>DOM Example: addClass</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="../../build/event/event.js"></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+<script type="text/javascript">
+YAHOO.namespace('example.dom');
+
+YAHOO.example.dom.init = function() {
+
+ var add = function(e) {
+ YAHOO.util.Dom.addClass('test', 'bar');
+ alert(document.getElementById('test').className);
+ };
+
+ YAHOO.util.Event.addListener(document, 'click', add);
+};
+
+YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
+</script>
+<link rel="stylesheet" type="text/css" href="css/dom.css">
+</head>
+
+<body>
+<div id="doc">
+ <h1>DOM Example: addClass</h1>
+ <p>This example demonstrates how to use Dom.addClass to add a class to a
given element.</p>
+ <p>Click anywhere to test.</p>
+ <div class="foo" id="test"></div>
+</div>
+
+
+</body>
+</html>
Index: dom/getelementsbyclassname.html
===================================================================
RCS file: dom/getelementsbyclassname.html
diff -N dom/getelementsbyclassname.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/getelementsbyclassname.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>DOM Example: getElementsByClassName</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="../../build/event/event.js"></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+<script type="text/javascript">
+YAHOO.namespace('example.dom');
+
+YAHOO.example.dom.init = function() {
+
+ var count = function(e) {
+ var elements = YAHOO.util.Dom.getElementsByClassName('test');
+ alert(elements.length);
+ };
+
+ YAHOO.util.Event.addListener(document, 'click', count);
+};
+
+YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
+</script>
+<link rel="stylesheet" type="text/css" href="css/dom.css">
+</head>
+
+<body>
+<div id="doc">
+ <h1>DOM Example: getElementsByClassName</h1>
+ <p>This example demonstrates how to use Dom.getByClassName to get a
collection of elements with a particular class name.</p>
+ <p>Click anywhere to test.</p>
+ <div class="test">div class="test"</div>
+ <div class="test2 test">div class="test2 test"</div>
+ <div class="test test2">div class="test test2"</div>
+ <div class="test ">div class="test "</div>
+ <div class=" test ">div class=" test "</div>
+ <div class=" test2 test">div class=" test2 test"</div>
+ <div class="test test2 ">div class="test test2 "</div>
+ <div class="test2 test ">div class="test2 test "</div>
+ <div class=" test2 test">div class=" test2 test"</div>
+ <div class=" test2 test ">div class=" test2 test "</div>
+ <div class="test3 test2 test">div class="test3 test2 test"</div>
+ <div class="test2 test3">div class="test2 test3"</div>
+</div>
+
+
+</body>
+</html>
Index: dom/getstyle.html
===================================================================
RCS file: dom/getstyle.html
diff -N dom/getstyle.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/getstyle.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,40 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>DOM Example: getStyle</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="../../build/event/event.js"></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+<script type="text/javascript">
+YAHOO.namespace('example.dom');
+
+YAHOO.example.dom.init = function() {
+
+ var change = function(e) {
+ var bgColor = YAHOO.util.Dom.getStyle('end', 'backgroundColor');
+ YAHOO.util.Dom.setStyle('test', 'backgroundColor', bgColor);
+ };
+
+ YAHOO.util.Event.addListener(document, 'click', change);
+};
+
+YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
+</script>
+
+<link rel="stylesheet" type="text/css" href="css/dom.css">
+</head>
+
+<body>
+<div id="doc">
+ <h1>DOM Example: getStyle</h1>
+ <p>This example demonstrates how to use Dom.getStyle to get the current
style of an element.</p>
+ <p>Click anywhere to get the background color of the red element and apply
it to the gray element.</p>
+ <div id="test"></div>
+ <div id="end"></div>
+</div>
+
+
+</body>
+</html>
Index: dom/getxy.html
===================================================================
RCS file: dom/getxy.html
diff -N dom/getxy.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/getxy.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>DOM Example: getXY</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="../../build/event/event.js"></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+<script type="text/javascript">
+YAHOO.namespace('example.dom');
+
+YAHOO.example.dom.init = function() {
+
+ var move = function(e) {
+ var xy = YAHOO.util.Dom.getXY('end');
+
+ YAHOO.util.Dom.setXY('test', xy);
+ };
+
+ YAHOO.util.Event.addListener(document, 'click', move);
+};
+
+YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
+</script>
+
+<link rel="stylesheet" type="text/css" href="css/dom.css">
+</head>
+
+<body>
+<div id="doc">
+ <h1>DOM Example: getXY</h1>
+ <p>This example demonstrates how to use Dom.getXY to get an elements
position.</p>
+ <p>Click anywhere and the grey element will move to the red element.</p>
+ <div id="test"></div>
+ <div id="end"></div>
+</div>
+
+
+</body>
+</html>
Index: dom/hasclass.html
===================================================================
RCS file: dom/hasclass.html
diff -N dom/hasclass.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/hasclass.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>DOM Example: hasClass</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="../../build/event/event.js"></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+<script type="text/javascript">
+YAHOO.namespace('example.dom');
+
+YAHOO.example.dom.init = function() {
+
+ var test = function(e) {
+ alert(YAHOO.util.Dom.hasClass('test', 'foo'));
+ };
+
+ YAHOO.util.Event.addListener(document, 'click', test);
+};
+
+YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
+</script>
+<link rel="stylesheet" type="text/css" href="css/dom.css">
+</head>
+
+<body>
+<div id="doc">
+ <h1>DOM Example: hasClass</h1>
+ <p>This example demonstrates how to use Dom.hasClass to test whether a
class is assigned to a given element.</p>
+ <p>Click anywhere to test.</p>
+ <div class="foo2 foo bar" id="test"></div>
+</div>
+
+
+</body>
+</html>
Index: dom/index.html
===================================================================
RCS file: dom/index.html
diff -N dom/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/index.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,27 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>YUI Library - Dom</title>
+<link rel="stylesheet" type="text/css" media="screen" href="css/dom.css">
+</head>
+<body>
+<div id="doc">
+ <div id="hd">
+ <img src="img/logo.gif">
+ <h1>YUI Library - Dom</h1>
+ </div>
+ <div id="bd">
+ <ul id="examples">
+ <li><a href="setxy.html">Set X and Y coordinates</a></li>
+ <li><a href="getxy.html">Get X and Y coordinates</a></li>
+ <li><a href="setstyle.html">Set CSS style of an element</a></li>
+ <li><a href="getstyle.html">Get CSS style of an element</a></li>
+ <li><a href="hasclass.html">Testing for the presence of a
className</a></li>
+ <li><a href="removeclass.html">Remove a given className from an
element</a></li>
+ <li><a href="addclass.html">Add a given className to an element</a></li>
+ <li><a href="getelementsbyclassname.html">Get a collection of elements
by className</a></li>
+ </ul>
+ </div>
+</div>
+</body>
+</html>
Index: dom/removeclass.html
===================================================================
RCS file: dom/removeclass.html
diff -N dom/removeclass.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/removeclass.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>DOM Example: removeClass</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="../../build/event/event.js"></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+<script type="text/javascript">
+YAHOO.namespace('example.dom');
+
+YAHOO.example.dom.init = function() {
+
+ var remove = function(e) {
+ YAHOO.util.Dom.removeClass('test', 'foo');
+ alert(document.getElementById('test').className);
+ };
+
+ YAHOO.util.Event.addListener(document, 'click', remove);
+};
+
+YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
+</script>
+<link rel="stylesheet" type="text/css" href="css/dom.css">
+</head>
+
+<body>
+<div id="doc">
+ <h1>DOM Example: removeClass</h1>
+ <p>This example demonstrates how to use Dom.removeClass to remove a class
from a given element.</p>
+ <p>Click anywhere to test.</p>
+ <div class="bar foo" id="test"></div>
+</div>
+
+
+</body>
+</html>
Index: dom/setstyle.html
===================================================================
RCS file: dom/setstyle.html
diff -N dom/setstyle.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/setstyle.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>DOM Example: setStyle</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="../../build/event/event.js"></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+<script type="text/javascript">
+YAHOO.namespace('example.dom');
+
+YAHOO.example.dom.init = function() {
+
+ var fade = function(e) {
+ YAHOO.util.Dom.setStyle('fade', 'opacity', .5);
+ };
+
+ YAHOO.util.Event.addListener(document, 'click', fade);
+};
+
+YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
+</script>
+
+<link rel="stylesheet" type="text/css" href="css/dom.css">
+</head>
+
+<body>
+<div id="doc">
+ <h1>DOM Example: setStyle</h1>
+ <p>This example demonstrates how to use Dom.setStyle to set the opacity of
an element.</p>
+ <p>Click anywhere to set the element's opacity.</p>
+ <div id="fade">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
</div>
+</div>
+
+
+</body>
+</html>
Index: dom/setxy.html
===================================================================
RCS file: dom/setxy.html
diff -N dom/setxy.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/setxy.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>DOM Example: setXY</title>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
+<script type="text/javascript" src="../../build/event/event.js"></script>
+<script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+<script type="text/javascript">
+YAHOO.namespace('example.dom');
+
+YAHOO.example.dom.init = function() {
+
+ var move = function(e) {
+ var xy = [YAHOO.util.Event.getPageX(e), YAHOO.util.Event.getPageY(e)];
+ YAHOO.util.Dom.setXY('test', xy);
+ };
+
+ YAHOO.util.Event.addListener(document, 'click', move);
+};
+
+YAHOO.util.Event.addListener(window, 'load', YAHOO.example.dom.init);
+</script>
+
+<link rel="stylesheet" type="text/css" href="css/dom.css">
+</head>
+
+<body>
+<div id="doc">
+ <h1>DOM Example: setXY</h1>
+ <p>This example demonstrates how to use Dom.setXY to set an elements
position.</p>
+ <p>Click anywhere and the element will move to the click point.</p>
+ <div id="test"></div>
+</div>
+
+
+</body>
+</html>
Index: dom/css/dom.css
===================================================================
RCS file: dom/css/dom.css
diff -N dom/css/dom.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dom/css/dom.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,79 @@
+/*
+Copyright (c) 2006, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.net/yui/license.txt
+Version: 0.10.0
+*/
+
+body {
+ margin:0;
+ font:small arial;
+}
+
+h1 {
+ color:#666;
+ margin:0;
+ font:bold 150% palatino, georgia;
+}
+
+#hd img {
+ vertical-align:middle;
+}
+
+#hd h1 {
+ display:inline;
+ margin:0 0 0 20px;
+ vertical-align:middle;
+}
+
+ul, li {
+ margin:0;
+ padding:0;
+ list-style:none;
+}
+
+#doc {
+ margin:10px;
+}
+
+#examples {
+ margin:60px 40px;
+}
+
+#examples li {
+ margin-bottom:1em;
+}
+
+#examples li a {
+ font:85% verdana;
+}
+
+#example li a:link {
+ color:#666;
+}
+
+
+#test {
+ background:#ccc;
+ font-size:0;
+ width:10px; height:10px;
+ position:absolute;
+ z-index:10;
+}
+
+#fade {
+ background:#ccc;
+ width:200px; height:200px;
+}
+
+#end {
+ background:red;
+ font-size:0;
+ position:relative;
+ top:300px;left:200px;
+ width:10px; height:10px;
+}
+
+#collection .test {
+ color:green;
+}
\ No newline at end of file
Index: dom/img/logo.gif
===================================================================
RCS file: dom/img/logo.gif
diff -N dom/img/logo.gif
Binary files /dev/null and /tmp/cvsYSZHBr differ
Index: dragdrop/drag.html
===================================================================
RCS file: dragdrop/drag.html
diff -N dragdrop/drag.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/drag.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,202 @@
+ <!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
Index: dragdrop/grid.html
===================================================================
RCS file: dragdrop/grid.html
diff -N dragdrop/grid.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/grid.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,179 @@
+<!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
Index: dragdrop/index.html
===================================================================
RCS file: dragdrop/index.html
diff -N dragdrop/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/index.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,74 @@
+
+<!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 inportant moment hooks
+ 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 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>
Index: dragdrop/interface.html
===================================================================
RCS file: dragdrop/interface.html
diff -N dragdrop/interface.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/interface.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,148 @@
+ <!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
Index: dragdrop/list.html
===================================================================
RCS file: dragdrop/list.html
diff -N dragdrop/list.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/list.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,207 @@
+ <!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
+
Index: dragdrop/multihandle.html
===================================================================
RCS file: dragdrop/multihandle.html
diff -N dragdrop/multihandle.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/multihandle.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,163 @@
+ <!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
+
Index: dragdrop/ontop.html
===================================================================
RCS file: dragdrop/ontop.html
diff -N dragdrop/ontop.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/ontop.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,205 @@
+ <!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
Index: dragdrop/proxy.html
===================================================================
RCS file: dragdrop/proxy.html
diff -N dragdrop/proxy.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/proxy.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,279 @@
+<!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
Index: dragdrop/resize.html
===================================================================
RCS file: dragdrop/resize.html
diff -N dragdrop/resize.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/resize.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,192 @@
+<!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
Index: dragdrop/slider.html
===================================================================
RCS file: dragdrop/slider.html
diff -N dragdrop/slider.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/slider.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,576 @@
+<!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>
Index: dragdrop/targetable.html
===================================================================
RCS file: dragdrop/targetable.html
diff -N dragdrop/targetable.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/targetable.html 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,216 @@
+ <!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) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
Index: dragdrop/css/ie.css
===================================================================
RCS file: dragdrop/css/ie.css
diff -N dragdrop/css/ie.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/css/ie.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1 @@
+#container { float: none; }
#header h1 { margin-left: 24px; }
#content { margin-left: 25px; }
#pageTitle {top:10px;}
\ No newline at end of file
Index: dragdrop/css/screen.css
===================================================================
RCS file: dragdrop/css/screen.css
diff -N dragdrop/css/screen.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ dragdrop/css/screen.css 25 Sep 2006 10:27:17 -0000 1.1
@@ -0,0 +1,301 @@
+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: 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;
+ }
+
+.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; }
+
+
Index: dragdrop/img/bullet.gif
===================================================================
RCS file: dragdrop/img/bullet.gif
diff -N dragdrop/img/bullet.gif
Binary files /dev/null and /tmp/cvs2nWfXx differ
Index: dragdrop/img/channel.png
===================================================================
RCS file: dragdrop/img/channel.png
diff -N dragdrop/img/channel.png
Binary files /dev/null and /tmp/cvspJEMny differ
Index: dragdrop/img/grid.png
===================================================================
RCS file: dragdrop/img/grid.png
diff -N dragdrop/img/grid.png
Binary files /dev/null and /tmp/cvs0xGLVy differ
Index: dragdrop/img/hline.png
===================================================================
RCS file: dragdrop/img/hline.png
diff -N dragdrop/img/hline.png
Binary files /dev/null and /tmp/cvsXuaG0w differ
Index: dragdrop/img/horizBg.png
===================================================================
RCS file: dragdrop/img/horizBg.png
diff -N dragdrop/img/horizBg.png
Binary files /dev/null and /tmp/cvsmmbGhx differ
Index: dragdrop/img/horizSlider.png
===================================================================
RCS file: dragdrop/img/horizSlider.png
diff -N dragdrop/img/horizSlider.png
Binary files /dev/null and /tmp/cvsxEPtKx differ
Index: dragdrop/img/horizSlider_on.png
===================================================================
RCS file: dragdrop/img/horizSlider_on.png
diff -N dragdrop/img/horizSlider_on.png
Binary files /dev/null and /tmp/cvsklImCA differ
Index: dragdrop/img/hue.png
===================================================================
RCS file: dragdrop/img/hue.png
diff -N dragdrop/img/hue.png
Binary files /dev/null and /tmp/cvspohn5A differ
Index: dragdrop/img/logo.gif
===================================================================
RCS file: dragdrop/img/logo.gif
diff -N dragdrop/img/logo.gif
Binary files /dev/null and /tmp/cvsEN3ZtB differ
Index: dragdrop/img/lthumb.png
===================================================================
RCS file: dragdrop/img/lthumb.png
diff -N dragdrop/img/lthumb.png
Binary files /dev/null and /tmp/cvsPWo8Bz differ
Index: dragdrop/img/navHover2.png
===================================================================
RCS file: dragdrop/img/navHover2.png
diff -N dragdrop/img/navHover2.png
Binary files /dev/null and /tmp/cvsmzy0Rz differ
Index: dragdrop/img/pickerbg.png
===================================================================
RCS file: dragdrop/img/pickerbg.png
diff -N dragdrop/img/pickerbg.png
Binary files /dev/null and /tmp/cvs1J3tiA differ
Index: dragdrop/img/qbottom.png
===================================================================
RCS file: dragdrop/img/qbottom.png
diff -N dragdrop/img/qbottom.png
Binary files /dev/null and /tmp/cvswi5x7C differ
Index: dragdrop/img/qmiddle.png
===================================================================
RCS file: dragdrop/img/qmiddle.png
diff -N dragdrop/img/qmiddle.png
Binary files /dev/null and /tmp/cvsf4LBGD differ
Index: dragdrop/img/qtop.png
===================================================================
RCS file: dragdrop/img/qtop.png
diff -N dragdrop/img/qtop.png
Binary files /dev/null and /tmp/cvsYCHMJB differ
Index: dragdrop/img/select.gif
===================================================================
RCS file: dragdrop/img/select.gif
diff -N dragdrop/img/select.gif
Binary files /dev/null and /tmp/cvsRQz10B differ
Index: dragdrop/img/select.png
===================================================================
RCS file: dragdrop/img/select.png
diff -N dragdrop/img/select.png
Binary files /dev/null and /tmp/cvs6EAYqC differ
Index: dragdrop/img/sortList.png
===================================================================
RCS file: dragdrop/img/sortList.png
diff -N dragdrop/img/sortList.png
Binary files /dev/null and /tmp/cvsBbHYlF differ
Index: dragdrop/img/sq1.png
===================================================================
RCS file: dragdrop/img/sq1.png
diff -N dragdrop/img/sq1.png
Binary files /dev/null and /tmp/cvsodiLOF differ
Index: dragdrop/img/sq2.png
===================================================================
RCS file: dragdrop/img/sq2.png
diff -N dragdrop/img/sq2.png
Binary files /dev/null and /tmp/cvs3eVmdG differ
Index: dragdrop/img/sq3.png
===================================================================
RCS file: dragdrop/img/sq3.png
diff -N dragdrop/img/sq3.png
Binary files /dev/null and /tmp/cvsWrzElE differ
Index: dragdrop/img/vertBg.png
===================================================================
RCS file: dragdrop/img/vertBg.png
diff -N dragdrop/img/vertBg.png
Binary files /dev/null and /tmp/cvsJXooDE differ
Index: dragdrop/img/vertSlider.png
===================================================================
RCS file: dragdrop/img/vertSlider.png
diff -N dragdrop/img/vertSlider.png
Binary files /dev/null and /tmp/cvsK7m21E differ
Index: dragdrop/img/vertSlider_on.png
===================================================================
RCS file: dragdrop/img/vertSlider_on.png
diff -N dragdrop/img/vertSlider_on.png
Binary files /dev/null and /tmp/cvsb4C2WH differ
Index: dragdrop/img/vline.png
===================================================================
RCS file: dragdrop/img/vline.png
diff -N dragdrop/img/vline.png
Binary files /dev/null and /tmp/cvsuje6mI differ
Index: fonts/default.html
===================================================================
RCS file: fonts/default.html
diff -N fonts/default.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ fonts/default.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,13 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+ <title>Default Fonts Example - YUI Fonts</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+</head>
+
+<body>
+
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure.</p>
+
+</body>
+</html>
\ No newline at end of file
Index: fonts/fontfamily.html
===================================================================
RCS file: fonts/fontfamily.html
diff -N fonts/fontfamily.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ fonts/fontfamily.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+ <title>Font-family Adjustment Example - YUI Fonts</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+<style>
+blockquote p {font-size:77%;font-family:verdana;}
+strong {font-size:122%;font-family:georgia;}
+</style>
+</head>
+
+<body>
+
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velierat volutpat.</p>
+
+<blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriu
aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in.</p>
+</blockquote>
+
+<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</strong> Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in.</p>
+
+</body>
+</html>
\ No newline at end of file
Index: fonts/fontsize.html
===================================================================
RCS file: fonts/fontsize.html
diff -N fonts/fontsize.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ fonts/fontsize.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+ <title>Font-size Adjustment Example - YUI Fonts</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+<style>
+blockquote p {font-size:77%;}
+strong {font-size:122%;}
+</style>
+</head>
+
+<body>
+
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velierat volutpat.</p>
+
+<blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriu
aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in.</p>
+</blockquote>
+
+<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</strong> Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in.</p>
+
+</body>
+</html>
\ No newline at end of file
Index: grids/example_t1.html
===================================================================
RCS file: grids/example_t1.html
diff -N grids/example_t1.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t1.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t1"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <!-- YOUR STUFF HERE -->
+ <p>PRIMARY: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget
odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- YOUR STUFF HERE -->
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g1.html
===================================================================
RCS file: grids/example_t2-g1.html
diff -N grids/example_t2-g1.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g1.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,55 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-u">
+ <!-- start: your content here -->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit A</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT: Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus.
Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g10.html
===================================================================
RCS file: grids/example_t2-g10.html
diff -N grids/example_t2-g10.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g10.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-gf">
+ <div class="yui-u first">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit A</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit
BCD</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g2.html
===================================================================
RCS file: grids/example_t2-g2.html
diff -N grids/example_t2-g2.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g2.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-g">
+ <div class="yui-u first">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit A</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit B</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g3.html
===================================================================
RCS file: grids/example_t2-g3.html
diff -N grids/example_t2-g3.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g3.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-gb">
+ <div class="yui-u first">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit A</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit B</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit C</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g4.html
===================================================================
RCS file: grids/example_t2-g4.html
diff -N grids/example_t2-g4.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g4.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-gc">
+ <div class="yui-u first">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit AB</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit C</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g5.html
===================================================================
RCS file: grids/example_t2-g5.html
diff -N grids/example_t2-g5.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g5.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-gd">
+ <div class="yui-u first">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit A</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit BC</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g6.html
===================================================================
RCS file: grids/example_t2-g6.html
diff -N grids/example_t2-g6.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g6.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-g">
+ <div class="yui-g first">
+ <div class="yui-u first">
+ <!-- start: your
content here -->
+ <div class="mod">
+ <div class="hd">
+
<h2>Unit A</h2>
+ </div>
+ <div class="hd">
+ <p>GRID
UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam
erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat.
Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc
gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede,
ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur
egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content
here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your
content here -->
+ <div class="mod">
+ <div class="hd">
+
<h2>Unit B</h2>
+ </div>
+ <div class="hd">
+ <p>GRID
UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam
erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat.
Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc
gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede,
ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur
egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content
here -->
+ </div>
+ </div>
+ <div class="yui-g">
+ <div class="yui-u first">
+ <!-- start: your
content here -->
+ <div class="mod">
+ <div class="hd">
+
<h2>Unit C</h2>
+ </div>
+ <div class="hd">
+ <p>GRID
UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam
erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat.
Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc
gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede,
ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur
egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content
here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your
content here -->
+ <div class="mod">
+ <div class="hd">
+
<h2>Unit D</h2>
+ </div>
+ <div class="hd">
+ <p>GRID
UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam
erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat.
Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc
gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede,
ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur
egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content
here -->
+ </div>
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g7.html
===================================================================
RCS file: grids/example_t2-g7.html
diff -N grids/example_t2-g7.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g7.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-g">
+ <div class="yui-u first">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit AB</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <div class="yui-g">
+ <div class="yui-u first">
+ <!-- start: your
content here -->
+ <div class="mod">
+ <div class="hd">
+
<h2>Unit C</h2>
+ </div>
+ <div class="hd">
+ <p>GRID
UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam
erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat.
Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc
gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede,
ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur
egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content
here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your
content here -->
+ <div class="mod">
+ <div class="hd">
+
<h2>Unit D</h2>
+ </div>
+ <div class="hd">
+ <p>GRID
UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam
erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat.
Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc
gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede,
ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur
egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content
here -->
+ </div>
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g8.html
===================================================================
RCS file: grids/example_t2-g8.html
diff -N grids/example_t2-g8.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g8.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,83 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-g">
+ <div class="yui-g first">
+ <div class="yui-u first">
+ <!-- start: your
content here -->
+ <div class="mod">
+ <div class="hd">
+
<h2>Unit A</h2>
+ </div>
+ <div class="hd">
+ <p>GRID
UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam
erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat.
Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc
gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede,
ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur
egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content
here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your
content here -->
+ <div class="mod">
+ <div class="hd">
+
<h2>Unit B</h2>
+ </div>
+ <div class="hd">
+ <p>GRID
UNIT: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit
amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam
erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus
feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat.
Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc
gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede,
ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur
egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content
here -->
+ </div>
+ </div>
+ <div class="yui-u">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit CD</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2-g9.html
===================================================================
RCS file: grids/example_t2-g9.html
diff -N grids/example_t2-g9.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2-g9.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,69 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <div class="yui-ge">
+ <div class="yui-u first">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit
ABC</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ <div class="yui-u">
+ <!-- start: your content here
-->
+ <div class="mod">
+ <div class="hd">
+ <h2>Unit D</h2>
+ </div>
+ <div class="hd">
+ <p>GRID UNIT:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet
metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat
volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at,
iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut
euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas
tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam.
Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed
eleifend.</p>
+ </div>
+ </div>
+ <!-- end: your content here -->
+ </div>
+ </div>
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t2.html
===================================================================
RCS file: grids/example_t2.html
diff -N grids/example_t2.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t2.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t2"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <!-- start: your content here -->
+ <p>PRIMARY: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget
odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t3.html
===================================================================
RCS file: grids/example_t3.html
diff -N grids/example_t3.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t3.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t3"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <!-- start: your content here -->
+ <p>PRIMARY: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget
odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t4.html
===================================================================
RCS file: grids/example_t4.html
diff -N grids/example_t4.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t4.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t4"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <!-- start: your content here -->
+ <p>PRIMARY: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget
odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t5.html
===================================================================
RCS file: grids/example_t5.html
diff -N grids/example_t5.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t5.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t5"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <!-- start: your content here -->
+ <p>PRIMARY: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget
odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t6.html
===================================================================
RCS file: grids/example_t6.html
diff -N grids/example_t6.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t6.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t6"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <!-- start: your content here -->
+ <p>PRIMARY: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget
odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+ <!-- start: your content here -->
+ <p>SECONDARY: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio.
Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: grids/example_t7.html
===================================================================
RCS file: grids/example_t7.html
diff -N grids/example_t7.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ grids/example_t7.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<!-- layouts require "Standards Mode" rendering, which the 401-strict doctype
triggers -->
+<html>
+<head>
+ <title>Grids CSS Example - YUI Grids</title>
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+</head>
+
+<body id="yahoo-com">
+<div id="doc" class="yui-t7"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <!-- start: your content here -->
+ <p>MASTHEAD: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor
in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet
dignissim cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+ <!-- start: your content here -->
+ <p>PRIMARY: Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa
sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget
odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem.
Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean
ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et
purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
+ <!-- end: your content here -->
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+ </div>
+ <div id="ft">
+ <!-- start: your content here -->
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+ <!-- end: your content here -->
+ </div>
+</div>
+</body>
+</html>
+
Index: logger/autocomplete.html
===================================================================
RCS file: logger/autocomplete.html
diff -N logger/autocomplete.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ logger/autocomplete.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,168 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Logger Widget :: YUI Integration Example</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/grids/grids.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+
+<style type="text/css">
+ #statesmod {position:relative;}
+ #statesautocomplete{position:relative;width:15em;margin-bottom:1em;}/* set
width of widget here*/
+ #statesinput {width:100%;height:1.4em;}
+ #statescontainer {position:absolute;top:1.7em;width:100%}
+ #statescontainer .yui-ac-content {position:absolute;width:100%;border:1px
solid #404040;background:#fff;overflow:hidden;z-index:9050;}
+ #statescontainer .yui-ac-shadow
{position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
+ #statescontainer ul {padding:5px 0;width:100%;}
+ #statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
+ #statescontainer li.yui-ac-highlight {background:#ff0;}
+ #statescontainer li.yui-ac-prehighlight {background:#FFFFCC;}
+</style>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger
Widget</a> :: YUI Integration Example</h1>
+</div>
+
+<div id="bd">
+ <!-- Content begins -->
+ <h3>Using Logger to Debug YUI Library Components</h3>
+ <p>In this example, we have set up an instance of AutoComplete. By using
the
+ debug build of AutoComplete source code, we are able to instantiate a
+ LogReader on this page and read the messages generated from the component.
+ In order to place the LogReader in a convenient spot, we pass in a custom
+ bottom value into its constructor.</p>
+
+ <!-- AutoComplete begins -->
+ <div id="statesmod">
+ <form onsubmit="return validateForm();">
+ <h3>Find a state:</h3>
+ <div id="statesautocomplete">
+ <input id="statesinput">
+ <div id="statescontainer"></div>
+ </div>
+ </form>
+ </div>
+ <!-- AutoComplete ends -->
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ No CSS styles were defined.
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ No markup was defined.
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ // Instatiate LogReader
+ var oLogReader = new
YAHOO.widget.LogReader(null,{top:"auto",bottom:"10px",fontSize:"92%",width:"30em",height:"20em"});
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event-debug.js"></script>
+<script src="../../build/animation/animation.js"></script>
+<script src="../../build/autocomplete/autocomplete-debug.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<!-- In-memory JS array begins-->
+<script>
+var statesArray = [
+ "Alabama",
+ "Alaska",
+ "Arizona",
+ "Arkansas",
+ "California",
+ "Colorado",
+ "Connecticut",
+ "Delaware",
+ "Florida",
+ "Georgia",
+ "Hawaii",
+ "Idaho",
+ "Illinois",
+ "Indiana",
+ "Iowa",
+ "Kansas",
+ "Kentucky",
+ "Louisiana",
+ "Maine",
+ "Maryland",
+ "Massachusetts",
+ "Michigan",
+ "Minnesota",
+ "Mississippi",
+ "Missouri",
+ "Montana",
+ "Nebraska",
+ "Nevada",
+ "New Hampshire",
+ "New Jersey",
+ "New Mexico",
+ "New York",
+ "North Dakota",
+ "North Carolina",
+ "Ohio",
+ "Oklahoma",
+ "Oregon",
+ "Pennsylvania",
+ "Rhode Island",
+ "South Carolina",
+ "South Dakota",
+ "Tennessee",
+ "Texas",
+ "Utah",
+ "Vermont",
+ "Virginia",
+ "Washington",
+ "West Virginia",
+ "Wisconsin",
+ "Wyoming"
+];
+</script>
+<!-- In-memory JS array ends-->
+
+
+<script>
+YAHOO.example.AutoCompleteLogger = function() {
+ return {
+ validateForm: function() {
+ // Validate form inputs here
+ return false;
+ },
+
+ init: function() {
+ // Instatiate LogReader
+ var oLogReader = new
YAHOO.widget.LogReader(null,{top:"auto",bottom:"10px",fontSize:"92%",width:"30em",height:"20em"});
+
+ // Instantiate DataSource
+ var oACDS = new YAHOO.widget.DS_JSArray(statesArray);
+
+ // Instantiate AutoComplete
+ var oAutoComp = new
YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
+ oAutoComp.queryDelay = 0;
+ oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.AutoCompleteLogger.init);
+</script>
+</div>
+</body>
+</html>
Index: logger/index.html
===================================================================
RCS file: logger/index.html
diff -N logger/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ logger/index.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Logger Widget :: Implementation Examples</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css" />
+<link rel="stylesheet" type="text/css" href="./css/examples.css" />
+<style type="text/css">
+ul {margin:1em;}
+li {margin:1em;list-style-type:none;}
+</style>
+</head>
+<body>
+
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/>Logger Widget ::
Implementation Examples</h1>
+</div>
+
+<div id="bd">
+ <ul>
+ <li><a href="./readlogs.html">Reading Logs On Your Page</a></li>
+ <li><a href="./readlogscustom.html">Customizing LogReader For Your
Page</a></li>
+ <li><a href="./writelogs.html">Writing Logs From Your Code</a></li>
+ <li><a href="./autocomplete.html">Reading YUI Library Logs</a></li>
+ </ul>
+</div>
+</body>
+</html>
+
Index: logger/readlogs.html
===================================================================
RCS file: logger/readlogs.html
diff -N logger/readlogs.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ logger/readlogs.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,110 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Logger Widget :: Reading Logs</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger
Widget</a> :: Reading Logs</h1>
+</div>
+
+<div id="bd">
+ <!-- Content begins -->
+ <div id="content">
+ <h3>Default LogReader Example</h3>
+ <p>With just a few lines of code, you can put a LogReader on any web
+ page that displays log messages built into the YUI Library or custom
+ log messages that you can insert into your own code. This example takes
+ advantage of the YUI Library's Drag and Drop utility to make the
+ LogReader draggable.</p>
+
+ <p><input id="yui-log-inputinfo" class="yui-log-input" type="text"
value="Log an info message.">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputinfo').value,'info')">Log</button></p>
+ <p><input id="yui-log-inputwarn" class="yui-log-input" type="text"
value="Log a warning.">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputwarn').value,'warn')">Log</button></p>
+ <p><input id="yui-log-inputerror" class="yui-log-input" type="text"
value="Log an error.">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputerror').value,'error')">Log</button></p>
+ <p><input id="yui-log-inputtime" class="yui-log-input" type="text"
value="Log a timing message.">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputtime').value,'time')">Log</button></p>
+ <p><input id="yui-log-inputwindow" class="yui-log-input" type="text"
value="Log a window error.">
+ <button onclick="someUndefinedFunction();">Log</button> (not
supported in Opera, Safari)</p>
+ <p><input id="yui-log-inputcustommsg" class="yui-log-input"
type="text" value="Log a custom type message.">
+ <input id="yui-log-inputcustomtype" type="text" value="myType">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputcustommsg').value,document.getElementById('yui-log-inputcustomtype').value)">Log</button></p>
+
+ <p><a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide
All LogReaders</a> ||
+ <a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show
All LogReaders</a></p>
+
+ <p><a href="javascript:YAHOO.widget.Logger.disableFirebug();">Disable
Output to Firebug</a> ||
+ <a href="javascript:YAHOO.widget.Logger.enableFirebug();">Enable
Output to Firebug</a></p>
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ No CSS styles were defined.
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ No markup was defined
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ myLogReader1 = new YAHOO.widget.LogReader();
+ myLogReader2 = new YAHOO.widget.LogReader();
+ myLogReader2.newestOnTop = false;
+ myLogReader2.setTitle("Logger Console: Oldest > on > Top!");
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+
+ </div>
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event.js"></script>
+<script src="../../build/dragdrop/dragdrop.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<script>
+YAHOO.example.LogReader = function() {
+ var myLogReader1;
+ var myLogReader2;
+
+ return {
+ init: function() {
+ myLogReader1 = new YAHOO.widget.LogReader();
+ myLogReader2 = new YAHOO.widget.LogReader();
+ myLogReader2.newestOnTop = false;
+ myLogReader2.setTitle("Logger Console: Oldest > on > Top!");
+ },
+
+ hideAllReaders: function() {
+ myLogReader1.hide();
+ myLogReader2.hide();
+ },
+
+ showAllReaders: function() {
+ myLogReader1.show();
+ myLogReader2.show();
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.LogReader.init);
+</script>
+</div>
+</body>
+</html>
Index: logger/readlogscustom.html
===================================================================
RCS file: logger/readlogscustom.html
diff -N logger/readlogscustom.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ logger/readlogscustom.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,146 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Logger Widget :: Customizing LogReader</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+<style>
+/* customized ylogger styles - logger.css is NOT called above */
+/* font size is controlled here: default 77% */
+#yui-log {position:absolute;bottom:1em;right:1em;font-size:100%;}
+/* width is controlled here: default 31em */
+.yui-log {padding:1em;width:31em;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
{position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
+/* height is controlled here: default 20em*/
+.yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid
gray;overflow:auto;width:100%;height:10em;}
+.yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
+.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+.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>
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger
Widget</a> :: Customizing LogReader</h1>
+</div>
+
+<div id="bd">
+ <!-- Logger begins -->
+ <div id="yui-log" class="yui-log"></div>
+ <!-- Logger ends -->
+
+ <!-- Content begins -->
+ <div id="content">
+ <h3>Customized LogReader Example</h3>
+ <p>This LogReader implementation has been modified by changing some
default
+ CSS styles as well as modifying some properties through the
constructor.
+ In this example, the LogReader is placed in a fixed position at the
+ bottom right of the screen. The height of each of the consoles has been
+ made smaller, the font size has been bumped up, and the log messages of
+ the second LogReader has been made more compact (i.e., the line break
+ within each message has been removed).</p>
+
+ <p><input id="yui-log-inputinfo" class="yui-log-input" type="text"
value="Log an info message.">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputinfo').value,'info')">Log</button></p>
+ <p><input id="yui-log-inputwarn" class="yui-log-input" type="text"
value="Log a warning.">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputwarn').value,'warn')">Log</button></p>
+ <p><input id="yui-log-inputerror" class="yui-log-input" type="text"
value="Log an error.">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputerror').value,'error')">Log</button></p>
+ <p><input id="yui-log-inputtime" class="yui-log-input" type="text"
value="Log a timing message.">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputtime').value,'time')">Log</button></p>
+ <p><input id="yui-log-inputwindow" class="yui-log-input" type="text"
value="Log a window error.">
+ <button onclick="someUndefinedFunction();">Log</button> (not
supported in Opera, Safari)</p>
+ <p><input id="yui-log-inputcustommsg" class="yui-log-input"
type="text" value="Log a custom type message.">
+ <input id="yui-log-inputcustomtype" type="text" value="myType">
+ <button
onclick="YAHOO.log(document.getElementById('yui-log-inputcustommsg').value,document.getElementById('yui-log-inputcustomtype').value)">Log</button></p>
+
+ <p><a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide
All LogReaders</a> ||
+ <a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show
All LogReaders</a></p>
+
+ <p><a href="javascript:YAHOO.widget.Logger.disableFirebug();">Disable
Output to Firebug</a> ||
+ <a href="javascript:YAHOO.widget.Logger.enableFirebug();">Enable
Output to Firebug</a></p>
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ /* font size is controlled here: default 77% */
+ #yui-log {position:absolute;bottom:1em;right:1em;font-size:100%;}
+ /* width is controlled here: default 31em */
+ .yui-log {padding:1em;width:31em;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
{position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
+ /* height is controlled here: default 20em*/
+ .yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px
solid gray;overflow:auto;width:100%;height:10em;}
+ .yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
+ .yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
+ .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 */
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ <!-- Logger begins -->
+ <div id="yui-log" class="yui-log"></div>
+ <!-- Logger ends -->
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ myLogReader1 = new YAHOO.widget.LogReader("yui-log");
+ myLogReader2 = new YAHOO.widget.LogReader("yui-log",{compactOutput: true});
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ </div>
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<script>
+YAHOO.example.LogReader = function() {
+ var myLogReader1;
+ var myLogReader2;
+
+ return {
+ init: function() {
+ myLogReader1 = new YAHOO.widget.LogReader("yui-log");
+ myLogReader2 = new
YAHOO.widget.LogReader("yui-log",{compactOutput: true});
+ },
+
+ hideAllReaders: function() {
+ myLogReader1.hide();
+ myLogReader2.hide();
+ },
+
+ showAllReaders: function() {
+ myLogReader1.show();
+ myLogReader2.show();
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.LogReader.init);
+</script>
+</div>
+</body>
+</html>
Index: logger/writelogs.html
===================================================================
RCS file: logger/writelogs.html
diff -N logger/writelogs.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ logger/writelogs.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,161 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Logger Widget :: Writing Logs</title>
+<link rel="stylesheet" href="../../build/reset/reset.css" type="text/css" />
+<link rel="stylesheet" href="../../build/fonts/fonts.css" type="text/css" />
+<link rel="stylesheet" href="../../build/logger/assets/logger.css"
type="text/css" />
+<link rel="stylesheet" href="./css/examples.css" type="text/css" />
+</head>
+
+<body>
+<div id="hd">
+ <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger
Widget</a> :: Writing Logs</h1>
+</div>
+
+<div id="bd">
+ <!-- Content begins -->
+ <div id="content">
+ <h3>Writing Log Messages From Your Code</h3>
+ <p>In this example, we instanatiate a simple LogReader to display log
+ messages. We use the global method YAHOO.log() to write simple
messages,
+ and we also instantiate a LogWriter instance to write messages from a
+ custom-named source.</p>
+
+ <p><input id="yui-log-inputinfo" class="yui-log-input" type="text"
value="Log an info message.">
+ <button id="btn_loginfo">Log this message</button></p>
+ <p><input id="yui-log-inputwarn" class="yui-log-input" type="text"
value="Log a warning.">
+ <button id="btn_logwarn">Log this message</button></p>
+ <p><input id="yui-log-inputerror" class="yui-log-input" type="text"
value="Log an error.">
+ <button id="btn_logerror">Log this message</button></p>
+ <p><input id="yui-log-inputtime" class="yui-log-input" type="text"
value="Log a timing message.">
+ <button id="btn_logtime">Log this message</button></p>
+ <p><input id="yui-log-inputwindow" class="yui-log-input" type="text"
value="Log a window error.">
+ <button onclick="someUndefinedFunction();">Log this
message</button> (not supported in Opera, Safari)</p>
+ <p><input id="yui-log-inputcustommsg" class="yui-log-input"
type="text" value="Log a custom type message.">
+ <input id="yui-log-inputcustomtype" type="text" value="myCategory">
+ <button id="btn_logcustom">Log this message with this
category</button></p>
+
+ <p><input id="yui-log-inputsource" class="yui-log-input" type="text"
value="SomeClass instance1">
+ <button id="btn_logsource">Generate some messages from a named
source</button></p>
+
+ <!-- Sample code begins -->
+ <div id="code">
+ <h3>Sample Code</h3>
+
+ <p>CSS:</p>
+ <pre class="code">
+ No CSS styles were defined.
+ </pre>
+
+ <p>Markup:</p>
+ <pre class="code">
+ No markup was defined.
+ </pre>
+
+ <p>JavaScript:</p>
+ <pre class="code">
+ // Instantiate a logreader and a logwriter
+ myLogReader = new YAHOO.widget.LogReader(null,{top:"50%",right:"10px"});
+ myLogWriter = new YAHOO.widget.LogWriter("myWriter");
+
+ // You can call the global function YAHOO.log() anytime, anywhere
+ YAHOO.log("Yahoo! is great"); // defaults to type "info"
+ YAHOO.log("Here is a warning", "warn");
+ YAHOO.log("Some error has occurred", "error");
+ YAHOO.log("Use timers to profile your code", "time");
+
+ myLogWriter.log("something","info");
+ myLogWriter.log("something","warn");
+ myLogWriter.log("something","error");
+ myLogWriter.log("something","time");
+ myLogWriter.log("something","custom");
+ </pre>
+ </div>
+ <!-- Code sample ends -->
+ </div>
+ <!-- Content ends -->
+
+<!-- Libary begins -->
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/dom/dom.js"></script>
+<script src="../../build/event/event.js"></script>
+<script src="../../build/dragdrop/dragdrop.js"></script>
+<script src="../../build/logger/logger.js"></script>
+<!-- Library ends -->
+
+<script>
+YAHOO.example.LogWriter = function() {
+ var myLogReader;
+ var myLogWriter;
+
+ return {
+ init: function() {
+ // Instantiate a logreader and a logwriter
+ myLogReader = new
YAHOO.widget.LogReader(null,{top:"50%",right:"10px"});
+ myLogWriter = new YAHOO.widget.LogWriter("myWriter");
+
+ // You can call the global function YAHOO.log() anytime, anywhere
+ YAHOO.log("Yahoo! is great"); // defaults to type "info"
+ YAHOO.log("Here is a warning", "warn");
+ YAHOO.log("Some error has occurred", "error");
+ YAHOO.log("Use timers to profile your code", "time");
+
+ // Define interesting moments that cause log messages to be written
+ var oSelf = YAHOO.example.LogWriter;
+
YAHOO.util.Event.addListener(document.getElementById('btn_loginfo'),'click',oSelf.onLogInfoClick);
+
YAHOO.util.Event.addListener(document.getElementById('btn_logwarn'),'click',oSelf.onLogWarnClick);
+
YAHOO.util.Event.addListener(document.getElementById('btn_logerror'),'click',oSelf.onLogErrorClick);
+
YAHOO.util.Event.addListener(document.getElementById('btn_logtime'),'click',oSelf.onLogTimeClick);
+
YAHOO.util.Event.addListener(document.getElementById('btn_logcustom'),'click',oSelf.onLogCustomClick);
+
YAHOO.util.Event.addListener(document.getElementById('btn_logsource'),'click',oSelf.onSourceWriterClick);
+ },
+
+ hideAllReaders: function() {
+ myLogReader.hide();
+ },
+
+ showAllReaders: function() {
+ myLogReader.show();
+ },
+
+ createNewLogWriter: function(source) {
+ // You can instantiate your own named logwriter and use it to
write log messages
+ var newWriter = new YAHOO.widget.LogWriter(source);
+ newWriter.log("Doing great!"); // defaults to type "info"
+ newWriter.log("Giving a warning", "warn");
+ newWriter.log("Throwing an error", "error");
+ newWriter.log("Timing some code", "time");
+ },
+
+ onSourceWriterClick: function() {
+
YAHOO.example.LogWriter.createNewLogWriter(document.getElementById('yui-log-inputsource').value);
+ },
+
+ onLogInfoClick: function() {
+
myLogWriter.log(document.getElementById('yui-log-inputinfo').value,'info');
+ },
+
+ onLogWarnClick: function() {
+
myLogWriter.log(document.getElementById('yui-log-inputwarn').value,'warn');
+ },
+
+ onLogErrorClick: function() {
+
myLogWriter.log(document.getElementById('yui-log-inputerror').value,'error');
+ },
+
+ onLogTimeClick: function() {
+
myLogWriter.log(document.getElementById('yui-log-inputtime').value,'time');
+ },
+
+ onLogCustomClick: function() {
+
myLogWriter.log(document.getElementById('yui-log-inputcustommsg').value,document.getElementById('yui-log-inputcustomtype').value);
+ }
+ };
+}();
+
+YAHOO.util.Event.addListener(this,'load',YAHOO.example.LogWriter.init);
+</script>
+</div>
+</body>
+</html>
Index: logger/css/examples.css
===================================================================
RCS file: logger/css/examples.css
diff -N logger/css/examples.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ logger/css/examples.css 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,18 @@
+ h1 {font-size:144%;}
+ h2 {font-size:129%;}
+ h3 {font-size:114%;}
+ h4 {font-size:100%;}
+ body {margin:1em;font-family:verdana,arial,sans-serif;}
+ ul {width:80%;}
+ dl {padding:1em;}
+
+ #hd {position:relative;}
+ #hd .logo
{width:65px;height:38px;vertical-align:middle;padding-right:10px;}
+
+ #bd h1,h2,h3,p{margin:1em;}
+
+ #content .yui-log-input {width:40%;}
+
+ #code {clear:both;}
+ #code .code {padding:1em;background:#DEDEDE;border:1px solid
black;font-size:92%;}
+
Index: logger/img/logo.gif
===================================================================
RCS file: logger/img/logo.gif
diff -N logger/img/logo.gif
Binary files /dev/null and /tmp/cvspFNu1U differ
Index: menu/applicationmenubar.html
===================================================================
RCS file: menu/applicationmenubar.html
diff -N menu/applicationmenubar.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/applicationmenubar.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,410 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Application Menubar Example</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body {
+
+ background-color:#dfb8df;
+
+ }
+
+
+ /* Define a new style for each menubar */
+
+ div.yuimenubar {
+
+ border-width:1px 0;
+ border-color:#666;
+ border-style:solid;
+ background-color:#ccc;
+
+ }
+
+ div.yuimenubar div.bd {
+
+ border-width:1px 0;
+ border-color:#ddd;
+ border-style:solid;
+
+ }
+
+ div.yuimenubar li.yuimenubaritem {
+
+ border-width:0;
+ border-style:none;
+ padding:4px 12px;
+
+ }
+
+ div.yuimenubar li.yuimenubaritem img {
+
+ margin:0;
+ border:0;
+ height:1px;
+ width:1px;
+
+ }
+
+
+ /* Define a new style for each menu */
+
+ div.yuimenu {
+
+ border:solid 1px #666;
+ background-color:#ccc;
+
+ }
+
+ div.yuimenu div.bd {
+
+ border-width:0;
+ border-style:none;
+
+ }
+
+
+ /* Define a new style for each menu item */
+
+ div.yuimenu li.yuimenuitem {
+
+ padding-top:4px;
+ padding-bottom:4px;
+
+ }
+
+ div.yuimenu li.yuimenuitem img {
+
+ height:9px;
+ width:9px;
+ margin:0 -16px 0 10px;
+ border:0;
+
+ }
+
+ div.yuimenu ul {
+
+ border:solid 1px #666;
+ border-width:1px 0 0 0;
+
+ }
+
+
+ /* Define a new style for an item's "selected" state */
+
+ div.yuimenu li.selected,
+ div.yuimenubar li.selected {
+
+ background-color:#039;
+
+ }
+
+ div.yuimenu li.selected a.selected,
+ div.yuimenubar li.selected a.selected {
+
+ text-decoration:none;
+
+ }
+
+
+ /* Define a new style for an item's "disabled" state */
+
+ div.yuimenu li.disabled a.disabled,
+ div.yuimenu li.disabled em.disabled,
+ div.yuimenubar li.disabled a.disabled {
+
+ color:#666;
+
+ }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ /**
+ * Constant representing the path to the image to be used for the
+ * submenu arrow indicator.
+ * @final
+ * @type String
+ */
+ YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH =
+ "promo/m/irs/blank.gif";
+
+
+ /**
+ * Constant representing the path to the image to be used for the
+ * submenu arrow indicator when a MenuBarItem instance is selected.
+ * @final
+ * @type String
+ */
+
YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH =
+ "promo/m/irs/blank.gif";
+
+
+ /**
+ * Constant representing the path to the image to be used for the
+ * submenu arrow indicator when a MenuBarItem instance is disabled.
+ * @final
+ * @type String
+ */
+
YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH =
+ "promo/m/irs/blank.gif";
+
+
+ // "click" event handler for each item in the root MenuBar instance
+
+ function onMenuBarItemClick(p_sType, p_aArguments) {
+
+ this.parent.hasFocus = true;
+
+ var oActiveItem = this.parent.activeItem;
+
+
+ // Hide any other submenus that might be visible
+
+ if(oActiveItem && oActiveItem != this) {
+
+ this.parent.clearActiveItem();
+
+ }
+
+
+ // Select and focus the current MenuItem instance
+
+ this.cfg.setProperty("selected", true);
+ this.focus();
+
+
+ // Show the submenu for this instance
+
+ var oSubmenu = this.cfg.getProperty("submenu");
+
+ if(oSubmenu) {
+
+ if(oSubmenu.cfg.getProperty("visible")) {
+
+ oSubmenu.hide();
+
+ }
+ else {
+
+ oSubmenu.show();
+
+ }
+
+ }
+
+ }
+
+
+ // "mouseover" event handler for each item in the root MenuBar
instance
+
+ function onMenuBarItemMouseOver(p_sType, p_aArguments) {
+
+ var oActiveItem = this.parent.activeItem;
+
+
+ // Hide any other submenus that might be visible
+
+ if(oActiveItem && oActiveItem != this) {
+
+ this.parent.clearActiveItem();
+
+ }
+
+
+ // Select and focus the current MenuItem instance
+
+ this.cfg.setProperty("selected", true);
+ this.focus();
+
+ if(this.parent.hasFocus) {
+
+ // Show the submenu for this instance
+
+ var oSubmenu = this.cfg.getProperty("submenu");
+
+ if(oSubmenu) {
+
+ if(oSubmenu.cfg.getProperty("visible")) {
+
+ oSubmenu.hide();
+
+ }
+ else {
+
+ oSubmenu.show();
+
+ }
+
+ }
+
+ }
+
+ }
+
+
+ // "load" event handler for the window
+
+ function onWindowLoad() {
+
+ var MenuBar = YAHOO.widget.MenuBar,
+ MenuBarItem = YAHOO.widget.MenuBarItem,
+ Menu = YAHOO.widget.Menu,
+ MenuItem = YAHOO.widget.MenuItem;
+
+
+ var oApplicationsMenu = new Menu("applications");
+
+ oApplicationsMenu.addItem("Application 1");
+ oApplicationsMenu.addItem("Application 2");
+ oApplicationsMenu.addItem("Application 3");
+ oApplicationsMenu.addItem("Application 3");
+
+
+ var oFileMenu = new Menu("filemenu");
+
+ oFileMenu.addItem(new MenuItem("New File", { helptext: "Ctrl +
N" } ));
+ oFileMenu.addItem("New Folder");
+ oFileMenu.addItem(new MenuItem("Open", { helptext: "Ctrl + O"
}));
+ oFileMenu.addItem(new MenuItem("Open With...", { submenu:
oApplicationsMenu }));
+ oFileMenu.addItem(new MenuItem("Print", { helptext: "Ctrl + P"
}));
+
+
+ var oEditMenu = new Menu("edit");
+
+ oEditMenu.addItem(new MenuItem("Undo", { helptext: "Ctrl + Z"
}));
+ oEditMenu.addItem(new MenuItem("Redo", { helptext: "Ctrl + Y",
disabled: true }));
+ oEditMenu.addItem(new MenuItem("Cut", { helptext: "Ctrl + X",
disabled: true }), 1);
+ oEditMenu.addItem(new MenuItem("Copy", { helptext: "Ctrl + C",
disabled: true }), 1);
+ oEditMenu.addItem(new MenuItem("Paste", { helptext: "Ctrl + V"
}), 1);
+ oEditMenu.addItem(new MenuItem("Delete", { helptext: "Del",
disabled: true }), 1);
+ oEditMenu.addItem(new MenuItem("Select All", { helptext: "Ctrl
+ A" }), 2);
+ oEditMenu.addItem(new MenuItem("Find", { helptext: "Ctrl + F"
}), 3);
+ oEditMenu.addItem(new MenuItem("Find Again", { helptext: "Ctrl
+ G" }), 3);
+
+
+ var oMenuBar = new YAHOO.widget.MenuBar("test");
+
+ oMenuBar.addItem(new MenuBarItem("File", { submenu: oFileMenu
}));
+ oMenuBar.addItem(new MenuBarItem("Edit", { submenu: oEditMenu
}));
+ oMenuBar.addItem("View");
+ oMenuBar.addItem("Favorites");
+ oMenuBar.addItem("Tools");
+ oMenuBar.addItem("Tools");
+ oMenuBar.addItem("Help");
+ oMenuBar.addItem(new MenuBarItem("Examples Home", { url:
"index.html" }));
+
+
+ // Render the MenuBar instance and corresponding submenus
+
+ oMenuBar.render(document.body);
+
+
+ /*
+ Add a "click" and "mouseover" event handler to each item
+ in the root MenuBar instnace
+ */
+
+ var i = oMenuBar.getItemGroups()[0].length - 1,
+ oMenuBarItem;
+
+ do {
+
+ oMenuBarItem = oMenuBar.getItem(i);
+
+ if(oMenuBarItem) {
+
+ oMenuBarItem.clickEvent.subscribe(
+ onMenuBarItemClick,
+ oMenuBarItem,
+ true
+ );
+
+ oMenuBarItem.mouseOverEvent.subscribe(
+ onMenuBarItemMouseOver,
+ oMenuBarItem,
+ true
+ );
+
+ }
+
+ }
+ while(i--);
+
+
+ // "click" event handler for the document
+
+ function onDocumentClick(p_oEvent) {
+
+ YAHOO.example.OverlayManager.hideAll();
+
+ oMenuBar.hasFocus = false;
+
+ if(oMenuBar.activeItem) {
+
+ oMenuBar.clearActiveItem();
+ oMenuBar.activeItem.blur();
+
+ }
+
+ }
+
+
+ // Add a "click" handler for the document
+
+ YAHOO.util.Event.addListener(
+ document,
+ "click",
+ onDocumentClick
+ );
+
+
+ YAHOO.example.OverlayManager =
+ new YAHOO.widget.OverlayManager();
+
+
+ // Register the menus with the Overlay mananger
+
+ YAHOO.example.OverlayManager.register(oFileMenu);
+ YAHOO.example.OverlayManager.register(oApplicationsMenu);
+ YAHOO.example.OverlayManager.register(oEditMenu);
+
+ }
+
+
+ // Add a "load" handler for the window
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
\ No newline at end of file
Index: menu/contextmenu.html
===================================================================
RCS file: menu/contextmenu.html
diff -N menu/contextmenu.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/contextmenu.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,377 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Context Menu Example</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ h1, p, ul {
+
+ margin:1em;
+
+ }
+
+ h1 em,
+ p em,
+ #operainstructions li em {
+
+ font-weight:bold;
+
+ }
+
+ #operainstructions {
+
+ list-style-type:square;
+ margin-left:2em;
+
+ }
+
+ #clones {
+
+ background-color:#9C6;
+ width:450px;
+ height:400px;
+ overflow:auto;
+
+ }
+
+ #clones li {
+
+ float:left;
+ display:inline;
+ border:solid 1px #000;
+ background-color:#fff;
+ margin:10px;
+ text-align:center;
+
+ }
+
+ #clones li img {
+
+ border:solid 1px #000;
+ margin:5px;
+
+ }
+
+ #clones li cite {
+
+ display:block;
+ text-align:center;
+ margin:0 0 5px 0;
+ padding:0 5px;
+
+ }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ // Renames an "Ewe"
+
+ function EditEweName(p_oLI) {
+
+ var oCite = p_oLI.lastChild;
+
+ if(oCite.nodeType != 1) {
+
+ oCite = oCite.previousSibling;
+
+ }
+
+ var oTextNode = oCite.firstChild;
+
+ var sName =
+ window.prompt(
+ "Enter a new name for ",
+ oTextNode.nodeValue
+ );
+
+ if(sName && sName.length > 0) {
+
+ oTextNode.nodeValue = sName;
+
+ }
+
+ }
+
+
+ // Clones an "Ewe"
+
+ function CloneEwe(p_oLI) {
+
+ var oClone = p_oLI.cloneNode(true);
+
+ p_oLI.parentNode.appendChild(oClone);
+
+ }
+
+
+ // Deletes an "Ewe"
+
+ function DeleteEwe(p_oLI) {
+
+ var oUL = p_oLI.parentNode;
+
+ oUL.removeChild(p_oLI);
+
+ }
+
+
+
+ /*
+ Returns the LI instance that is the parent node of the target
+ of a "contextmenu" event
+ */
+
+ function GetListItemFromEvenTarget(p_oNode) {
+
+ var oLI;
+
+ if(p_oNode.tagName == "LI") {
+
+ oLI = p_oNode;
+
+ }
+ else {
+
+ /*
+ If the target of the event was a child of an LI,
+ get the parent LI element
+ */
+
+ do {
+
+ if(p_oNode.tagName == "LI") {
+
+ oLI = p_oNode;
+
+ break;
+
+ }
+
+ }
+ while((p_oNode = p_oNode.parentNode));
+
+ }
+
+ return oLI;
+
+ }
+
+
+ // "move" event handler for the context menu
+
+ function onContextMenuMove() {
+
+ var oNode = this.contextEventTarget;
+ var bDisabled = (oNode.tagName == "UL");
+ var i = this.getItemGroups()[0].length - 1;
+
+ do {
+
+ this.getItem(i).cfg.setProperty("disabled", bDisabled);
+
+ }
+ while(i--);
+
+ }
+
+
+ // "click" event handler for each item in the context menu
+
+ function onContextMenuItemClick(p_sType, p_aArguments) {
+
+ var oLI =
+ GetListItemFromEvenTarget(this.parent.contextEventTarget);
+
+ switch(this.index) {
+
+ case 0: // Edit name
+
+ EditEweName(oLI);
+
+ break;
+
+
+ case 1: // Clone
+
+ CloneEwe(oLI);
+
+ break;
+
+
+ case 2: // Delete
+
+ DeleteEwe(oLI);
+
+ break;
+
+ }
+
+ this.parent.hide();
+
+ }
+
+
+ // "keydown" event handler for the context menu
+
+ function onContextMenuKeyDown(p_sType, p_sArguments, p_oMenu) {
+
+ var oDOMEvent = p_sArguments[0];
+
+ if(oDOMEvent.shiftKey) {
+
+ var oLI =
+ GetListItemFromEvenTarget(this.contextEventTarget);
+
+ switch(oDOMEvent.keyCode) {
+
+ case 69: // Edit name
+
+ EditEweName(oLI);
+
+ this.hide();
+
+ break;
+
+ case 67: // Clone
+
+ CloneEwe(oLI);
+
+ this.hide();
+
+ break;
+
+ case 68: // Delete
+
+ DeleteEwe(oLI);
+
+ this.hide();
+
+ break;
+
+ }
+
+ }
+
+ }
+
+
+ // "load" event handler for the "window" object
+
+ function onWindowLoad(p_oEvent) {
+
+ // Create the context menu
+
+ var oContextMenu = new YAHOO.widget.ContextMenu(
+ "contextmenu",
+ { trigger: "clones" }
+ );
+
+ var aMainMenuItems = [
+ { text: "Edit Name", helptext: "Shift + E" },
+ { text: "Clone", helptext: "Shift + C" },
+ { text: "Delete", helptext: "Shift + D" }
+ ];
+
+ var nMainMenuItems = aMainMenuItems.length;
+
+ var oMenuItem;
+
+
+ // Add items to the main menu
+
+ for(var i=0; i<nMainMenuItems; i++) {
+
+ oMenuItem =
+ new YAHOO.widget.ContextMenuItem(
+ aMainMenuItems[i].text,
+ { helptext: aMainMenuItems[i].helptext }
+ );
+
+ /*
+ Add a "click" event handler to each
+ ContextMenuItem instance
+ */
+
+ oMenuItem.clickEvent.subscribe(onContextMenuItemClick);
+
+ oContextMenu.addItem(oMenuItem);
+
+ }
+
+
+ // Add a "move" event handler to the context menu
+
+ oContextMenu.moveEvent.subscribe(
+ onContextMenuMove,
+ oContextMenu,
+ true
+ );
+
+
+ // Add a "keydown" event handler to the context menu
+
+ oContextMenu.keyDownEvent.subscribe(
+ onContextMenuKeyDown,
+ oContextMenu,
+ true
+ );
+
+
+ // Render the context menu
+
+ oContextMenu.render(document.body);
+
+ }
+
+
+ // Assign a "load" event handler to the window
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+
+ </head>
+ <body>
+ <h1>Context Menu Example <em>[<a href="index.html">Examples
Home</a>]</em></h1>
+
+ <p>Use the context menu to rename, clone or delete Dolly.</p>
+
+ <p><em>Please Note:</em> Opera users will need to do the following to
use this example:</p>
+
+ <ul id="operainstructions">
+ <li><em>Opera for Windows:</em> Hold down the control key and
click with the left mouse button.</li>
+ <li><em>Opera for OS X:</em> Hold down the command key (⌘)
and click with the left mouse button.</li>
+ </ul>
+
+ <ul id="clones">
+ <li><a href="http://en.wikipedia.org/wiki/Dolly_%28clone%29";><img
src="img/dolly.jpg" width="100" height="100" alt="Dolly, a ewe, the first
mammal to have been successfully cloned from an adult
cell."></a><cite>Dolly</cite></li>
+ </ul>
+
+ </body>
+</html>
\ No newline at end of file
Index: menu/example01.html
===================================================================
RCS file: menu/example01.html
diff -N menu/example01.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example01.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,72 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 1: Basic Menu From Existing Markup</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter:
true });
+
+ oMenu.render();
+
+ oMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+
+ <h1>Example 1: Basic Menu From Existing Markup <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to create a basic menu using existing
markup on the page. The Menu API also supports building a menu like this <a
href="example02.html">using nothing but JavaScript</a>.</p>
+
+ <div id="basicmenu" class="yuimenu">
+ <div class="bd">
+ <ul class="first-of-type">
+ <li class="yuimenuitem"><a
href="http://mail.yahoo.com";>Yahoo! Mail</a></li>
+ <li class="yuimenuitem"><a
href="http://addressbook.yahoo.com";>Yahoo! Address Book</a></li>
+ <li class="yuimenuitem"><a
href="http://calendar.yahoo.com";>Yahoo! Calendar</a></li>
+ <li class="yuimenuitem"><a
href="http://notepad.yahoo.com";>Yahoo! Notepad</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
Index: menu/example02.html
===================================================================
RCS file: menu/example02.html
diff -N menu/example02.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example02.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,85 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 2: Basic Menu From Pure JavaScript</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter:
true });
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Mail",
+ { url:"http://mail.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Address Book",
+ { url:"http://addressbook.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Calendar",
+ { url:"http://calendar.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Notepad",
+ { url:"http://notepad.yahoo.com"}
+ )
+ );
+
+ oMenu.render(document.body);
+
+ oMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 2: Basic Menu From Pure JavaScript <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to create a basic menu using nothing
but JavaScript. The Menu API also supports building a menu like this <a
href="example01.html">using existing markup</a>.</p>
+ </body>
+</html>
\ No newline at end of file
Index: menu/example03.html
===================================================================
RCS file: menu/example03.html
diff -N menu/example03.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example03.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,81 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 3: Grouped MenuItem Instances From Existing
Markup</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ var oMenu = new YAHOO.widget.Menu("menuwithgroups", {
fixedcenter: true });
+
+ oMenu.render();
+
+ oMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 3: Grouped MenuItem Instances From Existing Markup <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to group MenuItem instances. The
Menu API also supports building a menu like this <a href="example04.html">using
nothing but JavaScript</a>.</p>
+
+ <div id="menuwithgroups" class="yuimenu">
+ <div class="bd">
+ <ul class="first-of-type">
+ <li class="yuimenuitem"><a
href="http://mail.yahoo.com";>Yahoo! Mail</a></li>
+ <li class="yuimenuitem"><a
href="http://addressbook.yahoo.com";>Yahoo! Address Book</a></li>
+ <li class="yuimenuitem"><a
href="http://calendar.yahoo.com";>Yahoo! Calendar</a></li>
+ <li class="yuimenuitem"><a
href="http://notepad.yahoo.com";>Yahoo! Notepad</a></li>
+ </ul>
+ <ul>
+ <li class="yuimenuitem"><a
href="http://local.yahoo.com";>Yahoo! Local</a></li>
+ <li class="yuimenuitem"><a
href="http://maps.yahoo.com";>Yahoo! Maps</a></li>
+ <li class="yuimenuitem"><a
href="http://travel.yahoo.com";>Yahoo! Travel</a></li>
+ <li class="yuimenuitem"><a
href="http://shopping.yahoo.com";>Yahoo! Shopping</a></li>
+ </ul>
+ <ul>
+ <li class="yuimenuitem"><a
href="http://messenger.yahoo.com";>Yahoo! Messenger</a></li>
+ <li class="yuimenuitem"><a
href="http://360.yahoo.com";>Yahoo! 360</a></li>
+ <li class="yuimenuitem"><a
href="http://groups.yahoo.com";>Yahoo! Groups</a></li>
+ <li class="yuimenuitem"><a
href="http://photos.yahoo.com";>Yahoo! Photos</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </body>
+</html>
Index: menu/example04.html
===================================================================
RCS file: menu/example04.html
diff -N menu/example04.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example04.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,158 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 4: Grouped MenuItem Instances Using Pure
JavaScript</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ var oMenu = new YAHOO.widget.Menu("menuwithgroups", {
fixedcenter: true });
+
+ // Add MenuItem instances to the first group
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Mail",
+ { url:"http://mail.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Address Book",
+ { url:"http://addressbook.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Calendar",
+ { url:"http://calendar.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Notepad",
+ { url:"http://notepad.yahoo.com"}
+ )
+ );
+
+
+ // Add MenuItem instances to the second group
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Local",
+ { url:"http://local.yahoo.com"}
+ ),
+ 1
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Maps",
+ { url:"http://maps.yahoo.com"}
+ ),
+ 1
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Travel",
+ { url:"http://travel.yahoo.com"}
+ ),
+ 1
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Shopping",
+ { url:"http://shopping.yahoo.com"}
+ ),
+ 1
+ );
+
+
+ // Add MenuItem instances to the third group
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Messenger",
+ { url:"http://messenger.yahoo.com"}
+ ),
+ 2
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! 360",
+ { url:"http://360.yahoo.com"}
+ ),
+ 2
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Groups",
+ { url:"http://groups.yahoo.com"}
+ ),
+ 2
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Photos",
+ { url:"http://photos.yahoo.com"}
+ ),
+ 2
+ );
+
+
+ oMenu.render(document.body);
+
+ oMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 4: Grouped MenuItem Instances Using Pure JavaScript
<em>[<a href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to group MenuItem instances. The
Menu API also supports building a menu like this <a href="example03.html">using
existing markup</a>.</p>
+ </body>
+</html>
Index: menu/example05.html
===================================================================
RCS file: menu/example05.html
diff -N menu/example05.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example05.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,84 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 5: Grouped MenuItem Instances With Titles From Existing
Markup</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ var oMenu = new YAHOO.widget.Menu("menuwithgroups", {
fixedcenter: true });
+
+ oMenu.render();
+
+ oMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 5: Grouped MenuItem Instances With Titles From Existing
Markup <em>[<a href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to title groups of MenuItem
instances. The Menu API also supports building a menu like this <a
href="example06.html">using nothing but JavaScript</a>.</p>
+
+ <div id="menuwithgroups" class="yuimenu">
+ <div class="bd">
+ <h6 class="first-of-type">Yahoo! PIM</h6>
+ <ul class="first-of-type">
+ <li class="yuimenuitem"><a
href="http://mail.yahoo.com";>Yahoo! Mail</a></li>
+ <li class="yuimenuitem"><a
href="http://addressbook.yahoo.com";>Yahoo! Address Book</a></li>
+ <li class="yuimenuitem"><a
href="http://calendar.yahoo.com";>Yahoo! Calendar</a></li>
+ <li class="yuimenuitem"><a
href="http://notepad.yahoo.com";>Yahoo! Notepad</a></li>
+ </ul>
+ <h6>Yahoo! Search</h6>
+ <ul>
+ <li class="yuimenuitem"><a
href="http://local.yahoo.com";>Yahoo! Local</a></li>
+ <li class="yuimenuitem"><a
href="http://maps.yahoo.com";>Yahoo! Maps</a></li>
+ <li class="yuimenuitem"><a
href="http://travel.yahoo.com";>Yahoo! Travel</a></li>
+ <li class="yuimenuitem"><a
href="http://shopping.yahoo.com";>Yahoo! Shopping</a></li>
+ </ul>
+ <h6>Yahoo! Communications</h6>
+ <ul>
+ <li class="yuimenuitem"><a
href="http://messenger.yahoo.com";>Yahoo! Messenger</a></li>
+ <li class="yuimenuitem"><a
href="http://360.yahoo.com";>Yahoo! 360</a></li>
+ <li class="yuimenuitem"><a
href="http://groups.yahoo.com";>Yahoo! Groups</a></li>
+ <li class="yuimenuitem"><a
href="http://photos.yahoo.com";>Yahoo! Photos</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </body>
+</html>
Index: menu/example06.html
===================================================================
RCS file: menu/example06.html
diff -N menu/example06.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example06.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,161 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 6: Grouped MenuItem Instances With Titles Using Pure
JavaScript</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ var oMenu = new YAHOO.widget.Menu("menuwithgroups", {
fixedcenter: true });
+
+ // Add MenuItem instances to the first group
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Mail",
+ { url:"http://mail.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Address Book",
+ { url:"http://addressbook.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Calendar",
+ { url:"http://calendar.yahoo.com"}
+ )
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Notepad",
+ { url:"http://notepad.yahoo.com"}
+ )
+ );
+
+
+ // Add MenuItem instances to the second group
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Local",
+ { url:"http://local.yahoo.com"}
+ ),
+ 1
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Maps",
+ { url:"http://maps.yahoo.com"}
+ ),
+ 1
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Travel",
+ { url:"http://travel.yahoo.com"}
+ ),
+ 1
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Shopping",
+ { url:"http://shopping.yahoo.com"}
+ ),
+ 1
+ );
+
+
+ // Add MenuItem instances to the third group
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Messenger",
+ { url:"http://messenger.yahoo.com"}
+ ),
+ 2
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! 360",
+ { url:"http://360.yahoo.com"}
+ ),
+ 2
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Groups",
+ { url:"http://groups.yahoo.com"}
+ ),
+ 2
+ );
+
+ oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Yahoo! Photos",
+ { url:"http://photos.yahoo.com"}
+ ),
+ 2
+ );
+
+ oMenu.setItemGroupTitle("Yahoo! PIM", 0);
+ oMenu.setItemGroupTitle("Yahoo! Search", 1);
+ oMenu.setItemGroupTitle("Yahoo! Communications", 2);
+
+ oMenu.render(document.body);
+
+ oMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 6: Grouped MenuItem Instances With Titles Using Pure
JavaScript <em>[<a href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to title groups of MenuItem
instances. The Menu API also supports building a menu like this <a
href="example05.html">using existing markup</a>.</p>
+ </body>
+</html>
Index: menu/example07.html
===================================================================
RCS file: menu/example07.html
diff -N menu/example07.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example07.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,149 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 7: Multi-tiered Menu From Existing Markup</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ var oProductsServicesMenu = new
YAHOO.widget.Menu("productsandservices", { fixedcenter: true });
+
+ oProductsServicesMenu.render();
+
+ oProductsServicesMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+
+ <h1>Example 7: Basic Menu From Existing Markup <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to create a multi-tiered menu using
existing markup on the page. The Menu API also supports building a menu like
this <a href="example08.html">using nothing but JavaScript</a>.</p>
+
+ <div id="productsandservices" class="yuimenu">
+ <div class="bd">
+ <ul class="first-of-type">
+ <li class="yuimenuitem"><a
href="http://communication.yahoo.com";>Communication</a>
+
+ <div id="communication" class="yuimenu">
+ <div class="bd">
+ <ul>
+ <li class="yuimenuitem"><a
href="http://360.yahoo.com";>360°</a></li>
+ <li class="yuimenuitem"><a
href="http://alerts.yahoo.com";>Alerts</a></li>
+ <li class="yuimenuitem"><a
href="http://avatars.yahoo.com";>Avatars</a></li>
+ <li class="yuimenuitem"><a
href="http://groups.yahoo.com";>Groups</a></li>
+ <li class="yuimenuitem"><a
href="http://promo.yahoo.com/broadband/";>Internet Access</a></li>
+ <li class="yuimenuitem">PIM
+
+ <div id="pim" class="yuimenu">
+ <div class="bd">
+ <ul class="first-of-type">
+ <li class="yuimenuitem"><a
href="http://mail.yahoo.com";>Yahoo! Mail</a></li>
+ <li class="yuimenuitem"><a
href="http://addressbook.yahoo.com";>Yahoo! Address Book</a></li>
+ <li class="yuimenuitem"><a
href="http://calendar.yahoo.com";>Yahoo! Calendar</a></li>
+ <li class="yuimenuitem"><a
href="http://notepad.yahoo.com";>Yahoo! Notepad</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </li>
+ <li class="yuimenuitem"><a
href="http://members.yahoo.com";>Member Directory</a></li>
+ <li class="yuimenuitem"><a
href="http://messenger.yahoo.com";>Messenger</a></li>
+ <li class="yuimenuitem"><a
href="http://mobile.yahoo.com";>Mobile</a></li>
+ <li class="yuimenuitem"><a
href="http://photos.yahoo.com";>Photos</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </li>
+ <li class="yuimenuitem"><a
href="http://shopping.yahoo.com";>Shopping</a>
+
+ <div id="shopping" class="yuimenu">
+ <div class="bd">
+ <ul>
+ <li class="yuimenuitem"><a
href="http://auctions.shopping.yahoo.com";>Auctions</a></li>
+ <li class="yuimenuitem"><a
href="http://autos.yahoo.com";>Autos</a></li>
+ <li class="yuimenuitem"><a
href="http://classifieds.yahoo.com";>Classifieds</a></li>
+ <li class="yuimenuitem"><a
href="http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735";>Flowers &
Gifts</a></li>
+ <li class="yuimenuitem"><a
href="http://points.yahoo.com";>Points</a></li>
+ <li class="yuimenuitem"><a
href="http://realestate.yahoo.com";>Real Estate</a></li>
+ <li class="yuimenuitem"><a
href="http://travel.yahoo.com";>Travel</a></li>
+ <li class="yuimenuitem"><a
href="http://wallet.yahoo.com";>Wallet</a></li>
+ <li class="yuimenuitem"><a
href="http://yp.yahoo.com";>Yellow Pages</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </li>
+ <li class="yuimenuitem"><a
href="http://entertainment.yahoo.com";>Entertainment</a>
+
+ <div id="entertainment" class="yuimenu">
+ <div class="bd">
+ <ul>
+ <li class="yuimenuitem"><a
href="http://fantasysports.yahoo.com";>Fantasy Sports</a></li>
+ <li class="yuimenuitem"><a
href="http://games.yahoo.com";>Games</a></li>
+ <li class="yuimenuitem"><a
href="http://www.yahooligans.com";>Kids</a></li>
+ <li class="yuimenuitem"><a
href="http://music.yahoo.com";>Music</a></li>
+ <li class="yuimenuitem"><a
href="http://movies.yahoo.com";>Movies</a></li>
+ <li class="yuimenuitem"><a
href="http://music.yahoo.com/launchcast";>Radio</a></li>
+ <li class="yuimenuitem"><a
href="http://travel.yahoo.com";>Travel</a></li>
+ <li class="yuimenuitem"><a
href="http://tv.yahoo.com";>TV</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </li>
+ <li class="yuimenuitem">Information
+
+ <div id="information" class="yuimenu">
+ <div class="bd">
+ <ul>
+ <li class="yuimenuitem"><a
href="http://downloads.yahoo.com";>Downloads</a></li>
+ <li class="yuimenuitem"><a
href="http://finance.yahoo.com";>Finance</a></li>
+ <li class="yuimenuitem"><a
href="http://health.yahoo.com";>Health</a></li>
+ <li class="yuimenuitem"><a
href="http://local.yahoo.com";>Local</a></li>
+ <li class="yuimenuitem"><a
href="http://maps.yahoo.com";>Maps & Directions</a></li>
+ <li class="yuimenuitem"><a
href="http://my.yahoo.com";>My Yahoo!</a></li>
+ <li class="yuimenuitem"><a
href="http://news.yahoo.com";>News</a></li>
+ <li class="yuimenuitem"><a
href="http://search.yahoo.com";>Search</a></li>
+ <li class="yuimenuitem"><a
href="http://smallbusiness.yahoo.com";>Small Business</a></li>
+ <li class="yuimenuitem"><a
href="http://weather.yahoo.com";>Weather</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
Index: menu/example08.html
===================================================================
RCS file: menu/example08.html
diff -N menu/example08.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example08.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,120 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 8: Multi-tiered Menu From Pure JavaScript</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ var Menu = YAHOO.widget.Menu,
+ MenuItem = YAHOO.widget.MenuItem;
+
+
+ var oPIMMenu = new Menu("pim");
+
+ oPIMMenu.addItem(new MenuItem("Yahoo! Mail", {
url:"http://mail.yahoo.com"; }));
+ oPIMMenu.addItem(new MenuItem("Yahoo! Address Book", {
url:"http://addressbook.yahoo.com"; }));
+ oPIMMenu.addItem(new MenuItem("Yahoo! Calendar", {
url:"http://calendar.yahoo.com"; }));
+ oPIMMenu.addItem(new MenuItem("Yahoo! Notepad", {
url:"http://notepad.yahoo.com"; } ));
+
+
+ var oCommunicationsMenu = new Menu("communications");
+
+ oCommunicationsMenu.addItem(new MenuItem("360", { url:
"http://360.yahoo.com"; }));
+ oCommunicationsMenu.addItem(new MenuItem("Alerts", { url:
"http://alerts.yahoo.com"; }));
+ oCommunicationsMenu.addItem(new MenuItem("Avatars", { url:
"http://avatars.yahoo.com"; }));
+ oCommunicationsMenu.addItem(new MenuItem("Groups", { url:
"http://groups.yahoo.com " }));
+ oCommunicationsMenu.addItem(new MenuItem("Internet Access", {
url: "http://promo.yahoo.com/broadband"; }));
+ oCommunicationsMenu.addItem(new MenuItem("PIM", { submenu:
oPIMMenu }));
+ oCommunicationsMenu.addItem(new MenuItem("Member Directory", {
url: "http://members.yahoo.com"; }));
+ oCommunicationsMenu.addItem(new MenuItem("Messenger", { url:
"http://messenger.yahoo.com"; }));
+ oCommunicationsMenu.addItem(new MenuItem("Mobile", { url:
"http://mobile.yahoo.com"; }));
+ oCommunicationsMenu.addItem(new MenuItem("Photos", { url:
"http://photos.yahoo.com"; }));
+
+
+ var oShoppingMenu = new Menu("shopping");
+
+ oShoppingMenu.addItem(new MenuItem("Auctions", { url:
"http://auctions.shopping.yahoo.com"; }));
+ oShoppingMenu.addItem(new MenuItem("Autos", { url:
"http://autos.yahoo.com"; }));
+ oShoppingMenu.addItem(new MenuItem("Classifieds", { url:
"http://classifieds.yahoo.com"; }));
+ oShoppingMenu.addItem(new MenuItem("Flowers & Gifts", { url:
"http://shopping.yahoo.com/b:Flowers%20%26%20Gifts:20146735"; }));
+ oShoppingMenu.addItem(new MenuItem("Points", { url:
"http://points.yahoo.com"; }));
+ oShoppingMenu.addItem(new MenuItem("Real Estate", { url:
"http://realestate.yahoo.com"; }));
+ oShoppingMenu.addItem(new MenuItem("Travel", { url:
"http://travel.yahoo.com"; }));
+ oShoppingMenu.addItem(new MenuItem("Wallet", { url:
"http://wallet.yahoo.com"; }));
+ oShoppingMenu.addItem(new MenuItem("Yellow Pages", { url:
"http://yp.yahoo.com"; }));
+
+
+ var oEntertainmentMenu = new Menu("entertainment");
+
+ oEntertainmentMenu.addItem(new MenuItem("Fantasy Sports", {
url: "http://fantasysports.yahoo.com"; }));
+ oEntertainmentMenu.addItem(new MenuItem("Games", { url:
"http://games.yahoo.com"; }));
+ oEntertainmentMenu.addItem(new MenuItem("Kids", { url:
"http://www.yahooligans.com"; }));
+ oEntertainmentMenu.addItem(new MenuItem("Music", { url:
"http://music.yahoo.com"; }));
+ oEntertainmentMenu.addItem(new MenuItem("Movies", { url:
"http://movies.yahoo.com"; }));
+ oEntertainmentMenu.addItem(new MenuItem("Radio", { url:
"http://music.yahoo.com/launchcast"; }));
+ oEntertainmentMenu.addItem(new MenuItem("Travel", { url:
"http://travel.yahoo.com"; }));
+ oEntertainmentMenu.addItem(new MenuItem("TV", { url:
"http://tv.yahoo.com"; }));
+
+
+ var oInformationMenu = new Menu("information");
+
+ oInformationMenu.addItem(new MenuItem("Downloads", { url:
"http://downloads.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("Finance", { url:
"http://finance.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("Health", { url:
"http://health.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("Local", { url:
"http://local.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("Maps & Directions", {
url: "http://maps.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("My Yahoo!", { url:
"http://my.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("News", { url:
"http://news.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("Search", { url:
"http://search.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("Small Business", { url:
"http://smallbusiness.yahoo.com"; }));
+ oInformationMenu.addItem(new MenuItem("Weather", { url:
"http://weather.yahoo.com"; }));
+
+
+ var oProductsServicesMenu = new Menu("productsandservices", {
fixedcenter: true });
+
+ oProductsServicesMenu.addItem(new MenuItem("Communication", {
url: "http://communication.yahoo.com";, submenu: oCommunicationsMenu }));
+ oProductsServicesMenu.addItem(new MenuItem("Shopping", { url:
"http://shopping.yahoo.com";, submenu: oShoppingMenu }));
+ oProductsServicesMenu.addItem(new MenuItem("Entertainment", {
url: "http://entertainment.yahoo.com";, submenu: oEntertainmentMenu }));
+ oProductsServicesMenu.addItem(new MenuItem("Information", {
submenu: oInformationMenu } ));
+
+ oProductsServicesMenu.render(document.body);
+
+ oProductsServicesMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 8: Multi-tiered Menu From Pure JavaScript <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to create a multi-tiered menu using
nothing but JavaScript. The Menu API also supports building a menu like this
<a href="example07.html">using existing markup</a>.</p>
+ </body>
+</html>
\ No newline at end of file
Index: menu/example09.html
===================================================================
RCS file: menu/example09.html
diff -N menu/example09.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example09.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,99 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 9: Handling Click Events</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ function onWindowLoad(p_oEvent) {
+
+ // "click" event handler for a MenuItem instance
+
+ function onMenuItemClick(p_sType, p_aArguments, p_oValue) {
+
+ alert(
+ "index: " + this.index +
+ ", text: " + this.cfg.getProperty("text") +
+ ", value:" + p_oValue
+ );
+
+ }
+
+
+ var oMenu =
+ new YAHOO.widget.Menu("mymenu", { fixedcenter: true }
);
+
+ var oItem1 =
+ oMenu.addItem(new YAHOO.widget.MenuItem("Item One"));
+
+ oItem1.clickEvent.subscribe(onMenuItemClick);
+
+
+ var oItem2 =
+ oMenu.addItem(new YAHOO.widget.MenuItem("Item Two"));
+
+ /*
+ Register a "click" event handler for the first item,
+ passing a string arguemnt ("foo") to the event handler
+ */
+
+ oItem2.clickEvent.subscribe(onMenuItemClick, "foo");
+
+
+ var oItem2 =
+ oMenu.addItem(new YAHOO.widget.MenuItem("Item Three"));
+
+ /*
+ Register a "click" event handler for the third item and
+ passing and array as an argument to the event handler
+ */
+
+ oItem2.clickEvent.subscribe(onMenuItemClick, ["foo", "bar"]);
+
+
+ oMenu.render(document.body);
+
+ oMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 9: Handling Click Events <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to register a "click" event handler
for a MenuItem instance. All of the events for YUI Menu are instances of <a
href="http://developer.yahoo.com/yui/event/#customevent";>YAHOO.util.CustomEvent</a>.
To register a listener for an event, use the event's "subscribe" method
passing a pointer to your handler as the first argument. You can pass an
argument to your event handler(s) as an additional second argument to the
"subscribe" method.</p>
+ </body>
+</html>
\ No newline at end of file
Index: menu/example10.html
===================================================================
RCS file: menu/example10.html
diff -N menu/example10.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example10.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,181 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 10: Listening For DOM-Related Events</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- Logger CSS -->
+ <link rel="stylesheet" type="text/css"
href="../../build/logger/assets/logger.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ p em {
+
+ text-decoration:underline;
+
+ }
+
+ #logs {
+
+ position:absolute;
+ bottom:0;
+ right:0;
+
+ }
+
+ </style>
+
+ <!-- Namespace source file -->
+
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Logger source file -->
+ <script type="text/javascript"
src="../../build/logger/logger.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ // Generic event handler for the Menu instance's DOM-related events
+
+ function onMenuEvent(p_sType, p_aArguments) {
+
+ var oDOMEvent = p_aArguments[0];
+
+ YAHOO.log(
+ "Id: " + this.id + ", " +
+ "Custom Event Type: " + p_sType + ", " +
+ "DOM Event Type: " + oDOMEvent.type
+ );
+ }
+
+
+ /*
+ Generic event handler for each MenuItem instance's
+ DOM-related events
+ */
+
+ function onMenuItemEvent(p_sType, p_aArguments) {
+
+ var oDOMEvent = p_aArguments[0];
+
+ YAHOO.log(
+ "Index: " + this.index + ", " +
+ "Group Index: " + this.groupIndex + ", " +
+ "Custom Event Type: " + p_sType + ", " +
+ "DOM Event Type: " + oDOMEvent.type
+ );
+
+ }
+
+
+ // "load" event handler for the window
+
+ function onWindowLoad(p_oEvent) {
+
+ // Create a menu
+
+ var oMenu = new YAHOO.widget.Menu("basicmenu"),
+
+ // Create the MenuItem instances and add them to the menu
+
+ aMenuItemData = [
+
+ "MenuItem 0",
+ "MenuItem 1",
+ "MenuItem 2",
+ "MenuItem 3",
+ "MenuItem 4"
+
+ ],
+
+ nMenuItems = aMenuItemData.length,
+
+ oMenuItem;
+
+
+ for(var i=0; i<nMenuItems; i++) {
+
+ oMenuItem = oMenu.addItem(aMenuItemData[i]);
+
+ oMenuItem.mouseOverEvent.subscribe(onMenuItemEvent);
+ oMenuItem.mouseOutEvent.subscribe(onMenuItemEvent);
+ oMenuItem.mouseDownEvent.subscribe(onMenuItemEvent);
+ oMenuItem.mouseUpEvent.subscribe(onMenuItemEvent);
+ oMenuItem.clickEvent.subscribe(onMenuItemEvent);
+ oMenuItem.keyDownEvent.subscribe(onMenuItemEvent);
+ oMenuItem.keyUpEvent.subscribe(onMenuItemEvent);
+ oMenuItem.keyPressEvent.subscribe(onMenuItemEvent);
+
+ oMenu.addItem(oMenuItem);
+
+ }
+
+ oMenu.render(document.body);
+
+ oMenu.show();
+
+
+ // Focus the first MenuItem instance
+
+ oMenu.getItem(0).focus();
+
+
+ // Disable the third MenuItem instance
+
+ oMenu.getItem(2).cfg.setProperty("disabled", true);
+
+
+ // Subscribe to the menu's DOM-related events
+
+ oMenu.mouseOverEvent.subscribe(onMenuEvent);
+ oMenu.mouseOutEvent.subscribe(onMenuEvent);
+ oMenu.mouseDownEvent.subscribe(onMenuEvent);
+ oMenu.mouseUpEvent.subscribe(onMenuEvent);
+ oMenu.clickEvent.subscribe(onMenuEvent);
+ oMenu.keyDownEvent.subscribe(onMenuEvent);
+ oMenu.keyUpEvent.subscribe(onMenuEvent);
+ oMenu.keyPressEvent.subscribe(onMenuEvent);
+
+
+ var oLogs = document.createElement("div");
+ oLogs.id = "logs";
+
+ document.body.appendChild(oLogs);
+
+ var oLogReader = new YAHOO.widget.LogReader("logs");
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 10: Listening For DOM-Related Events <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to listen for DOM-related events.
Interaction with the Menu will result in event information being output to the
console. <em>Please note</em>: Disabled MenuItem instance do not fire DOM
events. This is demonstrated with the second MenuItem instance.</p>
+ </body>
+</html>
Index: menu/example11.html
===================================================================
RCS file: menu/example11.html
diff -N menu/example11.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example11.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,102 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 11: MenuItem Configuration Properties</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ li.yuimenuitem a em {
+
+ font-style:italic;
+ }
+
+ li.yuimenuitem strong {
+
+ font-weight:bold;
+
+ }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ // "load" event handler for the window
+
+ function onWindowLoad(p_oEvent) {
+
+ // Create a menu
+
+ var oMenu = new YAHOO.widget.Menu("basicmenu", { fixedcenter:
true }),
+
+ // Add the MenuItem instance to the menu
+
+ aMenuItemData = [
+
+ { text: "Selected MenuItem", config: { selected: true
} },
+ { text: "Disabled MenuItem", config: { disabled: true
} },
+ { text: "MenuItem With Help Text", config: { helptext:
"Help Me!" } },
+ { text: "MenuItem With A URL", config: { url:
"http://www.yahoo.com!"; } },
+ { text: "MenuItem With Emphasis", config: { emphasis:
true } },
+ { text: "MenuItem With Strong Emphasis", config: {
strongemphasis: true } },
+ { text: "Checked MenuItem", config: { checked: true } }
+
+ ],
+
+ nMenuItems = aMenuItemData.length,
+
+ oMenuItem;
+
+
+ for(var i=0; i<nMenuItems; i++) {
+
+ oMenuItem = new YAHOO.widget.MenuItem(
+ aMenuItemData[i].text,
+ aMenuItemData[i].config
+ );
+
+ oMenu.addItem(oMenuItem);
+
+ }
+
+ oMenu.render(document.body);
+
+ oMenu.show();
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 11: MenuItem Configuration Properties <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to set configuration properties when
instantiating a MenuItem instance.</p>
+ </body>
+</html>
\ No newline at end of file
Index: menu/example12.html
===================================================================
RCS file: menu/example12.html
diff -N menu/example12.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/example12.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,153 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Example 12: Setting Configuration Properties At Runtime</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- Logger CSS -->
+ <link rel="stylesheet" type="text/css"
href="../../build/logger/assets/logger.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ body { margin:.5em; }
+
+ li.yuimenuitem a em {
+
+ font-style:italic;
+ }
+
+ li.yuimenuitem strong {
+
+ font-weight:bold;
+
+ }
+
+ p em {
+
+ text-decoration:underline;
+
+ }
+
+ #logs {
+
+ position:absolute;
+ bottom:0;
+ right:0;
+
+ }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Logger source file -->
+ <script type="text/javascript"
src="../../build/logger/logger.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ // "config change" event handler for each MenuItem instance
+
+ function onMenuItemConfigChange(p_sType, p_aArguments,
p_oMenuItem) {
+
+ var sPropertyName = p_aArguments[0][0],
+ sPropertyValue = p_aArguments[0][1];
+
+ YAHOO.log(
+ "Index: " + this.index + ", " +
+ "Group Index: " + this.groupIndex + ", " +
+ "Custom Event Type: " + p_sType + ", " +
+ "\"" + sPropertyName + "\" Property Set To: \"" +
sPropertyValue + "\""
+ );
+
+ }
+
+
+ // "load" event handler for the window
+
+ function onWindowLoad(p_oEvent) {
+
+ // Create a menu
+
+ var oMenu = new YAHOO.widget.Menu("basicmenu"),
+
+ // Add the MenuItem instance to the menu
+
+ aMenuItemData = [
+
+ "MenuItem 0",
+ "MenuItem 1",
+ "MenuItem 2",
+ "MenuItem 3",
+ "MenuItem 4",
+ "MenuItem 5"
+
+ ],
+
+ nMenuItems = aMenuItemData.length,
+
+ oMenuItem;
+
+
+ for(var i=0; i<nMenuItems; i++) {
+
+ oMenuItem = oMenu.addItem(aMenuItemData[i]);
+
+
oMenuItem.cfg.configChangedEvent.subscribe(onMenuItemConfigChange, oMenuItem,
true);
+
+ }
+
+
+ oMenu.render(document.body);
+
+ oMenu.show();
+
+
+ // Set the MenuItem configuration properties
+
+ oMenu.getItem(0).cfg.setProperty("selected", true);
+ oMenu.getItem(1).cfg.setProperty("disabled", true);
+ oMenu.getItem(2).cfg.setProperty("helptext", "Help Me!");
+ oMenu.getItem(3).cfg.setProperty("emphasis", true);
+ oMenu.getItem(4).cfg.setProperty("strongemphasis", true);
+ oMenu.getItem(5).cfg.setProperty("checked", true);
+
+ var oLogs = document.createElement("div");
+ oLogs.id = "logs";
+
+ document.body.appendChild(oLogs);
+
+ var oLogReader = new YAHOO.widget.LogReader("logs");
+
+ }
+
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+ <h1>Example 12: Setting Configuration Properties At Runtime <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+ <p>This example demonstrates how to set MenuItem configuration
properties at runtime and listen for the changes through the
"configChangedEvent."</p>
+ </body>
+</html>
\ No newline at end of file
Index: menu/index.html
===================================================================
RCS file: menu/index.html
diff -N menu/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/index.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,64 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Menu Examples</title>
+ <link rel="stylesheet" type="text/css" media="screen"
href="../../docs/assets/examples.css">
+ <style type="text/css">
+
+ ul {
+ margin:60px 40px;
+ }
+
+ li {
+ margin-bottom:1em;
+ }
+
+ li a {
+ font:85% verdana;
+ }
+
+ li a:link {
+ color:#666;
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="doc">
+ <div id="hd">
+ <img src="../../docs/assets/logo.gif" alt="Yahoo!">
+ <h1>YUI Library - Menu</h1>
+ </div>
+ <div id="bd">
+
+ <h2>Fundamentals</h2>
+ <ul>
+ <li><a href="example01.html">Basic Menu From Existing
Markup</a></li>
+ <li><a href="example02.html">Basic Menu From Pure
JavaScript</a></li>
+ <li><a href="example03.html">Grouped MenuItem Instances
From Existing Markup</a></li>
+ <li><a href="example04.html">Grouped MenuItem Instances
Using Pure JavaScript</a></li>
+ <li><a href="example05.html">Grouped MenuItem Instances
With Titles From Existing Markup</a></li>
+ <li><a href="example06.html">Grouped MenuItem Instances
With Titles Using Pure JavaScript</a></li>
+ <li><a href="example07.html">Multi-tiered Menu From
Existing Markup</a></li>
+ <li><a href="example08.html">Multi-tiered Menu From Pure
JavaScript</a></li>
+ <li><a href="example09.html">Handling Click Events</a></li>
+ <li><a href="example10.html">Listening For DOM-Related
Events</a></li>
+ <li><a href="example11.html">MenuItem Configuration
Properties</a></li>
+ <li><a href="example12.html">Setting Configuration
Properties At Runtime</a></li>
+ </ul>
+
+ <h2>Putting It All Together</h2>
+ <ul>
+ <li><a href="contextmenu.html">Context Menu</a></li>
+ <li><a href="leftnav.html">Website Left Nav</a></li>
+ <li><a href="topnav.html">Website Top Nav</a></li>
+ <li><a href="programsmenu.html">OS-Style Programs
Menu</a></li>
+ <li><a href="applicationmenubar.html">Application
Menubar</a></li>
+ </ul>
+
+ </div>
+ </div>
+ </body>
+</html>
Index: menu/leftnav.html
===================================================================
RCS file: menu/leftnav.html
diff -N menu/leftnav.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/leftnav.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,331 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Website Left Nav Example</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- Grids -->
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ div.yui-b p {
+
+ margin:0 0 .5em 0;
+ color:#999;
+
+ }
+
+ div.yui-b p strong {
+
+ font-weight:bold;
+ color:#000;
+
+ }
+
+ div.yui-b p em {
+
+ color:#000;
+
+ }
+
+ h1 {
+
+ padding:.25em .5em;
+ background-color:#ccc;
+
+ }
+
+ #yproducts {
+
+ visibility: visible;
+
+ }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+
+ YAHOO.example.OverlayManager = new YAHOO.widget.OverlayManager();
+
+
+ // Data used to built product category submenus
+
+ var g_aYProducts = {
+
+ communications: [
+
+ { text: "Yahoo! Mail", url: "http://mail.yahoo.com"; },
+ { text: "Yahoo! Address Book", url:
"http://addressbook.yahoo.com"; },
+ { text: "Yahoo! Calender", url:
"http://calendar.yahoo.com"; },
+ { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com";
},
+ { text: "Yahoo! Messenger", url:
"http://messenger.yahoo.com"; },
+ { text: "Yahoo! 360", url: "http://360.yahoo.com"; },
+ { text: "Yahoo! Photos", url: "http://photos.yahoo.com"; }
+
+ ],
+
+ search: [
+
+ { text: "Yahoo! Image Search", url:
"http://images.search.yahoo.com/images"; },
+ { text: "Yahoo! Directory", url: "http://dir.yahoo.com/"; },
+ { text: "Yahoo! Local", url: "http://local.yahoo.com"; },
+ { text: "Yahoo! News Search", url:
"http://news.search.yahoo.com/news"; },
+ { text: "Yahoo! People Search", url:
"http://search.yahoo.com/people"; },
+ { text: "Yahoo! Product Search", url:
"http://search.yahoo.com/products"; }
+
+ ],
+
+ entertainment: [
+
+ { text: "Yahoo! Music", url: "http://music.yahoo.com/"; },
+ { text: "Yahoo! Movies", url: "http://movies.yahoo.com/"; },
+ { text: "Yahoo! TV", url: "http://tv.yahoo.com/"; }
+
+ ]
+
+ };
+
+
+ var g_nTimeoutId;
+
+
+ // "mouseover" event handler for the root menu in the left nav
+
+ function onRootMenuMouseOver(p_sType, p_aArguments, p_oMenu) {
+
+ if(g_nTimeoutId) {
+
+ window.clearTimeout(g_nTimeoutId);
+
+ }
+
+ }
+
+
+ // "mouseover" event handler for each submenu
+
+ function onSubmenuMouseOver(p_sType, p_aArguments, p_oMenu) {
+
+ if(g_nTimeoutId) {
+
+ window.clearTimeout(g_nTimeoutId);
+
+ }
+
+ }
+
+
+ // "mouseout" event handler for each submenu
+
+ function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
+
+ function hideMenu() {
+
+ p_oMenu.hide();
+
+ }
+
+
+ if(g_nTimeoutId) {
+
+ window.clearTimeout(g_nTimeoutId);
+
+ }
+
+ g_nTimeoutId = window.setTimeout(hideMenu, 750);
+
+ }
+
+
+ // "mousedown" handler for the document
+
+ function onDocumentMouseDown(p_oEvent) {
+
+ YAHOO.example.OverlayManager.hideAll();
+
+ }
+
+
+ // "load" handler for the window
+
+ function onWindowLoad() {
+
+ var oMenu = new YAHOO.widget.Menu(
+ "yproducts",
+ { position: "static" }
+ );
+
+
+ var i = oMenu.getItemGroups()[0].length - 1,
+ oMenuItem,
+ oSubmenu,
+ aSubmenuItems,
+ nSubmenuItems;
+
+
+ do {
+
+ oMenuItem = oMenu.getItem(i);
+
+ aSubmenuItems = g_aYProducts[oMenuItem.element.id];
+
+ if(aSubmenuItems) {
+
+ // Create a submenu
+
+ oSubmenu = new YAHOO.widget.Menu(
+ (oMenuItem.element.id + "menu")
+ );
+
+ // Add a "mouseover" event handler to the submenu
+
+ oSubmenu.mouseOverEvent.subscribe(
+ onSubmenuMouseOver,
+ oSubmenu,
+ true
+ );
+
+
+ // Add a "mouseout" event handler to the submenu
+
+ oSubmenu.mouseOutEvent.subscribe(
+ onSubmenuMouseOut,
+ oSubmenu,
+ true
+ );
+
+
+ // Add items to the submenu
+
+ nSubmenuItems = aSubmenuItems.length;
+
+ for(var n=0; n<nSubmenuItems; n++) {
+
+ oSubmenu.addItem(
+ new YAHOO.widget.MenuItem(
+ aSubmenuItems[n].text,
+ { url: aSubmenuItems[n].url}
+ )
+ );
+
+ }
+
+
+ // Add the submenu to its parent item in the main menu
+
+ oMenuItem.cfg.setProperty("submenu", oSubmenu);
+
+ YAHOO.example.OverlayManager.register(oSubmenu);
+
+ }
+
+ }
+ while(i--);
+
+
+ // Render the root menu and corresponding submenus
+
+ oMenu.render();
+
+
+ // Add a "mouseover" handler to the root menu
+
+ oMenu.mouseOverEvent.subscribe(
+ onRootMenuMouseOver,
+ oMenu,
+ true
+ );
+
+
+ // Add a "mousedown" handler to the document
+
+ YAHOO.util.Event.addListener(
+ document,
+ "mousedown",
+ onDocumentMouseDown
+ );
+
+ }
+
+
+ // Add a "load" handler for the window
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body id="yahoo-com">
+ <div id="doc" class="yui-t1">
+ <div id="hd">
+ <!-- start: your content here -->
+
+ <h1>Website Left Nav Example <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+
+ <p><strong>NOTE:</strong> <em>This example
demonstrates how to combine a menu built from existing markup with a menu built
completely from JavaScript. The root menu in the left nav is constructed using
markup and enables the user to navigate to different landing pages for each
product category. If JavaScript is enabled, submenus are constructed and
appended to the root menu. This allows the user to skip the product landing
pages and proceed directly to a given property.</em></p>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat
volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas
pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus.
Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed
sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis,
tellus. Sed eleifend.</p>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat
volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas
pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus.
Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed
sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis,
tellus. Sed eleifend.</p>
+
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+
+ <div id="yproducts" class="yuimenu">
+ <div class="bd">
+ <ul class="first-of-type">
+ <li id="communications" class="yuimenuitem"><a
href="http://communications.yahoo.com/";>Communications</a></li>
+ <li id="entertainment" class="yuimenuitem"><a
href="http://entertainment.yahoo.com/";>Entertainment</a></li>
+ <li id="finance" class="yuimenuitem"><a
href="http://finance.yahoo.com/";>Finance</a></li>
+ <li id="search" class="yuimenuitem"><a
href="http://search.yahoo.com/";>Search</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+
+ </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
Index: menu/programsmenu.html
===================================================================
RCS file: menu/programsmenu.html
diff -N menu/programsmenu.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/programsmenu.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,378 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>OS-Style Programs Menu Example</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ html {
+
+ overflow:hidden;
+
+ }
+
+ body {
+
+ background-color:#dfb8df;
+ overflow:hidden;
+
+ }
+
+ /* Define a style for the H1 "toolbar" */
+
+ .ytoolbar {
+
+ border-top-width:2px;
+ border-top-color:#ddd;
+ border-top-style:solid;
+ background-color:#ccc;
+ position:absolute;
+ width:100%;
+
+ }
+
+
+ /* Style the "Yahoo!" anchor to look like a button */
+
+ .ytoolbar #yahoo {
+
+ border-width:2px;
+ border-color:#ddd #666 #666 #ddd;
+ border-style:solid;
+ float:left;
+ *float:none;
+ *display:inline-block;
+ padding:4px 12px 4px 28px;
+ margin:4px;
+ background-color:#ccc;
+ color:#000;
+ text-decoration:none;
+
background:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif) 10%
50% no-repeat;
+
+ }
+
+ .ytoolbar #yahoo:active {
+
+ border-color:#666 #ddd #ddd #666;
+
+ }
+
+
+ /* Define a new style for each menu */
+
+ div.yuimenu {
+
+ border-width:2px;
+ border-color:#ddd #666 #666 #ddd;
+ border-style:solid;
+ background-color:#ccc;
+
+ }
+
+
+ /* Define a new style for each menu item */
+
+ div.yuimenu li.yuimenuitem {
+
+ padding-top:4px;
+ padding-bottom:4px;
+
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/us/nt/b/purpley.1.0.gif);
+ background-position:4px;
+ background-repeat:no-repeat;
+
+ }
+
+
+ /* Add icons to menu items */
+
+ div.yuimenu li.hassubmenu {
+
+
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/fldr16_1.gif);
+
+ }
+
+ div.yuimenu li#help {
+
+
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/hlp16_1.gif);
+
+ }
+
+ div.yuimenu li#search {
+
+
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/srch16_1.gif);
+
+ }
+
+ div.yuimenu li#goto {
+
+
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/arorght16_1.gif);
+
+ }
+
+ div.yuimenu li#examples {
+
+
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/bsc/lnk16_1.gif);
+
+ }
+
+
+ /* Define a new style for an item's "selected" state */
+
+ div.yuimenu li.selected {
+
+ background-color:#039;
+
+ }
+
+ div.yuimenu li.selected a.selected {
+
+ text-decoration:none;
+
+ }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ // "click" handler for the "Go to..." menu item
+
+ function onGotoClick() {
+
+ var sURL = window.prompt("Enter a URL:","");
+
+ if(sURL && sURL.length > 0) {
+
+ document.location = sURL;
+
+ }
+
+ }
+
+
+ // "load" handler for the window
+
+ function onWindowLoad() {
+
+ var oH1 = document.getElementsByTagName("h1")[0];
+
+ /*
+ Apply the "ytoolbar" class to the H1 so that it is styled
+ like an application toolbar
+ */
+
+ YAHOO.util.Dom.addClass(oH1, "ytoolbar");
+
+
+ function PositionToolbar() {
+
+ // Position the H1 "toolbar" to the bottom of the viewport
+
+ var nViewportHeight = YAHOO.util.Dom.getClientHeight(),
+ nToolbarHeight = oH1.offsetHeight;
+
+ oH1.style.top = (nViewportHeight - nToolbarHeight) + "px";
+
+ }
+
+ PositionToolbar();
+
+
+ // Instantiate the root menu and submenus
+
+ var oMenu = new YAHOO.widget.Menu(
+ "yproducts",
+ { constraintoviewport:true }
+ );
+
+
+ // Add a link back to the examples index page
+
+ var oExamples = oMenu.addItem(
+ new YAHOO.widget.MenuItem(
+ "Examples",
+ { url: "index.html" }
+ )
+ );
+
+ oExamples.element.id = "examples";
+
+
+ // Add a "Go to..." item to the root menu
+
+ var oGoTo = oMenu.addItem("Go to...");
+
+ oGoTo.element.id = "goto";
+
+
+ // Add a "click" event handler to the "Go to..." item
+
+ oGoTo.clickEvent.subscribe(onGotoClick);
+
+
+ // Render the root menu and submenus
+
+ oMenu.render();
+
+
+ /*
+ Position the bottom-left corner of the root menu to the
+ top-left corner of the "Yahoo!" anchor
+ */
+
+ oMenu.cfg.setProperty("context", ["yahoo", "bl", "tl"]);
+
+
+ // "click" event handler for "Yahoo!" button
+
+ function onYahooClick(p_oEvent) {
+
+ // Position and display the menu
+
+ oMenu.align("bl", "tl");
+
+ oMenu.show();
+
+
+ // Stop propagation and prevent the default "click"
behavior
+
+ YAHOO.util.Event.stopEvent(p_oEvent);
+
+ }
+
+
+ /*
+ Assign a "click" event handler to the "Yahoo!" anchor that
+ will display the menu
+ */
+
+ YAHOO.util.Event.addListener("yahoo", "click", onYahooClick);
+
+
+ // "click" event handler for the document
+
+ function onDocumentClick(p_oEvent) {
+
+ // Hide the menu
+
+ oMenu.hide();
+
+ }
+
+ /*
+ Assign a "click" event handler to the document that will
+ hide the menu
+ */
+
+ YAHOO.util.Event.addListener(
+ document,
+ "click",
+ onDocumentClick
+ );
+
+
+ // "resize" handler for the window
+
+ function onWindowResize() {
+
+ PositionToolbar();
+
+ oMenu.align("bl", "tl");
+
+ }
+
+
+ /*
+ Add a "resize" event handler for the window that will
+ reposition the H1 "toolbar" to the bottom of the viewport
+ */
+
+ YAHOO.util.Event.addListener(window, "resize", onWindowResize);
+
+ }
+
+
+ // Add a "load" event handler for the window
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body>
+
+ <h1><a id="yahoo" href="http://www.yahoo.com";>Yahoo!</a></h1>
+
+ <div id="yproducts">
+ <div class="bd">
+ <ul>
+ <li>Products
+ <div id="products">
+ <div class="bd">
+ <ul>
+ <li><a
href="http://mail.yahoo.com";>Yahoo! Mail</a></li>
+ <li><a
href="http://addressbook.yahoo.com";>Yahoo! Address Book</a></li>
+ <li><a
href="http://calendar.yahoo.com";>Yahoo! Calender</a></li>
+ <li><a
href="http://notepad.yahoo.com";>Yahoo! Notepad</a></li>
+ <li><a
href="http://messenger.yahoo.com";>Yahoo! Messenger</a></li>
+ <li><a
href="http://360.yahoo.com";>Yahoo! 360</a></li>
+ <li><a
href="http://photos.yahoo.com";>Yahoo! Photos</a></li>
+ <li><a
href="http://finance.yahoo.com/";>Finance</a></li>
+ <li><a
href="http://entertainment.yahoo.com/";>Entertainment</a>
+ <div id="entertainmentproducts">
+ <div class="bd">
+ <ul>
+ <li><a
href="http://music.yahoo.com/";>Yahoo! Music</a></li>
+ <li><a
href="http://movies.yahoo.com/";>Yahoo! Movies</a></li>
+ <li><a
href="http://tv.yahoo.com/";>Yahoo! TV</a></li>
+ </ul>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </li>
+ <li id="search"><a
href="http://search.yahoo.com/";>Search</a>
+ <div id="searchproducts">
+ <div class="bd">
+ <ul>
+ <li><a
href="http://images.search.yahoo.com/images";>Yahoo! Image Search</a></li>
+ <li><a
href="http://dir.yahoo.com/";>Yahoo! Directory</a></li>
+ <li><a
href="http://local.yahoo.com";>Yahoo! Local</a></li>
+ <li><a
href="http://news.search.yahoo.com/news";>Yahoo! News Search</a></li>
+ <li><a
href="http://search.yahoo.com/people";>Yahoo! People Search</a></li>
+ <li><a
href="http://search.yahoo.com/products";>Yahoo! Product Search</a></li>
+ </ul>
+ </div>
+ </div>
+ </li>
+ <li id="help"><a
href="http://help.yahoo.com/";>Help</a></li>
+ </ul>
+ </div>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file
Index: menu/topnav.html
===================================================================
RCS file: menu/topnav.html
diff -N menu/topnav.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ menu/topnav.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,414 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <title>Website Top Nav Example</title>
+
+ <!-- Standard reset and fonts -->
+ <link rel="stylesheet" type="text/css"
href="../../build/reset/reset.css">
+ <link rel="stylesheet" type="text/css"
href="../../build/fonts/fonts.css">
+
+ <!-- Grids -->
+ <link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css">
+
+ <!-- CSS for Menu -->
+ <link rel="stylesheet" type="text/css"
href="../../build/menu/assets/menu.css">
+
+ <!-- Page-specific styles -->
+ <style type="text/css">
+
+ div.yui-b p {
+
+ margin:0 0 .5em 0;
+ color:#999;
+
+ }
+
+ div.yui-b p strong {
+
+ font-weight:bold;
+ color:#000;
+
+ }
+
+ div.yui-b p em {
+
+ color:#000;
+
+ }
+
+ h1 {
+
+ padding:.25em .5em;
+ background-color:#ccc;
+
+ }
+
+ #yproducts {
+
+ visibility: visible;
+ margin:0 0 10px 0;
+
+ }
+
+ </style>
+
+ <!-- Namespace source file -->
+ <script type="text/javascript"
src="../../build/yahoo/yahoo.js"></script>
+
+ <!-- Dependency source files -->
+ <script type="text/javascript"
src="../../build/event/event.js"></script>
+ <script type="text/javascript" src="../../build/dom/dom.js"></script>
+
+ <!-- Container source file -->
+ <script type="text/javascript"
src="../../build/container/container_core.js"></script>
+
+ <!-- Menu source file -->
+ <script type="text/javascript" src="../../build/menu/menu.js"></script>
+
+ <!-- Page-specific script -->
+ <script type="text/javascript">
+
+ YAHOO.example.OverlayManager = new YAHOO.widget.OverlayManager();
+
+
+ // Data used to built product category submenus
+
+ var g_aYProducts = {
+
+ communications: [
+
+ { text: "Yahoo! Mail", url: "http://mail.yahoo.com"; },
+ { text: "Yahoo! Address Book", url:
"http://addressbook.yahoo.com"; },
+ { text: "Yahoo! Calender", url:
"http://calendar.yahoo.com"; },
+ { text: "Yahoo! Notepad", url: "http://notepad.yahoo.com";
},
+ { text: "Yahoo! Messenger", url:
"http://messenger.yahoo.com"; },
+ { text: "Yahoo! 360", url: "http://360.yahoo.com"; },
+ { text: "Yahoo! Photos", url: "http://photos.yahoo.com"; }
+
+ ],
+
+ search: [
+
+ { text: "Yahoo! Image Search", url:
"http://images.search.yahoo.com/images"; },
+ { text: "Yahoo! Directory", url: "http://dir.yahoo.com/"; },
+ { text: "Yahoo! Local", url: "http://local.yahoo.com"; },
+ { text: "Yahoo! News Search", url:
"http://news.search.yahoo.com/news"; },
+ { text: "Yahoo! People Search", url:
"http://search.yahoo.com/people"; },
+ { text: "Yahoo! Product Search", url:
"http://search.yahoo.com/products"; }
+
+ ],
+
+ entertainment: [
+
+ { text: "Yahoo! Music", url: "http://music.yahoo.com/"; },
+ { text: "Yahoo! Movies", url: "http://movies.yahoo.com/"; },
+ { text: "Yahoo! TV", url: "http://tv.yahoo.com/"; }
+
+ ]
+
+ };
+
+ var g_nTimeoutId;
+
+
+ // "mouseover" event handler for the root menu
+
+ function onMenuBarMouseOver(p_sType, p_aArguments, p_oMenu) {
+
+ if(g_nTimeoutId) {
+
+ window.clearTimeout(g_nTimeoutId);
+
+ }
+
+ }
+
+ // "mouseover" event handler for each submenu
+
+ function onSubmenuMouseOver(p_sType, p_aArguments, p_oMenu) {
+
+ if(g_nTimeoutId) {
+
+ window.clearTimeout(g_nTimeoutId);
+
+ }
+
+ }
+
+
+ // "mouseout" event handler for each submenu
+
+ function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
+
+ function hideMenu() {
+
+ p_oMenu.hide();
+
+ }
+
+
+ if(g_nTimeoutId) {
+
+ window.clearTimeout(g_nTimeoutId);
+
+ }
+
+ g_nTimeoutId = window.setTimeout(hideMenu, 750);
+
+ }
+
+
+ // "mousedown" handler for the document
+
+ function onDocumentMouseDown(p_oEvent) {
+
+ YAHOO.example.OverlayManager.hideAll();
+
+ }
+
+
+ // "mouseover" handler for each item in the menu bar
+
+ function onMenuBarItemMouseOver(p_sType, p_aArguments,
p_oMenuItem) {
+
+ var oActiveItem = this.parent.activeItem;
+
+
+ // Hide any other submenus that might be visible
+
+ if(oActiveItem && oActiveItem != this) {
+
+ this.parent.clearActiveItem();
+
+ }
+
+
+ // Select and focus the current MenuItem instance
+
+ this.cfg.setProperty("selected", true);
+ this.focus();
+
+
+ // Show the submenu for this instance
+
+ var oSubmenu = this.cfg.getProperty("submenu");
+
+ if(oSubmenu) {
+
+ oSubmenu.show();
+
+ }
+
+ };
+
+
+ // "mouseout" handler for each item in the menu bar
+
+ function onMenuBarItemMouseOut(p_sType, p_aArguments, p_oMenuItem)
{
+
+ this.cfg.setProperty("selected", false);
+
+
+ var oSubmenu = this.cfg.getProperty("submenu");
+
+ if(oSubmenu) {
+
+ var oDOMEvent = p_aArguments[0],
+ oRelatedTarget =
YAHOO.util.Event.getRelatedTarget(oDOMEvent);
+
+ if(
+ !(
+ oRelatedTarget == oSubmenu.element ||
+ this._oDom.isAncestor(oSubmenu.element,
oRelatedTarget)
+ )
+ ) {
+
+ oSubmenu.hide();
+
+ }
+
+ }
+
+ };
+
+
+ // "load" handler for the window
+
+ function onWindowLoad() {
+
+ var oMenuBar = new YAHOO.widget.MenuBar("yproducts");
+
+ var i = oMenuBar.getItemGroups()[0].length - 1,
+ oMenuItem,
+ oSubmenu,
+ aSubmenuItems,
+ nSubmenuItems;
+
+
+ do {
+
+ oMenuItem = oMenuBar.getItem(i);
+
+ aSubmenuItems = g_aYProducts[oMenuItem.element.id];
+
+ if(aSubmenuItems) {
+
+ // Create a submenu
+
+ oSubmenu = new YAHOO.widget.Menu(
+ (oMenuItem.element.id + "menu")
+ );
+
+ // Add a "mouseover" event handler to the submenu
+
+ oSubmenu.mouseOverEvent.subscribe(
+ onSubmenuMouseOver,
+ oSubmenu,
+ true
+ );
+
+
+ // Add a "mouseout" event handler to the submenu
+
+ oSubmenu.mouseOutEvent.subscribe(
+ onSubmenuMouseOut,
+ oSubmenu,
+ true
+ );
+
+
+ // Add items to the submenu
+
+ nSubmenuItems = aSubmenuItems.length;
+
+ for(var n=0; n<nSubmenuItems; n++) {
+
+ oSubmenu.addItem(
+ new YAHOO.widget.MenuItem(
+ aSubmenuItems[n].text,
+ { url: aSubmenuItems[n].url}
+ )
+ );
+
+ }
+
+
+ // Add the submenu to its parent item in the main menu
+
+ oMenuItem.cfg.setProperty("submenu", oSubmenu);
+
+ YAHOO.example.OverlayManager.register(oSubmenu);
+
+ }
+
+ }
+ while(i--);
+
+
+ // Render the menubar and corresponding submenus
+
+ oMenuBar.render();
+
+
+ /*
+ Add a "mouseover" and "mouseout" event handler each item
+ in the menu bar
+ */
+
+ var aMenuBarItems = oMenuBar.getItemGroups()[0],
+ i = aMenuBarItems.length - 1;
+
+ do {
+
+ aMenuBarItems[i].mouseOverEvent.subscribe(
+ onMenuBarItemMouseOver
+ );
+
+ aMenuBarItems[i].mouseOutEvent.subscribe(
+ onMenuBarItemMouseOut
+ );
+
+ }
+ while(i--);
+
+
+ // Add a "mouseover" handler to the menubar
+
+ oMenuBar.mouseOverEvent.subscribe(
+ onMenuBarMouseOver,
+ oMenuBar,
+ true
+ );
+
+
+ // Add a "mousedown" handler to the document
+
+ YAHOO.util.Event.addListener(
+ document,
+ "mousedown",
+ onDocumentMouseDown
+ );
+
+ }
+
+
+ // Add a "load" handler for the window
+
+ YAHOO.util.Event.addListener(window, "load", onWindowLoad);
+
+ </script>
+ </head>
+ <body id="yahoo-com">
+ <div id="doc" class="yui-t1">
+ <div id="hd">
+ <!-- start: your content here -->
+
+ <h1>Website Top Nav Exmaple <em>[<a
href="index.html">Examples Home</a>]</em></h1>
+
+ <!-- end: your content here -->
+ </div>
+ <div id="bd">
+
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <!-- start: stack grids here -->
+
+ <div id="yproducts" class="yuimenubar">
+ <div class="bd">
+ <ul class="first-of-type">
+ <li id="communications"
class="yuimenubaritem first-of-type"><a
href="http://communications.yahoo.com/";>Communications</a></li>
+ <li id="entertainment"
class="yuimenubaritem"><a
href="http://entertainment.yahoo.com/";>Entertainment</a></li>
+ <li id="finance" class="yuimenubaritem"><a
href="http://finance.yahoo.com/";>Finance</a></li>
+ <li id="search" class="yuimenubaritem"><a
href="http://search.yahoo.com/";>Search</a></li>
+ </ul>
+ </div>
+ </div>
+
+ <p><strong>NOTE:</strong> <em>This example
demonstrates how to combine a menu built from existing markup with a menu built
completely from JavaScript. The root menu in the top nav is constructed using
markup and enables the user to navigate to different landing pages for each
product category. If JavaScript is enabled, submenus are constructed and
appended to the root menu. This allows the user to skip the product landing
pages and proceed directly to a given property.</em></p>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat
volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas
pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus.
Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed
sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis,
tellus. Sed eleifend.</p>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat
volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas
pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus.
Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed
sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis,
tellus. Sed eleifend.</p>
+
+ <!-- end: stack grids here -->
+ </div>
+ </div>
+ <!-- end: primary column from outer template -->
+
+ <!-- start: secondary column from outer template -->
+ <div class="yui-b">
+
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque
orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat
volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas
pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus.
Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed
sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis,
tellus. Sed eleifend.</p>
+
+ </div>
+ <!-- end: secondary column from outer template -->
+ </div>
+ <div id="ft">
+
+ <p>FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus
quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim
cursus, quam lacus feugiat.</p>
+
+ </div>
+ </div>
+ </body>
+</html>
\ No newline at end of file
Index: menu/img/dolly.jpg
===================================================================
RCS file: menu/img/dolly.jpg
diff -N menu/img/dolly.jpg
Binary files /dev/null and /tmp/cvsKO0Gj4 differ
Index: slider/basic.html
===================================================================
RCS file: slider/basic.html
diff -N slider/basic.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ slider/basic.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,211 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Yahoo! UI Library - Slider Widget</title>
+<link rel="stylesheet" type="text/css" href="css/screen.css">
+
+<!-- Nav and logger start -->
+
+<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/logger/logger.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/animation/animation.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/slider/slider-debug.js"
></script></head>
+<body>
+<div id="pageTitle"><h3>Slider Widget</h3></div>
+
+<div id="container">
+ <div id="containerTop">
+ <div id="header"><img id="ylogo" src="img/logo.gif" /></div>
+ <div id="main">
+
+
+ <!-- Nav and logger start -->
+
+<style type="text/css">
+ #logButtonHeader input { font-size: 80% }
+
+/* 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>
+
+<div id="rightbar">
+ <div id="rightBarPad">
+ <h3>Links</h3>
+ <div id="linkage">
+ <ul>
+ <li><a href="index.html?mode=dist">Basic Sliders</a></li>
+ <li><a href="basic.html?mode=dist">Scale Factor</a></li>
+ <li><a href="rgb.html?mode=dist">RGB Slider</a></li>
+ <li><a href="rgb2.html?mode=dist">Color Picker</a></li>
+ <!--
+ <li><a href="slider.html?mode=dist">All on one page</a></li>
+ -->
+ </ul>
+ </div>
+
+
+ <script type="text/javascript">
+
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ return {
+ init: function() {
+ if (YAHOO.widget.Logger) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
+
+ <div id="logDiv"></div>
+
+ </div>
+</div>
+<!-- Nav and logger end -->
+
+
+ <div id="content">
+ <div class="newsItem">
+ <h3>Slider</h3>
+ <p>
+ This example uses a scale factor to convert pixels into
+ a "real" value.
+ </p>
+ <p>
+<strong>The logger is paused for performance reasons. Click "Resume" to
re-enable it.</strong>
+</p>
+
+ <div id="vertWrapper">
+ <div
+ id="vertBGDiv"
+ name="vertBGDiv"
+ title="Vertical Slider">
+ <div id="vertHandleDiv"><img alt=""
src="img/vertSlider.png" /></div>
+ </div>
+
+ <div id="vertValueDiv">
+ <form name="formV" id="formV">
+ <input name="vertVal" id="vertVal" type="text" value="0"
size="4" maxlength="4" />
+ <input id="vertButton" type="button" value="Update" />
+ </form>
+ </div>
+ </div>
+ <div>
+ <input id="re2" type="button" value="removeTicks" />
+ </div>
+ </div>
+
+ </div>
+ </div>
+</div>
+
+
+<script type="text/javascript">
+
+YAHOO.example.SliderApp = function() {
+ var verticalSlider;
+
+ // The slider can move 0 pixels up
+ var topConstraint = 0;
+
+ // The slider can move 200 pixels down
+ var bottomConstraint = 200;
+
+ // Custom scale factor for converting the pixel offset into a real value
+ var scaleFactor = 1.5;
+
+ return {
+
+ init: function() {
+
+ YAHOO.util.Event.addListener("formV", "submit", this.updateVert);
+ YAHOO.util.Event.addListener("vertButton", "click",
this.updateVert);
+
+ verticalSlider = YAHOO.widget.Slider.getVertSlider("vertBGDiv",
+ "vertHandleDiv", topConstraint, bottomConstraint,
20);
+
+ verticalSlider.onChange = function(offsetFromStart) {
+ // use the scale factor to convert the pixel offset into a
+ // real value
+ var actualValue = parseInt(offsetFromStart * scaleFactor, 10);
+ document.getElementById("vertVal").value = actualValue;
+ document.getElementById("vertBGDiv").title =
+ "Vertical Slider, value = " + actualValue;
+ };
+
+ verticalSlider.onSlideStart = function() {
+ YAHOO.log("slidestart");
+ };
+
+ verticalSlider.onSlideEnd = function() {
+ YAHOO.log("slideend");
+ };
+
+ // verticalSlider.unreg();
+ // verticalSlider.backgroundEnabled = false;
+
+ verticalSlider.setValue(20);
+
+ },
+
+ updateVert: function() {
+ var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
+ if ( isNaN(v) ) v = 0;
+
+ // convert the real value into a pixel offset
+ verticalSlider.setValue(Math.round(v/scaleFactor));
+ return false;
+ },
+
+ clearConstraints: function() {
+ verticalSlider.getThumb().clearConstraints();
+ },
+
+ clearTicks: function() {
+ verticalSlider.getThumb().clearTicks();
+ }
+ };
+} ();
+
+//YAHOO.example.SliderApp.init();
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.SliderApp.init,
+ YAHOO.example.SliderApp, true);
+YAHOO.util.Event.addListener("re2", "click",
YAHOO.example.SliderApp.clearTicks);
+</script>
+
+</body>
+</html>
Index: slider/index.html
===================================================================
RCS file: slider/index.html
diff -N slider/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ slider/index.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,373 @@
+<!DOCTYPE html PUBLIC "-//W4C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd";>
+<html lang="en" xml:lang="en" xmlns="http://www.w4.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" ></link>
+
+<!-- Nav and logger start -->
+
+<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/logger/logger.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/animation/animation.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/slider/slider-debug.js"
></script></head>
+<body>
+<div id="pageTitle"><h3>Slider Widget</h3></div>
+
+<div id="container">
+ <div id="containerTop">
+ <div id="header"><img id="ylogo" src="img/logo.gif" /></div>
+ <div id="main">
+
+ <!-- Nav and logger start -->
+
+<style type="text/css">
+ #logButtonHeader input { font-size: 80% }
+
+/* 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>
+
+<div id="rightbar">
+ <div id="rightBarPad">
+ <h3>Links</h3>
+ <div id="linkage">
+ <ul>
+ <li><a href="index.html?mode=dist">Basic Sliders</a></li>
+ <li><a href="basic.html?mode=dist">Scale Factor</a></li>
+ <li><a href="rgb.html?mode=dist">RGB Slider</a></li>
+ <li><a href="rgb2.html?mode=dist">Color Picker</a></li>
+ <!--
+ <li><a href="slider.html?mode=dist">All on one page</a></li>
+ -->
+ </ul>
+ </div>
+
+
+ <script type="text/javascript">
+
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ return {
+ init: function() {
+ if (YAHOO.widget.Logger) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
+
+ <div id="logDiv"></div>
+
+ </div>
+</div>
+<!-- Nav and logger end -->
+
+
+ <div id="content">
+ <div class="newsItem">
+ <h3>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>
+<strong>The logger is paused for performance reasons. Click "Resume" to
re-enable it.</strong>
+ <p>
+ <!--
+ <a
href="javascript:verticalSlider.lock()">Lock</a>
+ <a
href="javascript:verticalSlider.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"
+ onkeydown="return handleVertSliderKey(this,
YAHOO.util.Event.getEvent(event))"
+
onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))" >
+ <div id="vertHandleDiv"><img alt=""
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"
+ onkeydown="return handleHorizSliderKey(this,
YAHOO.util.Event.getEvent(event))"
+
onkeypress="YAHOO.util.Event.preventDefault(YAHOO.util.Event.getEvent(event))" >
+ <div id="horizHandleDiv" ><img alt="" 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>
+
+
+<script type="text/javascript">
+//<![CDATA[
+function handleHorizSliderKey(slider, ev) {
+ if (gLogger) gLogger.debug("horizontal slider keypress");
+
+ // var valueNow =
parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa";, "valuenow"),
10);
+
+ var valueNow = horizontalSlider.getValue();
+
+ // var valueMin =
parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa";, "valuemin"),
10);
+ // var valueMax =
parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa";, "valuemax"),
10);
+
+ var valueMin = verticalSlider.thumb.rightConstraint;
+ var valueMax = verticalSlider.thumb.leftConstraint;
+
+ var delta = 0;
+
+ var kc = ev.keyCode;
+
+ if (gLogger) gLogger.debug("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;
+
+ horizontalSlider.setValue(valueNow, true);
+
+ if (slider.setAttributeNS) {
+ slider.setAttributeNS("http://www.w3.org/2005/07/aaa";,
+ "valuenow",
+ valueNow);
+ }
+
+ // displaySlider(slider);
+
+ YAHOO.util.Event.stopEvent(ev);
+ return false;
+}
+
+function handleVertSliderKey(slider, ev) {
+ if (gLogger) gLogger.debug("vertical slider keypress");
+
+ // var valueNow =
parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa";, "valuenow"),
10);
+
+ var valueNow = verticalSlider.getValue();
+
+ // var valueMin =
parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa";, "valuemin"),
10);
+ // var valueMax =
parseInt(slider.getAttributeNS("http://www.w3.org/2005/07/aaa";, "valuemax"),
10);
+
+ var valueMin = verticalSlider.thumb.topConstraint;
+ var valueMax = verticalSlider.thumb.bottomConstraint;
+
+ 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;
+ }
+
+ if (slider.setAttributeNS) {
+ slider.setAttributeNS("http://www.w3.org/2005/07/aaa";,
+ "valuenow", valueNow);
+ }
+
+ // displaySlider(slider);
+ verticalSlider.setValue(valueNow, true);
+
+ YAHOO.util.Event.stopEvent(ev);
+ return false;
+}
+
+ var verticalSlider, horizontalSlider;
+ var gLogger;
+ function init() {
+ if (typeof(ygLogger) != "undefined") {
+ ygLogger.init(document.getElementById("logDiv"));
+ gLogger = new ygLogger("slider.php");
+ }
+
+ //////////////////////////////////////////////////////////////////
+
+ verticalSlider = YAHOO.widget.Slider.getVertSlider("vertBGDiv",
+ "vertHandleDiv", 0, 200);
+
+ verticalSlider.onChange = function(offsetFromStart) {
+ document.getElementById("vertVal").value =
offsetFromStart;
+ document.getElementById("vertBGDiv").title =
+ "Vertical Slider, value = " + offsetFromStart;
+ };
+
+ verticalSlider.onSlideStart = function() {
+ //alert("slidestart");
+ YAHOO.log("VERT slidestart", "warn");
+ }
+
+ verticalSlider.onSlideEnd = function() {
+ //alert("slideend");
+ YAHOO.log("VERT slideend", "warn");
+ }
+
+ // verticalSlider.setValue(20);
+ // verticalSlider.lock();
+ //verticalSlider.animate = false;
+
+
+
+ document.getElementById("vertVal").title =
+ "Type in slider value between 0 and 200.";
+
+
+ //////////////////////////////////////////////////////////////////
+
+ horizontalSlider =
YAHOO.widget.Slider.getHorizSlider("horizBGDiv",
+ "horizHandleDiv", 100, 100, 25);
+
+ horizontalSlider.onChange = function(offsetFromStart) {
+ document.getElementById("horizVal").value =
offsetFromStart;
+ document.getElementById("horizBGDiv").title =
+ "Horizontal Slider, value = " + offsetFromStart;
+ };
+
+ horizontalSlider.onSlideStart = function() {
+ //alert("slidestart");
+ YAHOO.log("HORIZ slidestart", "warn");
+ };
+
+ horizontalSlider.onSlideEnd = function() {
+ // alert("slideend");
+ YAHOO.log("HORIZ slideend", "warn");
+ };
+
+
+ // horizontalSlider.lock();
+
+ document.getElementById("horizVal").title =
+ "Type in slider value between -100 and 100. Values " +
+ "will be rounded to a number divisable by 25."
+ }
+
+ function updateVert() {
+ var v = parseFloat(document.forms['formV']['vertVal'].value,
10);
+ if ( isNaN(v) ) v = 0;
+ verticalSlider.setValue(Math.round(v));
+ return false;
+ }
+
+ function updateHoriz() {
+ var fld = document.forms["formH"]["horizVal"];
+ var v = parseFloat(fld.value, 10);
+ if ( isNaN(v) ) v = 0;
+ horizontalSlider.setValue(Math.round(v));
+ var newVal = horizontalSlider.getValue();
+ if (v != newVal) {
+ fld.value = newVal;
+ }
+ return false;
+ }
+
+ window.onload = init;
+ //]]>
+</script>
+
+</body>
+</html>
Index: slider/rgb.html
===================================================================
RCS file: slider/rgb.html
diff -N slider/rgb.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ slider/rgb.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,430 @@
+<!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">
+
+ .dragPanel {
+ position: absolute;
+ background-color: #eeeeee;
+ top: 200px;
+ left: 20px;
+ width: 320px;
+ height: 180px;
+ }
+
+ .dragPanel h4 {
+ background-color: #bbbbbb;
+ height: 10px;
+ margin: 0px;
+ cursor: move;
+ }
+
+
+ input { font-size: 85%}
+ .thumb {
+ cursor:default;
+ width:18px;
+ height:18px;
+ z-index: 9;
+ position: absolute;
+ left: 0px;
+ }
+
+ .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}
+
+ #swatch {
+ position:absolute;
+ left:160px;
+ top:34px;
+ height:50px;
+ width:50px;
+ border:1px solid #aaaaaa;
+ }
+
+</style>
+
+<!-- Nav and logger start -->
+
+<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/logger/logger.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/animation/animation.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/slider/slider-debug.js"
></script></head>
+<body>
+<div id="pageTitle"><h3>Slider Widget</h3></div>
+
+<div id="container">
+ <div id="containerTop">
+ <div id="header"><img id="ylogo" src="img/logo.gif" /></div>
+ <div id="main">
+
+ <!-- Nav and logger start -->
+
+<style type="text/css">
+ #logButtonHeader input { font-size: 80% }
+
+/* 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>
+
+<div id="rightbar">
+ <div id="rightBarPad">
+ <h3>Links</h3>
+ <div id="linkage">
+ <ul>
+ <li><a href="index.html?mode=dist">Basic Sliders</a></li>
+ <li><a href="basic.html?mode=dist">Scale Factor</a></li>
+ <li><a href="rgb.html?mode=dist">RGB Slider</a></li>
+ <li><a href="rgb2.html?mode=dist">Color Picker</a></li>
+ <!--
+ <li><a href="slider.html?mode=dist">All on one page</a></li>
+ -->
+ </ul>
+ </div>
+
+
+ <script type="text/javascript">
+
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ return {
+ init: function() {
+ if (YAHOO.widget.Logger) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
+
+ <div id="logDiv"></div>
+
+ </div>
+</div>
+<!-- Nav and logger end -->
+
+
+ <div id="content">
+ <div class="newsItem">
+ <h3>RGB Slider</h3>
+ <p>
+ The RGB slider implements three slider controls to
generate a
+ RGB color. The background color of each slider is
also
+ dynamically modified to reflect the colors that could
be
+ generated by moving a single slider.
+ </p>
+<strong>The logger is paused for performance reasons. Click "Resume" to
re-enable it.</strong>
+ </div>
+ </div>
+
+ </div>
+ </div>
+</div>
+
+<div id="ddRGB" class="dragPanel">
+ <h4 id="pickerHandle"> </h4>
+ <div id="rBG" class="bg">
+ <div id="rthumb" class="thumb"><img src="img/vline.png" /></div>
+ </div>
+
+ <div id="gBG" class="bg">
+ <div id="gthumb" class="thumb"><img src="img/vline.png" /></div>
+ </div>
+
+ <div id="bBG" class="bg">
+ <div id="bthumb" class="thumb"><img src="img/vline.png" /></div>
+ </div>
+
+
+ <div id="valdiv">
+ <form name="rgbform" onsubmit="return userUpdate()">
+ <table border="0">
+ <tr>
+ <td>
+ RGB
+ </td>
+ <td>
+ <input name="rval" id="rval" type="text" value="0" size="4"
maxlength="4" />
+ <input name="gval" id="gval" type="text" value="0" size="4"
maxlength="4" />
+ <input name="bval" id="bval" type="text" value="0" size="4"
maxlength="4" />
+ </td>
+ <td>
+ <input type="button" value="Update" onclick="userUpdate()" />
+ </td>
+ </tr>
+ <tr>
+ <td>
+ Hex: #
+ </td>
+ <td>
+ <input name="hexval" id="hexval" type="text" value="" size="6"
maxlength="6" />
+ </td>
+ <td>
+ <input type="button" value="Update" onclick="userUpdate(true)"
/>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <input type="button" value="Reset" onclick="userReset()" />
+ </td>
+ </tr>
+ </table>
+ </form>
+ </div>
+
+ <div id="swatch"> </div>
+ </div>
+
+
+<script type="text/javascript">
+
+ var r, g, b;
+ var dd;
+
+ function init() {
+ rgbInit();
+ }
+
+ 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();
+
+ dd = new YAHOO.util.DD("ddRGB");
+ dd.setHandleElId("pickerHandle");
+ }
+
+ window.onload = init;
+
+ 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("swatch").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) {
+ 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);
+ YAHOO.log("setValue, r: " + v);
+ r.setValue(Math.round(v) / 2);
+
+ v = parseFloat(f['gval'].value);
+ v = ( isNaN(v) ) ? 0 : Math.round(v);
+ YAHOO.log("setValue, g: " + g);
+ g.setValue(Math.round(v) / 2);
+
+ v = parseFloat(f['bval'].value);
+ v = ( isNaN(v) ) ? 0 : Math.round(v);
+ YAHOO.log("setValue, b: " + b);
+ 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);
+ }
+</script>
+
+</body>
+</html>
Index: slider/rgb2.html
===================================================================
RCS file: slider/rgb2.html
diff -N slider/rgb2.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ slider/rgb2.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,343 @@
+<!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">
+ input { font-size: .85em }
+
+ #ddPicker {
+ position: absolute;
+ background-color: #eeeeee;
+ top: 200px;
+ left: 20px;
+ width: 360px;
+ height: 240px;
+ }
+
+ #pickerHandle {
+ background-color: #bbbbbb;
+ height: 10px;
+ cursor: move;
+ }
+
+ #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;
+ }
+
+ #valdiv { text-align:right; position:absolute; top: 86px; left:246px; }
+
+ #rBG {top:180px}
+ #gBG {top:210px}
+ #bBG {top:240px}
+
+ #swatch {
+ position:absolute;
+ left:260px;
+ top:30px;
+ height:60px;
+ width:60px;
+ border:2px solid #aaaaaa;
+ }
+
+</style>
+
+<!-- Nav and logger start -->
+
+<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/logger/logger.js" ></script>
+<script type="text/javascript" src="../../build/dom/dom.js" ></script>
+<script type="text/javascript" src="../../build/animation/animation.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/slider/slider-debug.js"
></script></head>
+<body>
+<div id="pageTitle"><h3>Slider Widget</h3></div>
+
+<div id="container">
+ <div id="containerTop">
+ <div id="header"><img id="ylogo" src="img/logo.gif" /></div>
+ <div id="main">
+
+ <!-- Nav and logger start -->
+
+<style type="text/css">
+ #logButtonHeader input { font-size: 80% }
+
+/* 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>
+
+<div id="rightbar">
+ <div id="rightBarPad">
+ <h3>Links</h3>
+ <div id="linkage">
+ <ul>
+ <li><a href="index.html?mode=dist">Basic Sliders</a></li>
+ <li><a href="basic.html?mode=dist">Scale Factor</a></li>
+ <li><a href="rgb.html?mode=dist">RGB Slider</a></li>
+ <li><a href="rgb2.html?mode=dist">Color Picker</a></li>
+ <!--
+ <li><a href="slider.html?mode=dist">All on one page</a></li>
+ -->
+ </ul>
+ </div>
+
+
+ <script type="text/javascript">
+
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ return {
+ init: function() {
+ if (YAHOO.widget.Logger) {
+ YAHOO.widget.Logger.disableFirebug();
+ 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>
+
+ <div id="logDiv"></div>
+
+ </div>
+</div>
+<!-- Nav and logger end -->
+
+
+ <div id="content">
+ <div class="newsItem">
+ <h3>HSV Color Picker</h3>
+ <p> </p>
+<strong>The logger is paused for performance reasons. Click "Resume" to
re-enable it.</strong>
+ </div>
+ </div>
+
+ </div>
+ </div>
+</div>
+
+<div id="ddPicker">
+ <div id="pickerHandle"> </div>
+ <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="valdiv">
+ <form name="rgbform" onsubmit="return userUpdate()">
+ <br />
+ R <input name="rval" id="rval" type="text" value="0" size="3"
maxlength="3" />
+ H <input name="hval" id="hval" type="text" value="0" size="3"
maxlength="3" />
+ <br />
+ G <input name="gval" id="gval" type="text" value="0" size="3"
maxlength="3" />
+ S <input name="gsal" id="sval" type="text" value="0" size="3"
maxlength="3" />
+ <br />
+ B <input name="bval" id="bval" type="text" value="0" size="3"
maxlength="3" />
+ V <input name="vval" id="vval" type="text" value="0" size="3"
maxlength="3" />
+ <br />
+ <br />
+ # <input name="hexval" id="hexval" type="text" value="0"
size="6" maxlength="6" />
+ <br />
+
+ </form>
+ </div>
+
+ <div id="swatch"> </div>
+</div>
+
+
+<script type="text/javascript">
+
+ var hue;
+ var picker;
+ var dd;
+
+ function init() {
+
+ 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();
+
+ dd = new YAHOO.util.DD("ddPicker");
+ dd.setHandleElId("pickerHandle");
+ dd.endDrag = function(e) {
+ // picker.thumb.resetConstraints();
+ // hue.thumb.resetConstraints();
+ };
+ }
+
+ window.onload = init;
+
+ function pickerUpdate(newX, newY) {
+ swatchUpdate();
+ }
+
+ 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] + ")";
+
+ swatchUpdate();
+ }
+
+ function swatchUpdate() {
+ var h = (180 - hue.getValue());
+ if (h == 180) { h = 0; }
+ document.getElementById("hval").value = (h*2);
+
+ h = h / 180;
+ YAHOO.log("h " + hue.getValue());
+
+ var s = picker.getXValue() / 180;
+ document.getElementById("sval").value = Math.round(s * 100);
+
+ YAHOO.log("s " + s);
+
+ var v = (180 - picker.getYValue()) / 180;
+ document.getElementById("vval").value = Math.round(v * 100);
+
+ YAHOO.log("v " + v);
+
+ var a = YAHOO.util.Color.hsv2rgb( h, s, v );
+
+ document.getElementById("swatch").style.backgroundColor =
+ "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
+
+ document.getElementById("rval").value = a[0];
+ document.getElementById("gval").value = a[1];
+ document.getElementById("bval").value = a[2];
+ document.getElementById("hexval").value =
+ YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
+ }
+</script>
+
+
+<!--[if gte IE 5.5000]>
+<script type="text/javascript">
+
+// yuck.
+
+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>
Index: slider/css/screen.css
===================================================================
RCS file: slider/css/screen.css
diff -N slider/css/screen.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ slider/css/screen.css 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,282 @@
+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; }
+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: 0px
solid Green; }
+#header h1 a { display: block; height: 19px; text-decoration: none; }
+#header { height: 60px; border: 0px solid #CFFB00; margin-bottom:0px;
padding: 4px; }
+#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; 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; }
+
+/* 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 {
+ position:absolute;
+ left: 100px; /* the default position is the center of the bg */
+ top: 8px; /* force the image down a bit */
+ cursor:default;
+ width:18px;
+ height:18px;
+}
+
+#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;zindex: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; }
+
+
+
Index: slider/img/bullet.gif
===================================================================
RCS file: slider/img/bullet.gif
diff -N slider/img/bullet.gif
Binary files /dev/null and /tmp/cvsvBsXgY differ
Index: slider/img/greybg.png
===================================================================
RCS file: slider/img/greybg.png
diff -N slider/img/greybg.png
Binary files /dev/null and /tmp/cvs2vDEGY differ
Index: slider/img/header.gif
===================================================================
RCS file: slider/img/header.gif
diff -N slider/img/header.gif
Binary files /dev/null and /tmp/cvsH8OuPW differ
Index: slider/img/hline.png
===================================================================
RCS file: slider/img/hline.png
diff -N slider/img/hline.png
Binary files /dev/null and /tmp/cvsC5SncX differ
Index: slider/img/horizBg.png
===================================================================
RCS file: slider/img/horizBg.png
diff -N slider/img/horizBg.png
Binary files /dev/null and /tmp/cvszjylEX differ
Index: slider/img/horizSlider.png
===================================================================
RCS file: slider/img/horizSlider.png
diff -N slider/img/horizSlider.png
Binary files /dev/null and /tmp/cvseaZLs0 differ
Index: slider/img/horizSlider_on.png
===================================================================
RCS file: slider/img/horizSlider_on.png
diff -N slider/img/horizSlider_on.png
Binary files /dev/null and /tmp/cvs7Z6TT0 differ
Index: slider/img/hue.png
===================================================================
RCS file: slider/img/hue.png
diff -N slider/img/hue.png
Binary files /dev/null and /tmp/cvsEM5Lm1 differ
Index: slider/img/logo.gif
===================================================================
RCS file: slider/img/logo.gif
diff -N slider/img/logo.gif
Binary files /dev/null and /tmp/cvsnN9WwZ differ
Index: slider/img/lthumb.png
===================================================================
RCS file: slider/img/lthumb.png
diff -N slider/img/lthumb.png
Binary files /dev/null and /tmp/cvswPAib0 differ
Index: slider/img/navHover2.png
===================================================================
RCS file: slider/img/navHover2.png
diff -N slider/img/navHover2.png
Binary files /dev/null and /tmp/cvstdQOZ2 differ
Index: slider/img/pickerbg.png
===================================================================
RCS file: slider/img/pickerbg.png
diff -N slider/img/pickerbg.png
Binary files /dev/null and /tmp/cvsuFjMt3 differ
Index: slider/img/qbottom.png
===================================================================
RCS file: slider/img/qbottom.png
diff -N slider/img/qbottom.png
Binary files /dev/null and /tmp/cvsJC2pU3 differ
Index: slider/img/qmiddle.png
===================================================================
RCS file: slider/img/qmiddle.png
diff -N slider/img/qmiddle.png
Binary files /dev/null and /tmp/cvsKqn1X1 differ
Index: slider/img/qtop.png
===================================================================
RCS file: slider/img/qtop.png
diff -N slider/img/qtop.png
Binary files /dev/null and /tmp/cvs5uUjq2 differ
Index: slider/img/select.gif
===================================================================
RCS file: slider/img/select.gif
diff -N slider/img/select.gif
Binary files /dev/null and /tmp/cvsWbXce5 differ
Index: slider/img/select.png
===================================================================
RCS file: slider/img/select.png
diff -N slider/img/select.png
Binary files /dev/null and /tmp/cvsZkEQU5 differ
Index: slider/img/vertBg.png
===================================================================
RCS file: slider/img/vertBg.png
diff -N slider/img/vertBg.png
Binary files /dev/null and /tmp/cvs8eBvg6 differ
Index: slider/img/vertSlider.png
===================================================================
RCS file: slider/img/vertSlider.png
diff -N slider/img/vertSlider.png
Binary files /dev/null and /tmp/cvsdbcNn4 differ
Index: slider/img/vertSlider_on.png
===================================================================
RCS file: slider/img/vertSlider_on.png
diff -N slider/img/vertSlider_on.png
Binary files /dev/null and /tmp/cvsWpqp34 differ
Index: slider/img/vline.png
===================================================================
RCS file: slider/img/vline.png
diff -N slider/img/vline.png
Binary files /dev/null and /tmp/cvsPtuqR7 differ
Index: treeview/anim.html
===================================================================
RCS file: treeview/anim.html
diff -N treeview/anim.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/anim.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,180 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+
+<head>
+<title>Yahoo! UI Library - Tree Control</title>
+<link rel="stylesheet" type="text/css" href="css/screen.css">
+</head>
+<body onload="treeInit()">
+
+<link rel="stylesheet" type="text/css" href="css/local/tree.css">
+
+<div id="pageTitle">
+ <h3>Tree Control</h3>
+</div>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+
+<!-- The following are required for the logger -->
+<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>
+<!-- End logger reqs -->
+
+<script type="text/javascript" src="../../build/treeview/treeview-debug.js"
></script>
+
+<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>
+
+
+<div id="container">
+<img class="ylogo" src="img/logo.gif" alt="" />
+ <div id="containerTop">
+ <div id="header">
+ <h1>
+
+ </h1>
+ <h4> </h4>
+ </div>
+ <div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="default.html?mode=dist">Default tree widget</a></li>
+<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
+
+
+<li><a href="folders.html?mode=dist">Folder view</a></li>
+<li><a href="menu.html?mode=dist">Menu</a></li>
+<li><a href="html.html?mode=dist">HTML node</a></li>
+<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
+<li><a href="check.html?mode=dist">Task list</a></li>
+<li><a href="anim.html?mode=dist">Fade animation</a></li>
+</ul>
+
+</div>
+
+
+ <script type="text/javascript">
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ var divId;
+ return {
+ init: function(p_divId, p_toggleElId, p_clearElId) {
+ divId = p_divId
+ },
+
+ onload: function() {
+ if (YAHOO.widget.Logger) {
+ new YAHOO.widget.LogReader( "logDiv", { height: "400px" }
);
+ }
+ }
+ };
+ } ();
+
+ YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
+
+ //]]>
+ </script>
+
+ <div id="logDiv"></div>
+
+
+</div>
+
+</div>
+
+
+<script type="text/javascript"
src="../../build/animation/animation.js"></script>
+
+ <div id="content">
+ <form name="mainForm" action="javscript:;">
+ <div class="newsItem">
+ <h3>Animated TreeView Widget</h3>
+ <p> </p>
+
+ <div id="expandcontractdiv">
+ <a href="javascript:tree.expandAll()">Expand all</a>
+ <a href="javascript:tree.collapseAll()">Collapse all</a>
+ </div>
+ <div id="treeDiv1"></div>
+
+ </div>
+ </form>
+ </div>
+ <div id="footerContainer">
+ <div id="footer">
+ <p> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+ <script type="text/javascript">
+
+ var tree;
+ var nodes = new Array();
+ var nodeIndex;
+
+ function treeInit() {
+ buildRandomTextNodeTree();
+ }
+
+ function buildRandomTextNodeTree() {
+ tree = new YAHOO.widget.TreeView("treeDiv1");
+ tree.setExpandAnim(YAHOO.widget.TVAnim.FADE_IN);
+ tree.setCollapseAnim(YAHOO.widget.TVAnim.FADE_OUT);
+
+ for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
+ var tmpNode = new YAHOO.widget.TextNode("label-" + i,
tree.getRoot(), false);
+ buildRandomTextBranch(tmpNode);
+ }
+
+ tree.draw();
+ }
+
+ var callback = null;
+
+ function buildRandomTextBranch(node) {
+ if (node.depth < 6) {
+ YAHOO.log("buildRandomTextBranch: " + node.index);
+ for ( var i = 0; i < Math.floor(Math.random() * 6) ;
i++ ) {
+ var tmpNode = new
YAHOO.widget.TextNode(node.label + "-" + i, node, false);
+ buildRandomTextBranch(tmpNode);
+ }
+ }
+ }
+
+ </script>
+
+ </body>
+</html>
+
Index: treeview/check.html
===================================================================
RCS file: treeview/check.html
diff -N treeview/check.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/check.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,220 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+
+<head>
+<title>Yahoo! UI Library - Tree Control</title>
+<link rel="stylesheet" type="text/css" href="css/screen.css">
+</head>
+
+<body onload="treeInit()">
+
+<link rel="stylesheet" type="text/css" href="css/check/tree.css">
+
+<div id="pageTitle">
+ <h3>Tree Control</h3>
+</div>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+
+<!-- The following are required for the logger -->
+<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>
+<!-- End logger reqs -->
+
+<script type="text/javascript" src="../../build/treeview/treeview-debug.js"
></script>
+
+<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>
+
+
+<div id="container">
+<img class="ylogo" src="img/logo.gif" alt="" />
+ <div id="containerTop">
+ <div id="header">
+ <h1>
+
+ </h1>
+ <h4> </h4>
+ </div>
+ <div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="default.html?mode=dist">Default tree widget</a></li>
+<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
+
+
+<li><a href="folders.html?mode=dist">Folder view</a></li>
+<li><a href="menu.html?mode=dist">Menu</a></li>
+<li><a href="html.html?mode=dist">HTML node</a></li>
+<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
+<li><a href="check.html?mode=dist">Task list</a></li>
+<li><a href="anim.html?mode=dist">Fade animation</a></li>
+</ul>
+
+</div>
+
+
+ <script type="text/javascript">
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ var divId;
+ return {
+ init: function(p_divId, p_toggleElId, p_clearElId) {
+ divId = p_divId
+ },
+
+ onload: function() {
+ if (YAHOO.widget.Logger) {
+ new YAHOO.widget.LogReader( "logDiv", { height: "400px" }
);
+ }
+ }
+ };
+ } ();
+
+ YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
+
+ //]]>
+ </script>
+
+ <div id="logDiv"></div>
+
+
+</div>
+
+</div>
+
+
+<script type="text/javascript" src="js/TaskNode.js"></script>
+
+ <div id="content">
+ <form name="mainForm" action="javscript:;">
+ <div class="newsItem">
+ <h3>Task List</h3>
+ <p>
+ The check boxes have three states:
+ unchecked, partially checked (some sub-tasks are finished),
checked (all sub-tasks complete)
+ </p>
+
+ <div id="expandcontractdiv">
+ <a href="javascript:tree.expandAll()">Expand all</a>
+ <a href="javascript:tree.collapseAll()">Collapse all</a>
+ </div>
+ <div id="treeDiv1"></div>
+
+ </div>
+ </form>
+ </div>
+
+ <div id="footerContainer">
+ <div id="footer">
+ <p> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<!--
+<input type="button" id="showButton" />
+-->
+
+<script type="text/javascript">
+
+ var tree;
+ var nodes = new Array();
+ var nodeIndex;
+
+ function treeInit() {
+ buildRandomTextNodeTree();
+ }
+
+ function buildRandomTextNodeTree() {
+ tree = new YAHOO.widget.TreeView("treeDiv1");
+
+ for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
+ var tmpNode = new YAHOO.widget.TaskNode("task-" + i,
tree.getRoot(), false);
+ tmpNode.onCheckClick = onCheckClick;
+ buildRandomTextBranch(tmpNode);
+ }
+
+ tree.draw();
+ // tree.checkClickEvent.subscribe(onCheckClick);
+ }
+
+ var callback = null;
+
+ function buildRandomTextBranch(node) {
+ if (node.depth < 5) {
+ YAHOO.log("buildRandomTextBranch: " + node.index);
+ for ( var i = 0; i < Math.floor(Math.random() * 4) ;
i++ ) {
+ var tmpNode = new
YAHOO.widget.TaskNode(node.label + "-" + i, node, false);
+ tmpNode.onCheckClick = onCheckClick;
+ buildRandomTextBranch(tmpNode);
+ }
+ } else {
+ // tmpNode = new YAHOO.widget.TaskNode(node.label + "-" +
i, node, false, true);
+ }
+ }
+
+
+ // function onCheckClick(eventType, args, tree) {
+ //var node = args[0];
+ function onCheckClick(eventType, args, tree) {
+ var node = this;
+ YAHOO.log(node.label + " check was clicked, new state: " +
+ node.checkState);
+ }
+
+ function showTreeState() {
+ var out = [];
+ for (var i in tree._nodes) {
+ var n = tree._nodes[i];
+ if (n && "undefined" != typeof n.checkState) {
+ out.push(n.data + ": " + n.checkState);
+ }
+ }
+
+ alert(out.join("\n"));
+ }
+
+ function showJSON() {
+ alert(JSON.stringify(tree._nodes));
+ }
+
+ //YAHOO.util.Event.on("showButton", "click", showTreeState);
+ // YAHOO.util.Event.on("showButton", "click", showJSON);
+
+</script>
+
+ </body>
+</html>
+
Index: treeview/default.html
===================================================================
RCS file: treeview/default.html
diff -N treeview/default.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/default.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,202 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
+ <html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en">
+<head>
+
+<title>Yahoo! UI Library - Tree Control</title>
+<link rel="stylesheet" type="text/css"
href="http://us.js2.yimg.com/us.js.yimg.com/lib/common/css/fonts_2.0.0-b3.css";
/>
+<link rel="stylesheet" type="text/css"
href="http://us.js2.yimg.com/us.js.yimg.com/lib/common/css/grids_2.0.0-b3.css";
/>
+
+<link rel="stylesheet" type="text/css" href="css/screen.css" />
+<!--
+<link rel="stylesheet" type="text/css"
href="http://html-new/lib/common/widgets/2/treeview/css/default/treeview_2.0.0-b4.css";
/>
+-->
+<link rel="stylesheet" type="text/css" href="css/local/tree.css" />
+</head>
+
+<body>
+
+<div id="pageTitle">
+ <h3>Tree Control</h3>
+</div>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+
+<!-- The following are required for the logger -->
+<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>
+<!-- End logger reqs -->
+
+<script type="text/javascript" src="../../build/treeview/treeview-debug.js"
></script>
+
+<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>
+
+
+<div id="container">
+<img class="ylogo" src="img/logo.gif" alt="" />
+ <div id="containerTop">
+ <div id="header">
+ <h1>
+
+ </h1>
+ <h4> </h4>
+ </div>
+ <div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="default.html?mode=dist">Default tree widget</a></li>
+<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
+
+
+<li><a href="folders.html?mode=dist">Folder view</a></li>
+<li><a href="menu.html?mode=dist">Menu</a></li>
+<li><a href="html.html?mode=dist">HTML node</a></li>
+<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
+<li><a href="check.html?mode=dist">Task list</a></li>
+<li><a href="anim.html?mode=dist">Fade animation</a></li>
+</ul>
+
+</div>
+
+
+ <script type="text/javascript">
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ var divId;
+ return {
+ init: function(p_divId, p_toggleElId, p_clearElId) {
+ divId = p_divId
+ },
+
+ onload: function() {
+ if (YAHOO.widget.Logger) {
+ new YAHOO.widget.LogReader( "logDiv", { height: "400px" }
);
+ }
+ }
+ };
+ } ();
+
+ YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
+
+ //]]>
+ </script>
+
+ <div id="logDiv"></div>
+
+
+</div>
+
+</div>
+
+
+ <div id="content">
+ <form id="mainForm" action="javscript:;">
+ <div class="newsItem">
+ <h3>Default TreeView Widget</h3>
+ <p>
+
+ </p>
+
+ <div id="expandcontractdiv">
+ <a href="javascript:tree.expandAll()">Expand all</a>
+ <a href="javascript:tree.collapseAll()">Collapse all</a>
+ </div>
+ <div id="treeDiv1"></div>
+
+ </div>
+ </form>
+ </div>
+
+ <div id="footerContainer">
+ <div id="footer">
+ <p> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+
+<script type="text/javascript">
+//<![CDATA[
+ var tree, nodeIndex;
+ var nodes = [];
+
+ function treeInit() {
+ buildRandomTextNodeTree();
+ }
+
+ function buildRandomTextNodeTree() {
+ tree = new YAHOO.widget.TreeView("treeDiv1");
+
+ for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
+ var tmpNode = new YAHOO.widget.TextNode("label-" + i,
tree.getRoot(), false);
+ // tmpNode.collapse();
+ // tmpNode.expand();
+ // buildRandomTextBranch(tmpNode);
+ buildLargeBranch(tmpNode);
+ }
+
+ tree.draw();
+ }
+
+ var callback = null;
+
+ function buildLargeBranch(node) {
+ if (node.depth < 10) {
+ YAHOO.log("buildRandomTextBranch: " + node.index);
+ for ( var i = 0; i < 10; i++ ) {
+ new YAHOO.widget.TextNode(node.label + "-" + i,
node, false);
+ }
+ }
+ }
+
+ function buildRandomTextBranch(node) {
+ if (node.depth < 10) {
+ YAHOO.log("buildRandomTextBranch: " + node.index);
+ for ( var i = 0; i < Math.floor(Math.random() * 4) ;
i++ ) {
+ var tmpNode = new
YAHOO.widget.TextNode(node.label + "-" + i, node, false);
+ buildRandomTextBranch(tmpNode);
+ }
+ }
+ }
+
+ YAHOO.util.Event.addListener(window, "load", treeInit);
+
+//]]>
+</script>
+
+ </body>
+</html>
+
Index: treeview/dynamic.html
===================================================================
RCS file: treeview/dynamic.html
diff -N treeview/dynamic.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/dynamic.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,274 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<html xmlns="http://www.w3.org/1999/xhtml";><head>
+
+
+<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1"><!--Yahoo! User Interface Library:
http://twiki.corp.yahoo.com/view/Devel/PresentationPlatform--><!--Begin YUI CSS
infrastructure, including Standard Reset, Standard Fonts, and CSS Page Grids -->
+
+<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts.css">
+<link rel="stylesheet" type="text/css"
href="../../build/grids/grids.css"><!--end YUI CSS infrastructure--><!--begin
YUIL Utilities -->
+
+<script src="../../build/yahoo/yahoo.js"></script>
+<script src="../../build/event/event.js"></script>
+<script src="../../build/treeview/treeview.js"></script>
+
+<link rel="stylesheet" type="text/css" href="css/code.css">
+<link rel="stylesheet" type="text/css" href="css/local/tree.css">
+
+<script>
+
+/*create namespace for examples:*/
+YAHOO.namespace("example");
+
+/* Using Crockford's "Module Pattern": */
+YAHOO.example.treeExample = function() {
+
+ var tree, currentIconMode;
+
+ function changeIconMode() {
+ var newVal = parseInt(this.value);
+ if (newVal != currentIconMode) {
+ currentIconMode = newVal;
+ }
+
+ buildTree();
+ }
+
+ function loadNodeData(node, fnLoadComplete) {
+ //We'll randomize our loader with stock data; in many
implementations,
+ //this step would be replaced with an XMLHttpRequest
call to the server
+ //for more data.
+
+ //Array of India's States
+ var aStates = ["Andhra Pradesh","Arunachal
Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal
Pradesh","Jammu and Kashmir","Jharkhand","Karnataka","Kerala","Madhya
Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil
Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"];
+
+ //Random number determines whether a node has children
+ var index = Math.round(Math.random()*100);
+
+ //if our random number is in range, we'll pretend that
this node
+ //has children; here, we'll indicate that 70% of nodes
have
+ //children.
+ if (index>30) {
+ //We'll use a random number to determine the
number of
+ //children for each node:
+ var childCount = (Math.round(Math.random()*5) +
1);
+
+ //This is important: The primary job of the
data loader function
+ //is to determine whether the node has children
and then to
+ //actually create the child nodes if they are
needed; here, we'll
+ //loop through to create each child node:
+ for (var i=0; i<childCount; i++) {
+ thisState =
aStates[Math.round(Math.random()*27)];
+ var newNode = new
YAHOO.widget.TextNode(thisState, node, false);
+ }
+ }
+
+ //When we're done creating child nodes, we execute the
node's
+ //loadComplete callback method which comes in as our
loader's
+ //second argument (we could also access it at
node.loadComplete,
+ //if necessary):
+ fnLoadComplete();
+ }
+
+ function buildTree() {
+ //create a new tree:
+ tree = new YAHOO.widget.TreeView("treeContainer");
+
+ //turn dynamic loading on for entire tree:
+ tree.setDynamicLoad(loadNodeData, currentIconMode);
+
+ //get root node for tree:
+ var root = tree.getRoot();
+
+ //add child nodes for tree:
+ var tmpNode1 = new YAHOO.widget.TextNode("First Node", root,
false);
+ var tmpNode2 = new YAHOO.widget.TextNode("Second Node",
root, false);
+ var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root,
false);
+ var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node",
root, false);
+ var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root,
false);
+
+ //render tree with these five nodes; all descendants of
these nodes
+ //will be generated as needed by the dynamic loader.
+ tree.draw();
+ }
+
+
+ return {
+ init: function() {
+ YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
+ var el = document.getElementById("mode1");
+ if (el && el.checked) {
+ currentIconMode = parseInt(el.value);
+ } else {
+ currentIconMode = 0;
+ }
+
+ buildTree();
+ }
+
+ }
+} ();
+
+YAHOO.util.Event.addListener(window, "load", YAHOO.example.treeExample.init,
YAHOO.example.treeExample,true)
+</script>
+<title>Dynamic TreeView Example</title>
+</head>
+<body id="yahoo">
+
+
+<!-- id: optional property or feature signature -->
+<div id="doc" class="yui-t5"><!-- possible values: t1, t2, t3, t4, t5, t6, t7
-->
+ <div id="hd">
+ <h1>TreeView Example</h1>
+ </div>
+ <div id="bd">
+
+ <!-- start: primary column from outer template -->
+ <div id="yui-main">
+ <div class="yui-b">
+ <p>In
+this example, the TreeView control's dyamic loading functionality is
+explored. Dynamic loading of child nodes allows you to optmize
+performance by only loading data for and creating the nodes that will
+be visible when the tree is rendered. Nodes that are not expanded when
+the Tree's draw method is invoked are left childless in the initial
+state. When such a node is expanded (either by user action or by
+script), a dynamic loader function is called. That function has three
+important roles:</p>
+ <ol>
+ <li><strong>Check for child nodes:</strong>
+The dynamic loader function will check for child nodes by evaluating
+in-page data (for example, data held in a JavaScript array or object)
+or by retrieving data about the expanding node from the server via
+XMLHttpRequest. In the example on this page, an in-page random list
+generator is used to generate the Tree structure. </li>
+ <li><strong>Add child nodes, if
present:</strong>
+If it determines that child node's are present for the expanding node,
+the dynamic loader must add those child nodes to the Tree instance.
+Because these nodes are only added when needed, the overall complexity
+of the Tree's complexity (in JavaScript and in the DOM) is reduced and
+its initial render time is much faster.</li>
+ <li><strong>Invoke the expanding node's
callback method:</strong>
+Once the dynamic loader method determines whether the expanding node
+has children (and adds any children that may be present), it must
+notify the expanding node's object that dynamic loading is complete. It
+does this via a callback method which is passed into the dynamic loader
+as an argument.</li>
+ </ol>
+
+ <h3>Creating a Dynamic Loader Method</h3>
+ <p>In
+this example, our dynamic loader method will accomplish its first task
+(checking for child nodes) by using a random number generator; we'll
+specify that roughly 70% of our nodes have children. When there are
+children present, there will be children will between one and six
+children (also randomly enumerated) whose labels are drawn from an
+array of Indian states.</p>
+
+<p>Our method, which we'll call <code>loadNodeData</code>, will be
+passed two arguments by the Tree instance when called: The first is a
+reference to the expanding node's node object; the second is the
+callback method that we need to call when we're done adding children to
+the expanding node. The method as it appears on this page (only the
+array of state names has been truncated) follows, with comments
+glossing each step:</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1">loadNodeData:
function(node, fnLoadComplete) {
+
+ //Array of India's States
+ var aStates = ["Andhra Pradesh",
+ "Arunachal Pradesh","Assam",
+ ...
+ ];
+
+ //Random number determines whether a node has children
+ var index = Math.round(Math.random()*100);
+
+ //if our random number is in range, we'll pretend that this node
+ //has children; here, we'll indicate that 70% of nodes have
+ //children.
+ if (index>30) {
+ //We'll use a random number to determine the number of
+ //children for each node:
+ var childCount = (Math.round(Math.random()*5) + 1);
+
+ //This is important: The primary job of the data loader function
+ //is to determine whether the node has children and then to
+ //actually create the child nodes if they are needed; here,
we'll
+ //loop through to create each child node:
+ for (var i=0; i<childCount; i++) {
+ thisState = aStates[Math.round(Math.random()*27)];
+ var newNode = new YAHOO.widget.TextNode(thisState,
node, false);
+ }
+ }
+
+ //When we're done creating child nodes, we execute the node's
+ //loadComplete callback method which comes in as our loader's
+ //second argument (we could also access it at node.loadComplete,
+ //if necessary):
+ fnLoadComplete();
+}</textarea></pre>
+
+ <h3>Setting Up the Tree Instance and
Configuring It for Dynamic Loading</h3>
+ <p>Creating
+the initial state of a Tree object that will be configured for dynamic
+loading is no different than for non-dynamic Tree instances — use the
+Tree constructor to create your new instance:</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1">//create a new
tree:
+tree = new YAHOO.widget.TreeView("treeContainer");</textarea></pre>
+
+<p>In the example on this page, the entire tree is configured for
+dynamic loading. That will result in all nodes having their children
+populated by the dynamic loader method when they are expanded for the
+first time. (You can also choose to specify individual nodes and their
+descendants as being dynamically loaded.) To the Tree instance for
+dynamic loading, merely pass the instance's <code>setDynamicLoad</code> method
a reference to your dynamic loader method:</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1">//turn dynamic
loading on for entire tree:
+tree.setDynamicLoad(this.loadNodeData);
+</textarea></pre>
+
+<p>Having created a Tree instance and configured it for dynamic
+loading, we can now add the tree's top-level nodes and then render the
+Tree via its <code>draw</code> method:</p>
+
+<pre><textarea name="code" class="JScript" cols="60" rows="1">//add child
nodes for tree:
+var tmpNode1 = new YAHOO.widget.TextNode("First Node", root, false);
+var tmpNode2 = new YAHOO.widget.TextNode("Second Node", root, false);
+var tmpNode3 = new YAHOO.widget.TextNode("Third Node", root, false);
+var tmpNode4 = new YAHOO.widget.TextNode("Fourth Node", root, false);
+var tmpNode5 = new YAHOO.widget.TextNode("Fifth Node", root, false);
+
+//render tree with these five nodes; all descendants of these nodes
+//will be generated as needed by the dynamic loader.
+tree.draw();
+</textarea></pre>
+
+<p>With that, our tree renders on the page, showing its five top-level
+nodes. As the user interacts with the tree, child nodes will be added
+and displayed based on the output of the <code>loadNodeData</code> method.</p>
+<h3>Childless Node Style</h3><p>There are two built-in visual treatments for
+childless nodes. Before a dynamically loaded node is expanded, its icon
+indicates that it can be expanded — this reflects the possibility that
+the dynamic loader will find and populate children for that node if it is
+expanded. However, once the Tree determines that a node has no children, it
+can reflect the childless state either through the "expanded" icon (<img
+ src="">) or by omitting the icon entirely. In this example, we've
+added a control that enables you to experiment with each setting to explore its
+visual impact</p><p>The default visual treatment for a childless node is the
+"expanded" icon. To change this setting, pass a second argument to your
+<code>setDynamicLoad</code> method — pass a value of <code>1</code> to
+use the iconless visual treatment.</p> </div> </div> <!-- end: primary column
+from outer template -->
+
+ <!-- start: secondary column from outer template --> <div
+ class="yui-b"> <h3>Dynamically Loaded TreeView:</h3> <div
+ id="treeContainer"></div> <h3>Childless Node Style:</h3> <dd> <label>
+ <input type="radio" id="mode0" name="mode" value ="0" checked />
+ Expand/Collapse </label> </dd> <dd> <label> <input type="radio"
+ id="mode1" name="mode" value ="1" /> Leaf Node </label> </dd> </div>
+ <!-- end: secondary column from outer template -->
+
+ </div> <div id="ft"> </div> </div> <script
+ src="js/dpSyntaxHighlighter.js"></script> <script language="javascript">
+ dp.SyntaxHighlighter.HighlightAll('code'); </script> </body></html>
Index: treeview/folders.html
===================================================================
RCS file: treeview/folders.html
diff -N treeview/folders.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/folders.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,183 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+
+<head>
+<title>Yahoo! UI Library - Tree Control</title>
+<link rel="stylesheet" type="text/css" href="css/screen.css">
+</head>
+
+<body onload="treeInit()">
+
+<link rel="stylesheet" type="text/css" href="css/folders/tree.css">
+
+<div id="pageTitle">
+ <h3>Tree Control</h3>
+</div>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+
+<!-- The following are required for the logger -->
+<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>
+<!-- End logger reqs -->
+
+<script type="text/javascript" src="../../build/treeview/treeview-debug.js"
></script>
+
+<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>
+
+
+<div id="container">
+<img class="ylogo" src="img/logo.gif" alt="" />
+ <div id="containerTop">
+ <div id="header">
+ <h1>
+
+ </h1>
+ <h4> </h4>
+ </div>
+ <div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="default.html?mode=dist">Default tree widget</a></li>
+<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
+
+
+<li><a href="folders.html?mode=dist">Folder view</a></li>
+<li><a href="menu.html?mode=dist">Menu</a></li>
+<li><a href="html.html?mode=dist">HTML node</a></li>
+<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
+<li><a href="check.html?mode=dist">Task list</a></li>
+<li><a href="anim.html?mode=dist">Fade animation</a></li>
+</ul>
+
+</div>
+
+
+ <script type="text/javascript">
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ var divId;
+ return {
+ init: function(p_divId, p_toggleElId, p_clearElId) {
+ divId = p_divId
+ },
+
+ onload: function() {
+ if (YAHOO.widget.Logger) {
+ new YAHOO.widget.LogReader( "logDiv", { height: "400px" }
);
+ }
+ }
+ };
+ } ();
+
+ YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
+
+ //]]>
+ </script>
+
+ <div id="logDiv"></div>
+
+
+</div>
+
+</div>
+
+
+ <div id="content">
+ <form name="mainForm" action="javscript:;">
+ <div class="newsItem">
+ <h3>Folders</h3>
+ <p>
+
+ </p>
+
+ <div id="expandcontractdiv">
+ <a href="javascript:tree.expandAll()">Expand all</a>
+ <a href="javascript:tree.collapseAll()">Collapse all</a>
+ </div>
+ <div id="treeDiv1"></div>
+
+ </div>
+ </form>
+ </div>
+
+ <div id="footerContainer">
+ <div id="footer">
+ <p> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+
+
+<script type="text/javascript">
+
+ var tree;
+ var nodes = new Array();
+ var nodeIndex;
+
+ function treeInit() {
+ buildRandomTextNodeTree();
+ }
+
+ function buildRandomTextNodeTree() {
+ tree = new YAHOO.widget.TreeView("treeDiv1");
+
+ for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
+ var tmpNode = new YAHOO.widget.TextNode("label-" + i,
tree.getRoot(), false);
+ buildRandomTextBranch(tmpNode);
+ }
+
+ tree.draw();
+ }
+
+ var callback = null;
+
+ function buildRandomTextBranch(node) {
+ if (node.depth < 6) {
+ YAHOO.log("buildRandomTextBranch: " + node.index);
+ for ( var i = 0; i < Math.floor(Math.random() * 4) ;
i++ ) {
+ var tmpNode = new
YAHOO.widget.TextNode(node.label + "-" + i, node, false);
+ buildRandomTextBranch(tmpNode);
+ }
+ }
+ }
+
+</script>
+
+ </body>
+</html>
+
Index: treeview/html.html
===================================================================
RCS file: treeview/html.html
diff -N treeview/html.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/html.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,214 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+
+<head>
+<title>Yahoo! UI Library - Tree Control</title>
+<link rel="stylesheet" type="text/css" href="css/screen.css">
+</head>
+
+<body>
+
+<link rel="stylesheet" type="text/css" href="css/local/tree.css">
+
+<div id="pageTitle">
+ <h3>Tree Control</h3>
+</div>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+
+<!-- The following are required for the logger -->
+<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>
+<!-- End logger reqs -->
+
+<script type="text/javascript" src="../../build/treeview/treeview-debug.js"
></script>
+
+<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>
+
+
+<div id="container">
+<img class="ylogo" src="img/logo.gif" alt="" />
+ <div id="containerTop">
+ <div id="header">
+ <h1>
+
+ </h1>
+ <h4> </h4>
+ </div>
+ <div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="default.html?mode=dist">Default tree widget</a></li>
+<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
+
+
+<li><a href="folders.html?mode=dist">Folder view</a></li>
+<li><a href="menu.html?mode=dist">Menu</a></li>
+<li><a href="html.html?mode=dist">HTML node</a></li>
+<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
+<li><a href="check.html?mode=dist">Task list</a></li>
+<li><a href="anim.html?mode=dist">Fade animation</a></li>
+</ul>
+
+</div>
+
+
+ <script type="text/javascript">
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ var divId;
+ return {
+ init: function(p_divId, p_toggleElId, p_clearElId) {
+ divId = p_divId
+ },
+
+ onload: function() {
+ if (YAHOO.widget.Logger) {
+ new YAHOO.widget.LogReader( "logDiv", { height: "400px" }
);
+ }
+ }
+ };
+ } ();
+
+ YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
+
+ //]]>
+ </script>
+
+ <div id="logDiv"></div>
+
+
+</div>
+
+</div>
+
+
+ <div id="content">
+ <form name="mainForm" action="javscript:;">
+ <div class="newsItem">
+ <h3>HTML Node</h3>
+ <p>
+
+ </p>
+
+ <div id="expandcontractdiv">
+ <a href="javascript:tree.expandAll()">Expand all</a>
+ <a href="javascript:tree.collapseAll()">Collapse all</a>
+ </div>
+ <div id="treeDiv1"></div>
+
+ </div>
+ </form>
+ </div>
+
+ <div id="footerContainer">
+ <div id="footer">
+ <p> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+<script type="text/javascript">
+
+var tree;
+
+function treeInit() {
+ buildRandomTextNodeTree();
+}
+
+function buildRandomTextNodeTree() {
+ tree = new YAHOO.widget.TreeView("treeDiv1");
+
+ for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
+ var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(),
false);
+ buildRandomTextBranch(tmpNode);
+ // var tmpNode2 = new YAHOO.widget.HTMLNode("label-" + i,
tree.getRoot(), false, true);
+ buildRandomTextBranch(tmpNode);
+ // buildRandomTextBranch(tmpNode2);
+ }
+
+ tree.draw();
+}
+
+var callback = null;
+
+function buildRandomTextBranch(node) {
+ if (node.depth < 3) {
+ YAHOO.log("buildRandomTextBranch: " + node.index);
+ for ( var i = 0; i < Math.floor(Math.random() * 4) + 1 ; i++ ) {
+ tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node,
false);
+ // tmpNode2 = new YAHOO.widget.HTMLNode(node.html + "-" + i, node,
false, true);
+ // if (node.depth == 2) {
+ buildRandomHTMLBranch(tmpNode);
+ // buildRandomHTMLBranch(tmpNode2);
+ // } else {
+ // buildRandomTextBranch(tmpNode);
+ // }
+ }
+ }
+}
+
+var counter = 0;
+function buildRandomHTMLBranch(node) {
+ YAHOO.log("buildRandomHTMLBranch: " + node.index);
+
+ var id = "htmlnode_" + counter++;
+
+ var html = '<div id="' + id + '"' +
+ ' onmouseover="enableDragDrop(this, \'' + id + '\')"' +
+ ' style="border:1px solid #aaaaaa; ' +
+ ' position:relative; ' +
+ ' height:100px; width:200px; ' +
+ ' margin-bottom:10px; ' +
+ ' background-color: #c5dbfc">' +
+ 'Info ' + id + '</div>';
+
+ // new YAHOO.widget.HTMLNode(html, node, false, true);
+ new YAHOO.widget.HTMLNode(html, node, false, false);
+}
+
+function enableDragDrop(el, id) {
+ new YAHOO.util.DD(id);
+ el.onmouseover = null;
+}
+
+YAHOO.util.Event.addListener(window, "load", treeInit);
+
+</script>
+
+</body>
+</html>
+
Index: treeview/index.html
===================================================================
RCS file: treeview/index.html
diff -N treeview/index.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/index.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,44 @@
+
+
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+
+<head>
+<title>Yahoo! UI Library - Tree Control</title>
+<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
+</head>
+<body style="height:100%">
+<img src="img/logo.gif" style="position:absolute;top:5px;left:5px" />
+
+<div id="pageTitle">
+ <h3>Tree Control</h3>
+</div>
+<div id="content">
+ <form name="dragDropForm" action="javscript:;">
+ <div class="newsItem">
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p><a href="default.html?mode=dist">Default TreeView widget</a></p>
+ <p><a href="dynamic.html?mode=dist">Dynamic load</a></p>
+ <p><a href="folders.html?mode=dist">Folder style</a></p>
+ <p><a href="menu.html?mode=dist">Menu style</a></p>
+ <p><a href="html.html?mode=dist">HTML node</a></p>
+ <p><a href="multi.html?mode=dist">Mutiple trees, different
styles</a></p>
+ <p><a href="check.html?mode=dist">Task list</a></p>
+ <p><a href="anim.html?mode=dist">Fade animation</a></p>
+ </div>
+ </form>
+</div>
+ <div id="footerContainer">
+ <div id="footer">
+ <p> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+</body>
+</html>
Index: treeview/menu.html
===================================================================
RCS file: treeview/menu.html
diff -N treeview/menu.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/menu.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,246 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+<head>
+<title>Yahoo! UI Library - Tree Control</title>
+<link rel="stylesheet" type="text/css" href="css/screen.css">
+<style type="text/css">
+ .emLabel, .emLabel:link, .emLabel:visited, .emLabel:hover {
+ font-weight: bold;
+ }
+</style>
+</head>
+
+<body onload="treeInit()">
+
+<link rel="stylesheet" type="text/css" href="css/menu/tree.css">
+
+<div id="pageTitle">
+ <h3>Tree Control</h3>
+</div>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+
+<!-- The following are required for the logger -->
+<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>
+<!-- End logger reqs -->
+
+<script type="text/javascript" src="../../build/treeview/treeview-debug.js"
></script>
+
+<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>
+
+
+<div id="container">
+<img class="ylogo" src="img/logo.gif" alt="" />
+ <div id="containerTop">
+ <div id="header">
+ <h1>
+
+ </h1>
+ <h4> </h4>
+ </div>
+ <div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="default.html?mode=dist">Default tree widget</a></li>
+<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
+
+
+<li><a href="folders.html?mode=dist">Folder view</a></li>
+<li><a href="menu.html?mode=dist">Menu</a></li>
+<li><a href="html.html?mode=dist">HTML node</a></li>
+<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
+<li><a href="check.html?mode=dist">Task list</a></li>
+<li><a href="anim.html?mode=dist">Fade animation</a></li>
+</ul>
+
+</div>
+
+
+ <script type="text/javascript">
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ var divId;
+ return {
+ init: function(p_divId, p_toggleElId, p_clearElId) {
+ divId = p_divId
+ },
+
+ onload: function() {
+ if (YAHOO.widget.Logger) {
+ new YAHOO.widget.LogReader( "logDiv", { height: "400px" }
);
+ }
+ }
+ };
+ } ();
+
+ YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
+
+ //]]>
+ </script>
+
+ <div id="logDiv"></div>
+
+
+</div>
+
+</div>
+
+
+ <div id="content">
+ <form name="mainForm" action="javscript:;">
+ <div class="newsItem">
+ <h3>Menu TreeView Widget</h3>
+ <p>
+ The presentation differences between the default treeview
widget and this
+ one were accomplished by modifying the css styles in tree.css.
The
+ functionality is the same, except the menu does not allow
multiple siblings
+ to be expanded at one time (when you expand a node, all of its
expanded
+ siblings are collapsed.
+ </p>
+
+ <div id="expandcontractdiv">
+ <a href="javascript:tree.expandAll()">Expand all</a>
+ <a href="javascript:tree.collapseAll()">Collapse all</a>
+ </div>
+ <div id="treeDiv1"></div>
+
+ </div>
+ </form>
+ </div>
+
+ <div id="footerContainer">
+ <div id="footer">
+ <p> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+<script type="text/javascript">
+
+ var tree;
+ var nodes = new Array();
+ var nodeIndex = 0;
+
+ function treeInit() {
+ buildRandomTextNodeTree();
+ }
+
+ function buildRandomTextNodeTree() {
+ tree = new YAHOO.widget.TreeView("treeDiv1");
+ tree.onExpand = function(node) {
+ // alert(node.index + " was expanded");
+ }
+
+ tree.onCollapse = function(node) {
+ // alert(node.index + " was collapsed");
+ }
+
+ for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
+ var thisId = nodeIndex++;
+ var thisLabel = "menu" + i;
+ // nodes[thisId] = new YAHOO.widget.TextNode({ label:
thisLabel }, tree.getRoot(), false);
+ // nodes[thisId] = new
YAHOO.widget.MenuNode({label:thisLabel, href:"http://asdf"}, tree.getRoot(),
false);
+ nodes[thisId] = new YAHOO.widget.MenuNode(thisLabel,
tree.getRoot(), false);
+
+ var p1 = nodes[thisId];
+ var l1 = thisLabel;
+
+ for (var j = 0; j < Math.floor(Math.random()*6) + 1;
j++) {
+ thisId = nodeIndex++;
+ thisLabel = l1 + "-" + j;
+ // nodes[thisId] = new YAHOO.widget.TextNode({
label: thisLabel }, p1, true);
+ nodes[thisId] = new
YAHOO.widget.MenuNode(thisLabel, p1, false);
+
+ var p2 = nodes[thisId];
+ var l2 = thisLabel;
+
+ for (var k =0; k < Math.floor(Math.random()*6)
+ 1; k++) {
+ thisId = nodeIndex++;
+ thisLabel = l2 + "-" + k;
+
+ /*
+ var data = {
+ id: thisId,
+ label: thisLabel,
+ href:
"javascript:onLabelClick(" + thisId + ")"
+ }
+*/
+
+ var data = {
+ label: thisLabel,
+ href:
"javascript:void(window.open('http://www.yahoo.com'))"
+ }
+ nodes[thisId] = new
YAHOO.widget.TextNode(data, p2, false);
+ nodes[thisId].labelStyle = "emLabel";
+
+ // nodes[thisId] = new
YAHOO.widget.MenuNode(thisLabel, p2, false);
+ }
+
+ }
+
+ }
+
+ // nodes[0] = new YAHOO.widget.TextNode(tree.getRoot(), false,
"label-0");
+ tree.draw();
+ }
+
+ var selectedId = null;
+ function onLabelClick(id) {
+
+ var node = tree.getNodeByProperty("id", id);
+ // alert(node.label);
+
+ var el = node.getLabelEl()
+
+ YAHOO.log("pos: " + YAHOO.util.Dom.getXY(el));
+
+ el.style.backgroundColor = "#c5dbfc";
+
+
+ if (selectedId != null) {
+ node = tree.getNodeByProperty("id", selectedId);
+ node.getLabelEl().style.backgroundColor = "white";
+ }
+
+ selectedId = id;
+ }
+
+</script>
+
+ </body>
+</html>
+
Index: treeview/multi.html
===================================================================
RCS file: treeview/multi.html
diff -N treeview/multi.html
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/multi.html 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1,184 @@
+<!doctype html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
+<html>
+
+<head>
+<title>Yahoo! UI Library - Tree Control</title>
+<link rel="stylesheet" type="text/css" href="css/screen.css">
+</head>
+
+<body onload="treeInit()">
+
+<link rel="stylesheet" type="text/css" href="css/multi/tree.css">
+<style>
+#treecontaner {width: 550px;}
+#tree1 {width:120px;padding: 10px;float:left;}
+#tree2 {width:120px;padding: 10px;float:left;}
+#tree3 {width:120px;padding: 10px;float:left;}
+</style>
+
+<div id="pageTitle">
+ <h3>Tree Control</h3>
+</div>
+
+<script type="text/javascript" src="../../build/yahoo/yahoo.js" ></script>
+
+<!-- The following are required for the logger -->
+<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>
+<!-- End logger reqs -->
+
+<script type="text/javascript" src="../../build/treeview/treeview-debug.js"
></script>
+
+<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>
+
+
+<div id="container">
+<img class="ylogo" src="img/logo.gif" alt="" />
+ <div id="containerTop">
+ <div id="header">
+ <h1>
+
+ </h1>
+ <h4> </h4>
+ </div>
+ <div id="main">
+
+<div id="rightbar">
+
+<div id="rightBarPad">
+<h3>Examples</h3>
+
+<div id="linkage">
+<ul>
+<li><a href="default.html?mode=dist">Default tree widget</a></li>
+<li><a href="dynamic.html?mode=dist">Dynamic load</a></li>
+
+
+<li><a href="folders.html?mode=dist">Folder view</a></li>
+<li><a href="menu.html?mode=dist">Menu</a></li>
+<li><a href="html.html?mode=dist">HTML node</a></li>
+<li><a href="multi.html?mode=dist">Multiple trees, different styles</a></li>
+<li><a href="check.html?mode=dist">Task list</a></li>
+<li><a href="anim.html?mode=dist">Fade animation</a></li>
+</ul>
+
+</div>
+
+
+ <script type="text/javascript">
+ //<![CDATA[
+ YAHOO.example.logApp = function() {
+ var divId;
+ return {
+ init: function(p_divId, p_toggleElId, p_clearElId) {
+ divId = p_divId
+ },
+
+ onload: function() {
+ if (YAHOO.widget.Logger) {
+ new YAHOO.widget.LogReader( "logDiv", { height: "400px" }
);
+ }
+ }
+ };
+ } ();
+
+ YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
+
+ //]]>
+ </script>
+
+ <div id="logDiv"></div>
+
+
+</div>
+
+</div>
+
+
+ <div id="content">
+ <form name="mainForm" action="javscript:;">
+ <div class="newsItem">
+ <h3>Multiple trees with different styles</h3>
+ <p>
+
+ </p>
+
+ <div id="treecontainer">
+ <div id="tree1"></div>
+ <div id="tree2"></div>
+ <div id="tree3" class="treemenu"></div>
+ </div>
+
+ </div>
+ </form>
+ </div>
+
+ <div id="footerContainer">
+ <div id="footer">
+ <p> </p>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+
+
+<script type="text/javascript">
+
+ function treeInit() {
+ buildRandomTextNodeTree(new YAHOO.widget.TreeView("tree1"));
+ buildRandomTextNodeTree(new YAHOO.widget.TreeView("tree2"));
+ buildRandomTextNodeTree(new YAHOO.widget.TreeView("tree3"));
+ }
+
+ function buildRandomTextNodeTree(tree) {
+
+ for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
+ var tmpNode = new YAHOO.widget.TextNode("label-" + i,
tree.getRoot(), false);
+ buildRandomTextBranch(tmpNode);
+ }
+
+ tree.draw();
+ }
+
+ var callback = null;
+
+ function buildRandomTextBranch(node) {
+ if (node.depth < 1) {
+ YAHOO.log("buildRandomTextBranch: " + node.index);
+ for ( var i = 0; i < Math.floor(Math.random() * 4 + 2)
; i++ ) {
+ var tmpNode = new
YAHOO.widget.TextNode(node.label + "-" + i, node, false);
+ buildRandomTextBranch(tmpNode);
+ }
+ }
+ }
+
+</script>
+
+ </body>
+</html>
+
Index: treeview/css/code.css
===================================================================
RCS file: treeview/css/code.css
diff -N treeview/css/code.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/css/code.css 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1 @@
+
/************* 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; }
\ No newline at end of file
Index: treeview/css/screen.css
===================================================================
RCS file: treeview/css/screen.css
diff -N treeview/css/screen.css
--- /dev/null 1 Jan 1970 00:00:00 -0000
+++ treeview/css/screen.css 25 Sep 2006 10:27:18 -0000 1.1
@@ -0,0 +1 @@
+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 }
\ No newline at end of file
Index: treeview/img/bullet.gif
===================================================================
RCS file: treeview/img/bullet.gif
diff -N treeview/img/bullet.gif
Binary files /dev/null and /tmp/cvszt1bEf differ
Index: treeview/img/greybg.png
===================================================================
RCS file: treeview/img/greybg.png
diff -N treeview/img/greybg.png
Binary files /dev/null and /tmp/cvsIRs7Pd differ
Index: treeview/img/header.gif
===================================================================
RCS file: treeview/img/header.gif
diff -N treeview/img/header.gif
Binary files /dev/null and /tmp/cvsnqInye differ
Index: treeview/img/logo.gif
===================================================================
RCS file: treeview/img/logo.gif
diff -N treeview/img/logo.gif
Binary files /dev/null and /tmp/cvsi5ivgg differ
Index: treeview/img/navHover2.png
===================================================================
RCS file: treeview/img/navHover2.png
diff -N treeview/img/navHover2.png
Binary files /dev/null and /tmp/cvsTnBCLg differ
Index: treeview/img/qbottom.png
===================================================================
RCS file: treeview/img/qbottom.png
diff -N treeview/img/qbottom.png
Binary files /dev/null and /tmp/cvs0wUdeh differ
Index: treeview/img/qmiddle.png
===================================================================
RCS file: treeview/img/qmiddle.png
diff -N treeview/img/qmiddle.png
Binary files /dev/null and /tmp/cvsvahQ1j differ
Index: treeview/img/qtop.png
===================================================================
RCS file: treeview/img/qtop.png
diff -N treeview/img/qtop.png
Binary files /dev/null and /tmp/cvsAYYZtk differ
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [Phpgroupware-cvs] phpgwapi/js/yahoo/yui/examples animation/anim_b...,
Dave Hall <=