diff options
Diffstat (limited to 'includes/js/dojox/widget/tests')
30 files changed, 1801 insertions, 0 deletions
diff --git a/includes/js/dojox/widget/tests/_tags.json b/includes/js/dojox/widget/tests/_tags.json new file mode 100644 index 0000000..421031a --- /dev/null +++ b/includes/js/dojox/widget/tests/_tags.json @@ -0,0 +1,100 @@ +{identifier:"tag", +items: [ + {tag: "accounting"}, + {tag: "attorney"}, + {tag: "atv"}, + {tag: "backcountry"}, + {tag: "bakery"}, + {tag: "bandb"}, + {tag: "bank"}, + {tag: "bar"}, + {tag: "bicycle"}, + {tag: "cabin"}, + {tag: "cabinoutside"}, + {tag: "camp"}, + {tag: "campoutside"}, + {tag: "catering"}, + {tag: "chamber"}, + {tag: "church"}, + {tag: "city"}, + {tag: "classes"}, + {tag: "coffeehouse"}, + {tag: "condo"}, + {tag: "condooutside"}, + {tag: "conference"}, + {tag: "county"}, + {tag: "crosscountryski"}, + {tag: "dentist"}, + {tag: "dining"}, + {tag: "fishing"}, + {tag: "gallery"}, + {tag: "general"}, + {tag: "golf"}, + {tag: "graphicart"}, + {tag: "grocery"}, + {tag: "guideservice"}, + {tag: "hair"}, + {tag: "health"}, + {tag: "home"}, + {tag: "homeoutside"}, + {tag: "horse"}, + {tag: "hotel"}, + {tag: "hoteloutside"}, + {tag: "hotsprings"}, + {tag: "hotspringspool"}, + {tag: "hunting"}, + {tag: "iceclimbing"}, + {tag: "iceskating"}, + {tag: "inspection"}, + {tag: "insurance"}, + {tag: "internet"}, + {tag: "jeeping"}, + {tag: "jewelry"}, + {tag: "live"}, + {tag: "liveentertainment"}, + {tag: "lodging"}, + {tag: "manicure"}, + {tag: "manufacturing"}, + {tag: "maps"}, + {tag: "massage"}, + {tag: "menu:aboutouray"}, + {tag: "menu:recreation"}, + {tag: "minetour"}, + {tag: "mining"}, + {tag: "mountaineering"}, + {tag: "museum"}, + {tag: "nonprofit"}, + {tag: "offroad"}, + {tag: "online"}, + {tag: "ouraymuseum"}, + {tag: "park"}, + {tag: "performingarts"}, + {tag: "pet"}, + {tag: "pharmacy"}, + {tag: "photographer"}, + {tag: "photography"}, + {tag: "printing"}, + {tag: "publishing"}, + {tag: "rafting"}, + {tag: "railroad"}, + {tag: "realestate"}, + {tag: "recreation"}, + {tag: "rentals"}, + {tag: "retail"}, + {tag: "rockclimbing"}, + {tag: "rv"}, + {tag: "rvoutside"}, + {tag: "school"}, + {tag: "shop"}, + {tag: "skirentals"}, + {tag: "snowmobiling"}, + {tag: "spa"}, + {tag: "summer"}, + {tag: "tours"}, + {tag: "trails"}, + {tag: "utility"}, + {tag: "waterfall"}, + {tag: "wedding"}, + {tag: "weddingplanner"}, + {tag: "winter"} +]} diff --git a/includes/js/dojox/widget/tests/demo_FisheyeList-orig.html b/includes/js/dojox/widget/tests/demo_FisheyeList-orig.html new file mode 100644 index 0000000..a36d32c --- /dev/null +++ b/includes/js/dojox/widget/tests/demo_FisheyeList-orig.html @@ -0,0 +1,111 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>FisheyeList Widget Demonstration</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../FisheyeList/FisheyeList.css"; + + .dojoxFisheyeListBar { + margin: 0 auto; + text-align: center; + } + + .outerbar { + background-color: #666; + text-align: center; + position: absolute; + left: 0px; + top: 0px; + width: 100%; + border-bottom:2px solid #333; + } + + body { + font-family: Arial, Helvetica, sans-serif; + padding: 0; + margin: 0; + background-color:#fff; + background-image:none; + } + + .page { + padding: 50px 20px 20px 20px; + } + + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.widget.FisheyeList"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function load_app(id){ + alert('icon '+id+' was clicked'); + } + + </script> +</head> +<body class="tundra"><div class="outerbar"> + <div dojoType="dojox.widget.FisheyeList" + itemWidth="50" itemHeight="50" + itemMaxWidth="200" itemMaxHeight="200" + orientation="horizontal" + effectUnits="2" + itemPadding="10" + attachEdge="top" + labelEdge="bottom" + id="fisheye1" + > + <div dojoType="dojox.widget.FisheyeListItem" + id="item1" + onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');" + label="Item 1" + iconSrc="images/icon_browser.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 2" + iconSrc="images/icon_calendar.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 3" + onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');" + iconSrc="images/icon_email.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/icon_texteditor.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Really Long Item Label" + iconSrc="images/icon_update.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/icon_users.png"> + </div> +</div></div> + +<div class="page"> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In erat. Suspendisse potenti. Fusce faucibus nibh sed nisi. Phasellus faucibus, dui a cursus dapibus, mauris nulla euismod velit, a lobortis turpis arcu vel dui. Pellentesque fermentum ultrices pede. Donec auctor lectus eu arcu. Curabitur non orci eget est porta gravida. Aliquam pretium orci id nisi. Duis faucibus, mi non adipiscing venenatis, erat urna aliquet elit, eu fringilla lacus tellus quis erat. Nam tempus ornare lorem. Nullam feugiat.</p> + + <p>Sed congue. Aenean blandit sollicitudin mi. Maecenas pellentesque. Vivamus ac urna. Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia ac, vehicula laoreet, elit. Sed interdum augue sit amet quam dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec quam.</p> + + <p>Sed arcu magna, molestie at, fringilla in, sodales eu, elit. Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus ut elit convallis eleifend. Fusce tincidunt, justo quis tempus euismod, magna nulla viverra libero, sit amet lacinia odio diam id risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, consequat quis, varius interdum, nulla. Donec neque tortor, sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean ut eros sit amet ante pharetra interdum.</p> + + <p>Fusce rutrum pede eget quam. Praesent purus. Aenean at elit in sem volutpat facilisis. Nunc est augue, commodo at, pretium a, fermentum at, quam. Nam sit amet enim. Suspendisse potenti. Cras hendrerit rhoncus justo. Integer libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Sed adipiscing mi vel ipsum.</p> + + <p>Sed aliquam, quam consectetuer condimentum bibendum, neque libero commodo metus, non consectetuer magna risus vitae eros. Pellentesque mollis augue id libero. Morbi nonummy hendrerit dui. Morbi nisi felis, fringilla ac, euismod vitae, dictum mollis, pede. Integer suscipit, est sed posuere ullamcorper, ipsum lectus interdum nunc, quis blandit erat eros hendrerit pede. Vestibulum varius, elit id mattis mattis, nulla est feugiat ante, eget vestibulum augue eros ut odio. Maecenas euismod purus quis felis. Ut hendrerit tincidunt est. Fusce euismod, nunc eu tempus tempor, purus ligula volutpat tellus, nec lacinia sapien enim id risus. Aliquam orci turpis, condimentum sed, sollicitudin vel, placerat in, purus. Proin tortor nisl, blandit quis, imperdiet quis, scelerisque at, nisl. Maecenas suscipit fringilla erat. Curabitur consequat, dui blandit suscipit dictum, felis lectus imperdiet tellus, sit amet ornare risus mauris non ipsum. Fusce a purus. Vestibulum sodales. Sed porta ultrices nibh. Vestibulum metus.</p> + + +</div> + + + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/demo_FisheyeList.html b/includes/js/dojox/widget/tests/demo_FisheyeList.html new file mode 100644 index 0000000..703fc55 --- /dev/null +++ b/includes/js/dojox/widget/tests/demo_FisheyeList.html @@ -0,0 +1,117 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>FisheyeList Widget Demonstration</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + + .fisheyebar { + width:550px; + margin: 0 auto; + text-align: center; + } + + .outerbar { + background-color: #666; + text-align: center; + position: absolute; + left: 0px; + top: 0px; + width: 100%; + height:85px; + border-bottom:2px solid #333; + } + + body { + font-family: Arial, Helvetica, sans-serif; + padding: 0; + margin: 0; + background-color:#fff; + background-image:none; + } + + .page { + padding: 85px 20px 20px 20px; + } + .outerbar img { + top:0; + position:relative; + vertical-align:super; + float:left; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.widget.FisheyeLite"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function load_app(id){ + alert('icon '+id+' was clicked'); + } + + </script> +</head> +<body class="tundra"><div class="outerbar"> + <div class="fisheyebar"> + <img dojoType="dojox.widget.FisheyeLite" + style="width:75px; height:75px" + properties="{ width:1.65, height:1.65 }" + onClick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');" + src="images/icon_browser.png" + /> + + <img dojoType="dojox.widget.FisheyeLite" + label="Item 2" + src="images/icon_calendar.png" + style="width:75px; height:75px" + properties="{ width:1.65, height:1.65 }" + /> + + <img dojoType="dojox.widget.FisheyeLite" + label="Item 3" + style="width:75px; height:75px" + properties="{ width:1.55, height:1.65 }" + onClick="alert('click on ' + this.label + '(from widget id ' + this.widgetid + ')!');" + src="images/icon_email.png" + /> + + <img dojoType="dojox.widget.FisheyeLite" + src="images/icon_texteditor.png" style="width:75px; height:75px" + properties="{ width:1.65, height:1.65 }" + /> + + <img dojoType="dojox.widget.FisheyeLite" + label="Really Long Item Label" + src="images/icon_update.png" + style="width:75px; height:75px" + properties="{ width:1.65, height:1.65 }" + /> + + <img dojoType="dojox.widget.FisheyeLite" + src="images/icon_users.png" + style="width:75px; height:75px" + properties="{ width:1.75, height:1.75 }" + /> +</div></div> + +<div class="page"> + <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In erat. Suspendisse potenti. Fusce faucibus nibh sed nisi. Phasellus faucibus, dui a cursus dapibus, mauris nulla euismod velit, a lobortis turpis arcu vel dui. Pellentesque fermentum ultrices pede. Donec auctor lectus eu arcu. Curabitur non orci eget est porta gravida. Aliquam pretium orci id nisi. Duis faucibus, mi non adipiscing venenatis, erat urna aliquet elit, eu fringilla lacus tellus quis erat. Nam tempus ornare lorem. Nullam feugiat.</p> + + <p>Sed congue. Aenean blandit sollicitudin mi. Maecenas pellentesque. Vivamus ac urna. Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh. Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris, bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia ac, vehicula laoreet, elit. Sed interdum augue sit amet quam dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec quam.</p> + + <p>Sed arcu magna, molestie at, fringilla in, sodales eu, elit. Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus ut elit convallis eleifend. Fusce tincidunt, justo quis tempus euismod, magna nulla viverra libero, sit amet lacinia odio diam id risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu, porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac, faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu, consequat quis, varius interdum, nulla. Donec neque tortor, sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean ut eros sit amet ante pharetra interdum.</p> + + <p>Fusce rutrum pede eget quam. Praesent purus. Aenean at elit in sem volutpat facilisis. Nunc est augue, commodo at, pretium a, fermentum at, quam. Nam sit amet enim. Suspendisse potenti. Cras hendrerit rhoncus justo. Integer libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Sed adipiscing mi vel ipsum.</p> + + <p>Sed aliquam, quam consectetuer condimentum bibendum, neque libero commodo metus, non consectetuer magna risus vitae eros. Pellentesque mollis augue id libero. Morbi nonummy hendrerit dui. Morbi nisi felis, fringilla ac, euismod vitae, dictum mollis, pede. Integer suscipit, est sed posuere ullamcorper, ipsum lectus interdum nunc, quis blandit erat eros hendrerit pede. Vestibulum varius, elit id mattis mattis, nulla est feugiat ante, eget vestibulum augue eros ut odio. Maecenas euismod purus quis felis. Ut hendrerit tincidunt est. Fusce euismod, nunc eu tempus tempor, purus ligula volutpat tellus, nec lacinia sapien enim id risus. Aliquam orci turpis, condimentum sed, sollicitudin vel, placerat in, purus. Proin tortor nisl, blandit quis, imperdiet quis, scelerisque at, nisl. Maecenas suscipit fringilla erat. Curabitur consequat, dui blandit suscipit dictum, felis lectus imperdiet tellus, sit amet ornare risus mauris non ipsum. Fusce a purus. Vestibulum sodales. Sed porta ultrices nibh. Vestibulum metus.</p> + + +</div> + + + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/demo_FisheyeLite.html b/includes/js/dojox/widget/tests/demo_FisheyeLite.html new file mode 100644 index 0000000..e937698 --- /dev/null +++ b/includes/js/dojox/widget/tests/demo_FisheyeLite.html @@ -0,0 +1,175 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title> + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dojox/layout/resources/RadioGroup.css"; + body, html { margin:0; padding:0; width:100%; + font-family:Arial,sans-serif; + } + + #content { + height:300px; + border-left:1px solid #333; + border-right:1px solid #333; + } + + #container { + top:150px; + width:720px; + margin:0 auto; + } + #header { + position:relative; + height:90px; + border-bottom:1px solid #dedede; + } + #dojoLink, #dijitLink, #dojoxLink { + background:#dedede; + position:absolute; + bottom:0; + width:200px; + padding:0; + cursor:pointer; + } + #dojoLink { + left:20px; + } + #dojoxLink { + left:460px; + } + #dijitLink { + left:240px; + } + .fisheyeTarget { + position:relative; + bottom:0; + left:0; + height:1px; + width:1px; + cursor:pointer; + } + .inner { + cursor:pointer; + position:absolute; + bottom:5px; + margin-left:10px; + } + .subtext { + visibility:hidden; + position:absolute; + bottom:27px; + left:10px; + font:8pt Arial,sans-serif; + color:#666; + } + .cpContent { + padding:15px; + } + .cp { + background:#bebebe; + color:#666; + } + </style> + <script type="text/javascript"> + var djConfig = { isDebug:true, parseOnLoad:true }; + </script> + <script type="text/javascript" src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../FisheyeLite.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dijit.layout.ContentPane"); + dojo.require("dojox.layout.RadioGroup"); + dojo.require("dojox.widget.FisheyeLite"); + dojo.require("dojox.fx.easing"); + dojo.addOnLoad(function(){ + dojo.query(".headLink").forEach(function(n){ + + var linkto = dojo.attr(n,"id") + "Pane"; + + var widget = new dojox.widget.FisheyeLite({ + properties: { + height:45 + }, + easeOut:dojox.fx.easing.bounceOut, + durationOut:700 + },n); + + var myTarget = dojo.query(".subtext",n)[0]; + if(myTarget){ + + dojo.style(myTarget,{ opacity:"0", visibility:"visible" }); + + var _anim = null; + dojo.connect(widget,"show",function(e){ + _anim && _anim.status && _anim.stop(); + _anim = dojo.fadeIn({ node: myTarget, duration:250 }); + _anim.play(); + }); + dojo.connect(widget,"hide",function(e){ + _anim && _anim.status && _anim.stop(); + _anim = dojo.fadeOut({ node: myTarget, duration:250 }); + _anim.play(); + }); + } + + dojo.connect(n,"onclick",function(e){ + dijit.byId("content").selectChild(dijit.byId(linkto)); + }); + + }); + + dojo.query(".cp").instantiate(dijit.layout.ContentPane); + dojo.query("#content").forEach(function(n){ + new dojox.layout.RadioGroupSlide({ + hasButtons:false + },n).startup(); + }); + }); + </script> + </head> + <body class="tundra"> + + <div id="container"> + <div> + <h2>The Dojo Toolkit:</h2> + </div> + <div id="header"> + <div class="headLink" id="dojoLink"> + <div class="fisheyeTarget"></div> + <div class="inner">Dojo Base</div> + <span class="subtext">the JavaScript Toolkit</span> + </div> + <div class="headLink" id="dijitLink"> + <div class="fisheyeTarget"></div> + <div class="inner">Dijit</div> + <span class="subtext">Themeable, extensible widget system</span> + </div> + <div class="headLink" id="dojoxLink"> + <div class="fisheyeTarget"></div> + <div class="inner">DojoX</div> + <span class="subtext">Extensions, experiments, and extras</span> + </div> + </div> + <div id="content"> + <div class="cp" id="dojoLinkPane"> + <div class="cpContent"> + Dojo Pane + </div> + </div> + <div class="cp" id="dijitLinkPane"> + <div class="cpContent"> + Dijit Pane + </div> + </div> + <div class="cp" id="dojoxLinkPane"> + <div class="cpContent"> + DojoX Pane + </div> + </div> + </div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/includes/js/dojox/widget/tests/images/fisheye_1.png b/includes/js/dojox/widget/tests/images/fisheye_1.png Binary files differnew file mode 100644 index 0000000..7499dcc --- /dev/null +++ b/includes/js/dojox/widget/tests/images/fisheye_1.png diff --git a/includes/js/dojox/widget/tests/images/fisheye_2.png b/includes/js/dojox/widget/tests/images/fisheye_2.png Binary files differnew file mode 100644 index 0000000..2db041b --- /dev/null +++ b/includes/js/dojox/widget/tests/images/fisheye_2.png diff --git a/includes/js/dojox/widget/tests/images/fisheye_3.png b/includes/js/dojox/widget/tests/images/fisheye_3.png Binary files differnew file mode 100644 index 0000000..5d9cc09 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/fisheye_3.png diff --git a/includes/js/dojox/widget/tests/images/fisheye_4.png b/includes/js/dojox/widget/tests/images/fisheye_4.png Binary files differnew file mode 100644 index 0000000..4e74550 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/fisheye_4.png diff --git a/includes/js/dojox/widget/tests/images/icon_browser.png b/includes/js/dojox/widget/tests/images/icon_browser.png Binary files differnew file mode 100644 index 0000000..72fae26 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_browser.png diff --git a/includes/js/dojox/widget/tests/images/icon_calendar.png b/includes/js/dojox/widget/tests/images/icon_calendar.png Binary files differnew file mode 100644 index 0000000..d9e9a22 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_calendar.png diff --git a/includes/js/dojox/widget/tests/images/icon_email.png b/includes/js/dojox/widget/tests/images/icon_email.png Binary files differnew file mode 100644 index 0000000..899dfa5 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_email.png diff --git a/includes/js/dojox/widget/tests/images/icon_texteditor.png b/includes/js/dojox/widget/tests/images/icon_texteditor.png Binary files differnew file mode 100644 index 0000000..ced8c14 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_texteditor.png diff --git a/includes/js/dojox/widget/tests/images/icon_update.png b/includes/js/dojox/widget/tests/images/icon_update.png Binary files differnew file mode 100644 index 0000000..b741cd0 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_update.png diff --git a/includes/js/dojox/widget/tests/images/icon_users.png b/includes/js/dojox/widget/tests/images/icon_users.png Binary files differnew file mode 100644 index 0000000..569e712 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/icon_users.png diff --git a/includes/js/dojox/widget/tests/images/rating_empty.gif b/includes/js/dojox/widget/tests/images/rating_empty.gif Binary files differnew file mode 100644 index 0000000..dc6ecd8 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/rating_empty.gif diff --git a/includes/js/dojox/widget/tests/images/rating_empty.png b/includes/js/dojox/widget/tests/images/rating_empty.png Binary files differnew file mode 100644 index 0000000..3515d1a --- /dev/null +++ b/includes/js/dojox/widget/tests/images/rating_empty.png diff --git a/includes/js/dojox/widget/tests/images/rating_full.gif b/includes/js/dojox/widget/tests/images/rating_full.gif Binary files differnew file mode 100644 index 0000000..2e816a8 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/rating_full.gif diff --git a/includes/js/dojox/widget/tests/images/rating_full.png b/includes/js/dojox/widget/tests/images/rating_full.png Binary files differnew file mode 100644 index 0000000..86fb2e0 --- /dev/null +++ b/includes/js/dojox/widget/tests/images/rating_full.png diff --git a/includes/js/dojox/widget/tests/test_ColorPicker.html b/includes/js/dojox/widget/tests/test_ColorPicker.html new file mode 100644 index 0000000..87d173e --- /dev/null +++ b/includes/js/dojox/widget/tests/test_ColorPicker.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox ColorPicker Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../ColorPicker/ColorPicker.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../ColorPicker.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.widget.ColorPicker"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">Dojox ColorPicker test</h1> + + <h3>defaults:</h3> + <div id="picker" dojoType="dojox.widget.ColorPicker" + onChange="console.log('new val:',this.value)" + ></div> + + <h3>no animation, no hsv, no rgb, no webSafe info:</h3> + <div id="pickerToo" dojoType="dojox.widget.ColorPicker" + animatePoint="false" + showHsv="false" + showRgb="false" + webSafe="false" + onChange="console.log('new val:',this.value)" + ></div> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_FileInput.html b/includes/js/dojox/widget/tests/test_FileInput.html new file mode 100644 index 0000000..caccd0f --- /dev/null +++ b/includes/js/dojox/widget/tests/test_FileInput.html @@ -0,0 +1,115 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.widget.FileInput | The Dojo Toolkit</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../FileInput/FileInput.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../FileInput.js"></script> + <script type="text/javascript" src="../FileInputAuto.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.widget.FileInput"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var sampleCallback = function(data,ioArgs,widgetRef){ + // this function is fired for every programatic FileUploadAuto + // when the upload is complete. It uses dojo.io.iframe, which + // expects the results to come wrapped in TEXTAREA tags. + // this is IMPORTANT. to utilize FileUploadAuto (or Blind) + // you have to pass your respose data in a TEXTAREA tag. + // in our sample file (if you have php5 installed and have + // file uploads enabled) it _should_ return some text in the + // form of valid JSON data, like: + // { status: "success", details: { size: "1024" } } + // you can do whatever. + // + // the ioArgs is the standard ioArgs ref found in all dojo.xhr* methods. + // + // widget is a reference to the calling widget. you can manipulate the widget + // from within this callback function + if(data){ + if(data.status && data.status == "success"){ + widgetRef.overlay.innerHTML = "success!"; + }else{ + widgetRef.overlay.innerHTML = "error? "; + console.log('error',data,ioArgs); + } + }else{ + // debug assist + console.log('ugh?',arguments); + } + } + + var i = 0; + function addNewUpload(){ + var node = document.createElement('input'); + dojo.byId('dynamic').appendChild(node); + var widget = new dojox.widget.FileInputAuto({ + id: "dynamic"+(++i), + url: "../FileInput/ReceiveFile.php", + //url:"http://archive.dojotoolkit.org/nightly/checkout/dojox/widget/FileInput/ReceiveFile.php", + name: "dynamic"+i, + onComplete: sampleCallback + },node); + widget.startup(); + } + + </script> +</head> +<body> + + <h1 class="testTitle">dojox FileInput widget:</h1> + <p>This is a prototype of a dojo input type="file" with a FormWidget mixin, to be styled to match tundra and soria themes</p> + <p>The API is up for discussion, nor is it known to drop into forms and "just work" yet</p> + <p>FileInputAuto API is up for discussion, as well, though by use of the url="" attrib, you can basically + do all your file-processing server side, and just use the filename sent that remains in the form input</p> + <p>There are two parts. dojo.require("dojox.widget.FileInput") for just the base class, or dojo.require("dojox.widget.FileInputAuto"); + to provide the Auto Uploading widget (on blur), and the Blind Auto Upload widget.</p> + <p>Both themes are defined in the FileInput.css file, as well as basic styling needed to run</p> + + <h3>A standard file input:</h3> + <input type="file" id="normal" name="inputFile" /> + + <h3>The default dojox.widget.FileInput:</h3> + <p> + <input dojoType="dojox.widget.FileInput" id="default" name="inputFile" /> + </p> + + <h3>default dojox.widget.FileInput, tundra:</h3> + <p class="tundra"> + <input dojoType="dojox.widget.FileInput" id="default2" name="inputFile" /> + </p> + + <h3>dojox.widget.FileInputAuto, soria theme:</h3> + <p class="soria"> + <input dojoType="dojox.widget.FileInputAuto" id="defaultAuto" name="inputFileAuto" url="../FileInput/ReceiveFile.php" /> + </p> + + <h3>another one, tundra theme (with callback)</h3> + <p class="tundra"> + <input dojoType="dojox.widget.FileInputAuto" id="defaultAuto2" name="inputFileAuto2" url="../FileInput/ReceiveFile.php" onComplete="sampleCallback"/> + </p> + + <h3>a blind auto upload widget, tundra:</h3> + <p class="tundra"> + <input dojoType="dojox.widget.FileInputBlind" id="blind1" name="blind1" url="../FileInput/ReceiveFile.php" /> + </p> + + <h3>dojox.widget.FileInputBlind - soria</h3> + <p class="soria"> + <input dojoType="dojox.widget.FileInputBlind" id="blind2" name="blind2" url="../FileInput/ReceiveFile.php" /> + </p> + + <h3>dynamic, tundra, dojox.widget.FileInputAuto:</h3> + <button onclick="addNewUpload()">add new file upload</button> + <br><br> + <div id="dynamic" class="tundra"></div> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_FisheyeList.html b/includes/js/dojox/widget/tests/test_FisheyeList.html new file mode 100644 index 0000000..348ea13 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_FisheyeList.html @@ -0,0 +1,144 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>FisheyeList Widget Dojo Tests</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../FisheyeList/FisheyeList.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../FisheyeList.js"></script> + <script type="text/javascript"> + //dojo.require("dojox.widget.FisheyeList"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + dojo.addOnLoad(function(){ + fish1 = dijit.byId("fisheye1"); + fish2 = dijit.byId("fisheye2"); + }); + var counter = 1; + function addToFirstList(){ + var item = new dojox.widget.FisheyeListItem(); + item.label = "Dynamically Added "+counter; + item.iconSrc = "images/fisheye_"+counter+".png" + item.postCreate(); + counter++; + if(counter>4){counter=1;} + fish1.addChild(item); + fish1.startup(); + item.startup(); + } + </script> +</head> +<body class="tundra"> + <h1>dojox.widget.FisheyeList test</h1> +<p>HTML before</p> +<button onclick="addToFirstList();">Add a new item to the first list</button> +<p>HTML before</p> +<p>HTML before</p> +<p>Liberal trigger: move the mouse anywhere near the menu and it will start to expand:</p> +<div dojoType="dojox.widget.FisheyeList" + itemWidth="40" itemHeight="40" + itemMaxWidth="150" itemMaxHeight="150" + orientation="horizontal" + effectUnits="2" + itemPadding="10" + attachEdge="center" + labelEdge="bottom" + id="fisheye1" +> + + <div dojoType="dojox.widget.FisheyeListItem" + id="item1" + onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetId + ')!');" + label="Item 1" + iconSrc="images/fisheye_1.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 2" + iconSrc="images/fisheye_2.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 3" + iconSrc="images/fisheye_3.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_4.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Really Long Item Label" + iconSrc="images/fisheye_3.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_2.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_1.png"> + </div> +</div> + +<p>HTML after</p> +<p>HTML after</p> +<p>HTML after</p> +<p>This one has strict triggering, so you actually have to mouse over the menu to make it start moving:</p> +<div dojoType="dojox.widget.FisheyeList" + itemWidth="40" itemHeight="40" + itemMaxWidth="150" itemMaxHeight="150" + orientation="horizontal" + effectUnits="2" + itemPadding="10" + attachEdge="center" + labelEdge="bottom" + conservativeTrigger="true" + id="fisheye2" +> + + <div dojoType="dojox.widget.FisheyeListItem" + id="item1b" + onclick="alert('click on ' + this.label + '(from widget id ' + this.widgetId + ')!');" + label="Item 1" + iconSrc="images/fisheye_1.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 2" + iconSrc="images/fisheye_2.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Item 3" + iconSrc="images/fisheye_3.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_4.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + label="Really Long Item Label" + iconSrc="images/fisheye_3.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_2.png"> + </div> + + <div dojoType="dojox.widget.FisheyeListItem" + iconSrc="images/fisheye_1.png"> + </div> +</div> + + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_FisheyeLite.html b/includes/js/dojox/widget/tests/test_FisheyeLite.html new file mode 100644 index 0000000..0935d10 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_FisheyeLite.html @@ -0,0 +1,257 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>A responsive Fisheye-like FisheyeLite widget | The Dojo Toolkit</title> + <style type="text/css"> + + body, html { margin:0; padding:0; width:100%; + font-family:Arial,sans-serif; + } + a { letter-spacing:0.1em; } + #list { + position:absolute; left:0px; cursor:pointer; + } + #container { margin:0 auto; width:400px; } + #list ul { + width:175px; + list-style-type:none; + } + .fisheyeTarget { + font-weight:bold; + font-size:19px; + } + #container li { + text-align:right; + padding-bottom:12px; + } + .ilk { + border-top:1px solid #999; + color:#666; + font:14px Arial,sans-serif; + } + #inlineList li { + margin-top:20px; + margin-bottom:20px; + padding:20px; + border:2px solid #ededed; + display:inline; + background:#fff; + } + + #lineHeightTest { + text-align:center; + position:relative; + overflow:visible; + } + span.line { + margin:10px; + padding:3px; + line-height:22px; + font:10px Arial,sans-serif; + display:block; + } + .imgBounce { + padding:0; + width:35px; height:35px; + vertical-align:middle; + position:relative; + top:0; + } + </style> + <script type="text/javascript"> + var djConfig = { isDebug:true, parseOnLoad:true }; + </script> + <script type="text/javascript" src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../FisheyeLite.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojox.widget.FisheyeLite"); + dojo.addOnLoad(function(){ + + // turn li's in this page into fisheye items, presumtiously: + dojo.query("li.bounce").forEach(function(n){ + new dojox.widget.FisheyeLite({ },n); + }); + + dojo.query("span.line").forEach(function(n){ + // make a widget from each of the lines in the lineHeightTest + new dojox.widget.FisheyeLite({ + properties: { + fontSize:1.75 + }, + easeOut: dojox.fx.easing.backInOut, + durationOut: 500 + },n); + }).connect("onclick",function(e){ + // you can still access the onclick of the real node + alert(e.target.innerHTML); + }); + + dojo.query("a").forEach(function(n){ + // all the anchorhs get a little letter spacing love + new dojox.widget.FisheyeLite({ + properties:{ + fontSize:1.15, + letterSpacing:2.85 + } + },n); + // stop anchors from doing _anything_ + }).connect("onclick",dojo,"stopEvent"); + + dojo.query(".imgBounce").forEach(function(n){ + // all the images need a width and a height (well, not need, + // but to scale you do) + new dojox.widget.FisheyeLite({ + properties: { + height:1.75, + width:1.75 + } + },n); + }); + + // + var vv = 0; + var r = dijit.registry.byClass("dojox.widget.FisheyeLite")._hash; + for(var l in r){ + vv++; + } + // a few in markup, mostly from the query()'ies: + console.log("fisheyes on this page: ", vv); + + }); + </script> + </head> + <body class="tundra"> + <div id="container"> + + <div id="list"> + <ul> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + <li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + <li class="bounce"><span class="fisheyeTarget">DojoX</span><br><div class="ilk">extensions, experimentals, extras. innovation.</div></li> + <li class="bounce"><span class="fisheyeTarget">Dojo</span><br><div class="ilk">the javascript toolkit</div></li> + <li class="bounce"><span class="fisheyeTarget">Dijit</span><br><div class="ilk">UI y mas - themeable, plugable.</div></li> + </ul> + </div> + + <h2>A paragraph: (with links)</h2> + + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + + <h3>read the fine print:</h3> + + <p> + <input type="button" onclick="dijit.byId('l1').show()" value="show first" /> + <input type="button" onclick="dijit.byId('l1').hide()" value="hide first" /> + <input type="button" onclick="dijit.byId('l3').show()" value="show third" /> + <input type="button" onclick="dijit.byId('l3').hide()" value="hide third" /> + </p> + + <div id="lineHeightTest"> + <span id="l1" class="line">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</span> + <span class="line">imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer</span> + <span id="l3" class="line">lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean</span> + <span class="line">id mi in massa bibendum suscipit. Integer eros. Nullam suscipit</span> + <span id="l5" class="line">mauris. In pellentesque. Mauris ipsum est, pharetra semper,</span> + <span class="line">pharetra in, viverra quis, tellus. Etiam purus.</span> + </div> + + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. <a href="#">Morbi</a> dictum rutrum + magna. Sed vitae risus. + </p> + <p> + Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Aenean + semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. + Proin porta rutrum lacus. <a href="#">Etiam</a> consequat scelerisque quam. Nulla + facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi + semper iaculis. Sed molestie tortor at ipsum. + </p> + <h3>another list: (no target, or ilk)</h3> + <div style="height:125px; position:relative;"> + <div style="position:absolute; width:600px;"> + <ul id="inlineList"> + <li class="bounce">Foo</li> + <li class="bounce">Bar</li> + <li class="bounce">Baz</li> + <li class="bounce">Bam</li> + </ul> + </div> + </div> + + <h3>oh right, Images:</h3> + + <div style="position:relative; height:60px;"><div style="position:absolute"> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/> + <img src="images/fisheye_4.png" class="imgBounce" /> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + </div></div> + + <div style="position:relative; float:left; width:1px; left:-75px; top:0;"> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/><br> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br> + <img src="images/fisheye_4.png" class="imgBounce" /><br> + <img src="images/fisheye_3.png" class="imgBounce" onClick="alert('clicked img 3')"/><br> + <img src="images/fisheye_2.png" class="imgBounce" onClick="alert('clicked img 2')"/><br> + <img src="images/fisheye_1.png" class="imgBounce" onClick="alert('clicked img 1')"/> + </div> + + <p dojoType="dojox.widget.FisheyeLite" + properties="{ padding:1.55 }" + style="padding:12px; text-align:justify;"> + + Aliquam vitae enim. Duis scelerisque metus auctor est venenatis + imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer + lorem nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean + id mi in massa bibendum suscipit. Integer eros. Nullam suscipit + mauris. In pellentesque. Mauris ipsum est, pharetra semper, + pharetra in, viverra quis, tellus. Etiam purus. Quisque egestas, + tortor ac cursus lacinia, felis leo adipiscing nisi, et rhoncus + elit dolor eget eros. Fusce ut quam. Suspendisse eleifend leo vitae + ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, + pede purus imperdiet lacus, ut semper velit ante id metus. Praesent + massa dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam + nec est. Aenean id risus blandit tortor pharetra congue. + Suspendisse pulvinar. + </p> + + <p>the end</p> + + </div> + </body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Iterator.html b/includes/js/dojox/widget/tests/test_Iterator.html new file mode 100644 index 0000000..7cf82ff --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Iterator.html @@ -0,0 +1,73 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox Iterator Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, debugAtAllCosts: false, parseOnLoad: true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript"> + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dojox.widget.Iterator"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body> + + <h1 class="testTitle">Dojox Iterator test</h1> + + <div dojoType="dojo.data.ItemFileReadStore" + url="../../../dijit/tests/_data/countries.json" + jsId="stateStore"></div> + + <h3>Data store backed Iterator</h3> + <ul> + <li>before</li> + <li dojoType="dojox.widget.Iterator" + query="{ name: 'A*' }" + store="stateStore"> + ${name} + </li> + <li>after</li> + </ul> + + <h3>Array backed Iterator</h3> + <ul> + <li>before</li> + <script> + var tdata = [ + { thinger: "blah", name: "named:" }, + { thinger: "..." }, + { thinger: "w00t!" } + ]; + </script> + <li dojoType="dojox.widget.Iterator" + defaultValue="*this space intentionally left blank*" + data="tdata"> + ${name} ${thinger} + </li> + <li>after</li> + </ul> + + <h3>Array-property Iterator</h3> + <ul> + <li>before</li> + <li>blah</li> + <li dojoType="dojox.widget.Iterator" + dataValues="thinger, blah, blah"> + ${value} + </li> + <li>after</li> + </ul> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Loader.html b/includes/js/dojox/widget/tests/test_Loader.html new file mode 100644 index 0000000..3c014a2 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Loader.html @@ -0,0 +1,81 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojo Visual Loader Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Loader/Loader.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../Loader.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.widget.Loader"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + function getHoney(){ + // simple xhrGet example + var foo = dojo.xhrGet({ + url: '../Loader/honey.php?delay=0', + handleAs: 'text', + load: function(result){ + content.innerHTML = result; + } + }); + } + + function postHoney(){ + // simple xhrPost example + var foo = dojo.xhrPost({ + url: '../Loader/honey.php?delay=0', + handleAs: 'text', + load: function(result){ + content.innerHTML = result; + } + }); + } + + function alertMe(){ + console.log('subscription fired',arguments); + } + + var content = null; + dojo.addOnLoad(function(){ + + content = dojo.byId("dataholder"); + // FIXME: why aren't you working? + // var foo = dojo.subscribe("Loader",null,"alertMe"); + // console.log(foo); + + }); + </script> +</head> +<body class="tundra"> + <div id="globalLoader" dojoType="dojox.widget.Loader"></div> + + <!-- Other examples: + <div id="globalLoader" dojoType="dojox.widget.Loader" hasVisuals="false"></div> + <div id="globalLoader" dojoType="dojox.widget.Loader" hasVisuals="true" attachToPointer="false"></div> + --> + + <h1 class="testTitle">Dojox xhrListener test</h1> + + <a href="javascript:getHoney();">start xhrGet demo</a> + <a href="javascript:postHoney();">start xhrPost demo</a> + + <p>No additional code is required except for the existance of a + dojoType="dojox.widget.Loader" node. It will listen for the start + and end of xhr* requests (via _ioSetArgs [ugh] and Deferred.prototype._fire .. + </p> + + <br> + <div id="dataholder" style="float:left; height:300px; overflow:auto; width:400px; border:1px solid #ccc; "></div> + <!-- make me a scrollbar. a Taaaaaall scrollbar --> + <div style="float:left; height:2000px; width:1px; overflow:hidden">spacer</div> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_MultiComboBox.html b/includes/js/dojox/widget/tests/test_MultiComboBox.html new file mode 100644 index 0000000..86f6c54 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_MultiComboBox.html @@ -0,0 +1,70 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Multi-input ComboBox widget</title> + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../../../dojo/resources/dojo.css"; + + body { margin:20px; } + #widget_frogin, + #widget_frogin2 + { width: 30em; height:1.2em; } + + </style> + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.widget.MultiComboBox"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dijit.form.Button"); + </script> + </head> + <body class="tundra"> + + <h1 class="testTitle">dojox.widget.MultiComboBox</h1> + <p> + This widget is an extension to ComboBox to allow "tag" style input using a datastore. Start typing + into the box, and your options will be presented. The default delimiter is a comma, which can be over-ridden + by the delimiter="" attrbute. + </p> + + <div dojoType="dojo.data.ItemFileReadStore" jsId="memberTagStore" + url="_tags.json"></div> + + <h3>Default:</h3> + <input dojoType="dojox.widget.MultiComboBox" id="frogin" + store="memberTagStore" + value="" + searchAttr="tag" + name="tags" /> + + <h3>Alternate delimiter (:)</h3> + <input dojoType="dojox.widget.MultiComboBox" id="frogin2" + store="memberTagStore" + value="" + delimiter=":" + searchAttr="tag" + name="tags2" /> + + <h3>From code:</h3> + <button dojoType="dijit.form.Button"> + Make it. + <script type="dojo/method" event="onClick"> + var widget = new dojox.widget.MultiComboBox({ + store:memberTagStore, + searchAttr:"tag" + },"frogin3"); + widget.startup(); + // only make it once. + this.setDisabled(true); + </script> + </button><br> + + <input id="frogin3" name="tags3" value="" /> + + + </body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Rating.html b/includes/js/dojox/widget/tests/test_Rating.html new file mode 100644 index 0000000..e87168f --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Rating.html @@ -0,0 +1,91 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox Rating Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Rating/Rating.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="/dijit/_Templated.js"></script> + <script type="text/javascript" src="/dijit/_Container.js"></script> + <script type="text/javascript" src="/dijit/form/_FormWidget.js"></script> + <script type="text/javascript" src="../Rating.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + </script> + <style> + /* Use bigger stars and make the node wider than the star actually is, + this creates some space around the stars (use background-position to center the stars)*/ + #rating1Box .dojoxRatingStar { + background-image:url(images/rating_empty.gif); + background-position:top center; + background-repeat:no-repeat; + height:30px; + width:40px; + } + + #rating1Box .dojoxRatingStarChecked { + background-image:url(images/rating_full.gif); + } + + #rating1Box .dojoxRatingStarHover { + background-image:url(images/rating_full.gif); + background-color:lightgrey; + } + + </style> +</head> +<body class="tundra"> + + <h1 class="testTitle">Dojox Rating test</h1> + + <h3>default usage:</h3> + The attribute "numStars" is not given, so the default 3 stars are shown.<br /> + <span id="rating0" dojoType="dojox.widget.Rating" onChange="dojo.query('#rating0Value')[0].innerHTML = this.value"></span> + The value is: <b><span id="rating0Value">0</span></b> + <br /><br /> + + <h3>5 stars:</h3> + The attribute "numStars" is given and set to 5, the initial value is 3.<br /> + <span dojoType="dojox.widget.Rating" numStars="5" value="3"></span> + <br /><br /> + + <h3>Customized, "my big stars":</h3> + The stars are bigger, and styled this way that there is space around each. + When hovering the background color is changed too. All this is achieved via CSS, see top of this file. + <br /> + The attribute "numStars" is set to 10, so we see ten stars. + <div id="rating1Box"> + <span id="rating1" dojoType="dojox.widget.Rating" numStars="10"> + <script type="dojo/event" event="onChange"> + dojo.query('#rating1Value')[0].innerHTML = this.value; + </script> + <script type="dojo/event" event="onMouseOver" args="evt,value"> + dojo.query('#rating1HoverValue')[0].innerHTML = value; + </script> + </span> + <br /><br /> + The value is: <b><span id="rating1Value">0</span></b> + <br /> + The mouse is over: <b><span id="rating1HoverValue">0</span></b> + </div> + + <h3>Spacing</h3> + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space<div dojoType="dojox.widget.Rating" numStars="5" value="1"></div> + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + Surrounded by text to see that it really takes all it's space + <br /><br /> +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_SortList.html b/includes/js/dojox/widget/tests/test_SortList.html new file mode 100644 index 0000000..55cb7a1 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_SortList.html @@ -0,0 +1,74 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Dojox SortList Test</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../SortList/SortList.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../SortList.js"></script> + <script type="text/javascript"> + // dojo.require("dojox.widget.SortList"); + dojo.require("dijit.layout.TabContainer"); + dojo.require("dijit.layout.SplitContainer"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + </script> +</head> +<body> + + <h1 class="testTitle">Dojox SortList test</h1> + + <div dojoType="dojo.data.ItemFileReadStore" url="../../../dijit/tests/_data/countries.json" jsId="stateStore"></div> + + <h3>Simple sortable example</h3> + <ul dojoType="dojox.widget.SortList" store="stateStore" title="sortable List" style="width:200px; height:200px;"></ul> + + <h3>Children of a TabContainer</h3> + <div dojoType="dijit.layout.TabContainer" style="width:300px; height:300px;"> + <div dojoType="dojox.widget.SortList" store="stateStore" title="list 1" heading="countires"></div> + <div dojoType="dojox.widget.SortList" store="stateStore" title="list 2" heading="states"></div> + <div dojoType="dojox.widget.SortList" store="stateStore" title="closable" heading="countries" closable="true"></div> + </div> + + <h3>Child of a SplitContainer</h3> + <div dojoType="dijit.layout.SplitContainer" sizerWidth="7" activeSizing="false" orientaton="vertical" style="width:600px; height:200px;"> + <div dojoType="dojox.widget.SortList" store="stateStore" title="list 1" layoutAlign="left" sizeShare="33"></div> + <div dojoType="dojox.widget.SortList" store="stateStore" title="list 2" layoutAlign="client" sizeShare="33"></div> + <div dojoType="dojox.widget.SortList" store="stateStore" title="closable" layoutAlign="right" sizeShare="33"></div> + </div> + + <br> + <h3>Raw, degradable UL list:</h3> + <ul dojoType="dojox.widget.SortList" title="SortList From Markup" sortable="false" style="width:200px; height:200px;"> + <li>one</li> + <li>two</li> + <li>three</li> + <li>four</li> + <li>five</li> + <li>six</li> + <li>four</li> + <li>five</li> + <li>six</li> + <li>four</li> + <li>five</li> + <li>six</li> + <li>four</li> + <li>five</li> + <li>six</li> + </ul> + + <h3>normal ul:</h3> + <ul style="width:200px; height:200px;"> + <li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</li><li>one</li> + </ul> + +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_TimeSpinner.html b/includes/js/dojox/widget/tests/test_TimeSpinner.html new file mode 100644 index 0000000..6009f6d --- /dev/null +++ b/includes/js/dojox/widget/tests/test_TimeSpinner.html @@ -0,0 +1,87 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>Dojo Spinner Widget Test</title> + + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + + <script type="text/javascript"> + dojo.require("dojox.widget.TimeSpinner"); + dojo.require("dojo.parser"); // scan page for widgets + + function displayData() { + var spinner = dijit.byId("timeSpinner"); + + //accessing the widget property directly + console.log("TimeSpinner Value (raw, unserialized): ", spinner.getValue()); + + //accessing the widget from the form elements + var theForm = dojo.byId("form1"); + var s = ""; + for (var i=0; i<theForm.elements.length;i++){ + var elem = theForm.elements[i]; + if (!elem.name || elem.name =="button") { continue ; } + s+=elem.name + ": " + elem.value + "\n"; + } + console.log(s); + + } + + </script> + <style type="text/css"> + #integerspinner2 .dojoSpinnerUpArrow { + border-bottom-color: blue; + } + #integerspinner2 .dojoSpinnerDownArrow { + border-top-color: red; + } + #integerspinner2 .dojoSpinnerButton { + background-color: yellow; + } + #integerspinner2 .dojoSpinnerButtonPushed { + background-color: gray; + } + #integerspinner2 .dojoSpinnerButtonPushed .dojoSpinnerDownArrow { + border-top-color: blue; + } + #integerspinner2 .dojoSpinnerButtonPushed .dojoSpinnerUpArrow { + border-bottom-color: red; + } + + .dojoInputFieldValidationNormal#integerspinner2 { + color:blue; + background-color:pink; + } + </style> + </head> + + <body class="tundra"> + <h1 class="testTitle">Dojox TimeSpinner Test</h1> + Try typing values, and use the up/down arrow keys and/or the arrow push + buttons to spin + <br> + <form id="form1" action="" name="example" method="post"> + <h1>time spinner</h1> + <br> + <input id="timeSpinner" dojoType="dojox.widget.TimeSpinner" + onChange="console.debug('onChange fired for widget id = ' + this.id + ' with value = ' + arguments[0]);" + value="12:30 PM" + name="timeSpinner" + hours="12" + id="timeSpinner" /> + </form> + + <div> + <button name="button" onclick="displayData(); return false;">view data</button> + </div> + + </body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Toaster.html b/includes/js/dojox/widget/tests/test_Toaster.html new file mode 100644 index 0000000..015ebbe --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Toaster.html @@ -0,0 +1,147 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Toaster Widget Dojo Tests</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Toaster/Toaster.css"; + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojox.widget.Toaster"); + dojo.require("dojo.parser"); // scan page for widgets and instantiate them + + var toast = null; + function showTestMessage(){ + dojo.publish("testMessageTopic", + [ "This is a message! It's kind of long to show message wrapping."] + ); + } + function showAnotherMessage(){ + dojo.publish("testMessageTopic", + [{ + message: "This is another message!", + type: "warning", + duration: 500 + }] + ); + } + function showYetAnotherMessage(){ + dojo.publish("testMessageTopic", + [{ message: "This is yet another message!" }] + ); + } + + dojo.addOnLoad(function(){ + toast = dijit.byId("toast"); + }); + </script> +</head> +<body class="tundra"> + <div dojoType="dojox.widget.Toaster" id="toast" + positionDirection="br-left" duration="0" + messageTopic="testMessageTopic"></div> + + <div dojoType="dojox.widget.Toaster" id="toast2" + separator="<hr>" positionDirection="bl-up" + messageTopic="testMessageTopic"></div> + + <button type="submit" + onclick="showTestMessage();">Click to show message</button> + <button type="submit" + onclick="showAnotherMessage();">Click to show another message</button> + <button type="submit" + onclick="showYetAnotherMessage();">Click to show yet another message</button> + + <h1>dojox.widget.Toaster test</h1> + + <div style="color: #FF0000;"> + When you click any of the buttons above, the bottom right hand message will + stay on the screen until you acknowledge it by clicking inside the message + box. If you click one of the message buttons while a message is still + displayed in the bottom right corner it should append the new message below + the old one with a separator between them. + </div> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper + sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum + lacus. Etiam consequat scelerisque quam. Nulla facilisi. Maecenas luctus + venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie + tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus. + </p> + <p> + Aliquam vitae enim. Duis scelerisque metus auctor est venenatis imperdiet. + Fusce dignissim porta augue. Nulla vestibulum. Integer lorem nunc, + ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in massa + bibendum suscipit. Integer eros. Nullam suscipit mauris. In pellentesque. + Mauris ipsum est, pharetra semper, pharetra in, viverra quis, tellus. Etiam + purus. Quisque egestas, tortor ac cursus lacinia, felis leo adipiscing + nisi, et rhoncus elit dolor eget eros. Fusce ut quam. Suspendisse eleifend + leo vitae ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, + pede purus imperdiet lacus, ut semper velit ante id metus. Praesent massa + dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam nec est. + Aenean id risus blandit tortor pharetra congue. Suspendisse pulvinar. + </p> + <p> + Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam ornare + elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque nonummy + mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus lobortis, sem + vitae nonummy lacinia, nisl est gravida magna, non cursus est quam sed + urna. Phasellus adipiscing justo in ipsum. Duis sagittis dolor sit amet + magna. Suspendisse suscipit, neque eu dictum auctor, nisi augue tincidunt + arcu, non lacinia magna purus nec magna. Praesent pretium sollicitudin + sapien. Suspendisse imperdiet. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos hymenaeos. + </p> + <p> + Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique et, + dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel ipsum. + Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices vitae, + nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, + per inceptos hymenaeos. Nulla id erat sit amet odio luctus eleifend. Proin + massa libero, ultricies non, tincidunt a, vestibulum non, tellus. Nunc nunc + purus, lobortis a, pulvinar at, egestas a, mi. Cras adipiscing velit a + mauris. Morbi felis. Etiam at felis. Cras eget eros et justo mattis + pulvinar. Nullam at justo id risus porttitor dignissim. Vestibulum sed + velit vel metus tincidunt tempus. Nunc euismod nisl id dolor tristique + tincidunt. Nullam placerat turpis sed odio. Curabitur in est id nibh tempus + ultrices. Aliquam consectetuer dapibus eros. Aliquam nisl. + </p> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper + sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum + lacus. Etiam consequat scelerisque quam. Nulla facilisi. Maecenas luctus + venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie + tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus. + </p> + <p> + Aliquam vitae enim. Duis scelerisque metus auctor est venenatis imperdiet. + Fusce dignissim porta augue. Nulla vestibulum. Integer lorem nunc, + ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in massa + bibendum suscipit. Integer eros. Nullam suscipit mauris. In pellentesque. + Mauris ipsum est, pharetra semper, pharetra in, viverra quis, tellus. Etiam + purus. Quisque egestas, tortor ac cursus lacinia, felis leo adipiscing + nisi, et rhoncus elit dolor eget eros. Fusce ut quam. Suspendisse eleifend + leo vitae ligula. Nulla facilisi. Nulla rutrum, erat vitae lacinia dictum, + pede purus imperdiet lacus, ut semper velit ante id metus. Praesent massa + dolor, porttitor sed, pulvinar in, consequat ut, leo. Nullam nec est. + Aenean id risus blandit tortor pharetra congue. Suspendisse pulvinar. + </p> + <p> + Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam ornare + elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque nonummy + mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus lobortis, sem + vitae nonummy lacinia, nisl est gravida magna, non cursus est quam sed + urna. Phasellus adipiscing justo in ipsum. Duis sagittis dolor sit amet + magna. Suspendisse suscipit, neque eu dictum auctor, nisi augue tincidunt + arcu, non lacinia magna purus nec magna. Praesent pretium sollicitudin + sapien. Suspendisse imperdiet. Class aptent taciti sociosqu ad litora + torquent per conubia nostra, per inceptos hymenaeos. + </p> +</body> +</html> diff --git a/includes/js/dojox/widget/tests/test_Wizard.html b/includes/js/dojox/widget/tests/test_Wizard.html new file mode 100644 index 0000000..5de9f02 --- /dev/null +++ b/includes/js/dojox/widget/tests/test_Wizard.html @@ -0,0 +1,118 @@ +<html> +<head> +<title>Wizard Demo</title> + + <script type="text/javascript" djConfig="isDebug:true,parseOnLoad:true" + src="../../../dojo/dojo.js"></script> + <script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script> + <script type="text/javascript" src="../Wizard.js"></script> + + <script type="text/javascript"> + dojo.require("dojox.widget.Wizard"); + + function cancel() { + alert("Wizard Cancelled!"); + } + + function done() { + alert("Wizard Done!"); + } + </script> + + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "../Wizard/Wizard.css"; + body { + font-family : sans-serif; + } + </style> +</head> + +<body> + + <div style="width:800px; margin:0 auto"> + + <h1 class="testTitle">dojox.widget.Wizard tests</h1> + + <p>This example shows a wizard with customized button labels.</p> + + <div id="wizard1" dojoType="dojox.widget.WizardContainer" + style="width: 640px; height: 200px;" + nextButtonLabel="Go on" + > + <div dojoType="dojox.widget.WizardPane" title="Tab 1"> + <h1>Tab 1</h1> + <p>Sized content, box one</p> + </div> + <div dojoType="dojox.widget.WizardPane"> + <h1>Tab 2</h1> + </div> + <div dojoType="dojox.widget.WizardPane" doneFunction="done"> + <h1>Tab 3</h1> + + You won't be able to come back, but you can finish now... + </div> + <div dojoType="dojox.widget.WizardPane" canGoBack="false"> + <h1>Tab 4</h1> + + ... and now you can't go back. + </div> + <div dojoType="dojox.widget.WizardPane" doneFunction="done"> + <h1>Tab 5</h1> + ... and now you can finish up. + </div> + </div> + + <p>The next shows the option to hide the inactive buttons, with a smaller width...</p> + + <div id="wizard2" dojoType="dojox.widget.WizardContainer" hideDisabled="true" style="width: 50%; height: 200px;"> + <div dojoType="dojox.widget.WizardPane"> + <h1>Step 1 of 3</h1> + <p>Lorem ipsum dolor sit amet</p> + </div> + <div dojoType="dojox.widget.WizardPane"> + <h1>Step 2 of 3</h1> + <p>consectetur adipisicing elit</p> + </div> + <div dojoType="dojox.widget.WizardPane"> + <h1>Step 3 of 3</h1> + <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> + </div> + </div> + + <p>The next shows blocking moving to the next step with a JS function...</p> + + <script> + function checkAgreement() { + var frm = document.forms['acceptAgreement']; + var accept = frm.accept; + if (!accept.checked) { + return "You must agree to the terms before continuing."; + } + } + </script> + <div id="wizard3" dojoType="dojox.widget.WizardContainer" style="width: 600px; height: 400px; margin:0 auto;"> + <div dojoType="dojox.widget.WizardPane" id="Agreement1" passFunction="checkAgreement"> + <h1>Agreement Terms</h1> + + <div dojoType="dijit.layout.ContentPane" style="width:400px; border:1px solid #b7b7b7; background:#fff; padding:8px; margin:0 auto; height:200px; overflow:auto; " + href="../../../dojo/LICENSE"></div> + + <form action="#" name="acceptAgreement"> + <p> + <input type="checkbox" name="accept" value="true"/> I accept the terms of this agreement. + </p> + </form> + </div> + <div dojoType="dojox.widget.WizardPane" canGoBack="false"> + <h1>Complete</h1> + <p>The license has been accepted.</p> + </div> + </div> + </div> + +</body> +</html> + + |
