r825 - in branches/experimental/tests: . visual
Author: paul.bakaus
Date: Thu Oct 23 06:21:54 2008
New Revision: 825
Added:
branches/experimental/tests/visual/
branches/experimental/tests/visual/toaster.html
branches/experimental/tests/visual/toasterLite.html
branches/experimental/tests/visual/tree.html
Removed:
branches/experimental/tests/toaster.html
branches/experimental/tests/toasterLite.html
branches/experimental/tests/tree.html
Log:
experimental: moved tests to tests/visual
Added: branches/experimental/tests/visual/toaster.html
==============================================================================
--- (empty file)
+++ branches/experimental/tests/visual/toaster.html Thu Oct 23 06:21:54 2008
@@ -0,0 +1,131 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>UI Toasters: Test Page</title>
+ <script type="text/javascript"
src="http://code.jquery.com/jquery.js"></script>
+ <script type="text/javascript" src="../ui.toaster.js"></script>
+ <script type="text/javascript" src="js/themer.js"></script>
+ <style type="text/css">@import "js/themer.css"; </style>
+ <script type="text/javascript">
+ $(function(){
+ $("body").themer(["flora", "light", "dark"]);
+
+ i = 0;
+ $("#tr").click(function(){
+ i++;
+ $("body").toaster({name: 'test'+i, position: 0});
+ });
+ $("#tl").click(function(){
+ i++;
+ $("body").toaster({name: 'test'+i, position: 1});
+ });
+ $("#br").click(function(){
+ i++;
+ $("body").toaster({name: 'test'+i, position: 2});
+ });
+ $("#bl").click(function(){
+ i++;
+ $("body").toaster({name: 'test'+i, position: 3});
+ });
+
+ $("#closable").click(function(){
+ i++;
+ $("body").toaster({name: 'test'+i, data:"You can, if you wish,
close me. But if you don't i'll just run away.", closable: true});
+ });
+ $("#closableReq").click(function(){
+ i++;
+ $("body").toaster({name: 'test'+i, data: "You Need To Close Me,
I won't Disappear You Know.", closable: true, requireClose: true});
+ });
+ $("#closableReqIMG").click(function(){
+ i++;
+ $("body").toaster({name: 'test'+i, data: '<img
src="http://dev.jquery.com/view/trunk/plugins/ui/tests/images/clock.png"
alt="clock" />You Need To Close Me, I won\'t Disappear You Know.',
closable: true, requireClose: true});
+ });
+ });
+ </script>
+ <style>
+ @import "blueprint/screen.css";
+ .toaster {
+ position:absolute;
+ width:200px;
+ }
+ .toaster.br {
+ right:4px;bottom:5px;
+ }
+ .toaster.bl {
+ left:4px;bottom:5px;
+ }
+ .toaster.tr {
+ right:4px;top:5px;
+ }
+ .toaster.tl {
+ left:4px;top:5px;
+ }
+ .toaster .toast {
+ width:190px;
+ border:1px solid #000;
+ margin:4px;
+ background:#fff;
+ }
+ .toaster .toast .toastName {
+ position:relative;
+ font-weight:bold;
+ display:block;
+ margin:0px;
+ padding:0px;
+ background-color:#abc;
+ }
+ .toaster .toast .toastData {
+ display:block;
+ margin:0px;
+ padding:4px;
+ }
+ .ui-toast-close {
+ cursor:default;
+ height:16px;
+ width:16px;
+ position:absolute;
+ top:1px;
+ right:3px;
+ }
+
+
+ #container {
+ height:400px;
+ padding-right: 9px;
+ padding:1.5em;
+ margin-right: 0;
+ border-right: 1px solid #ddd;
+ }
+ #container #inner {
+ position:relative;
+ background:#fff;
+ height:100%;
+ width:100%;
+ border:1px dashed #ddd;
+ }
+ .notes {background:#fff; padding:2px;}
+ button {width:100%;}
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1><span class="alt">Test Page: Toaster Popups</span></h1>
+ <div class="column span-10 first" id="container">
+ <div id="inner"></div>
+ </div>
+ <div class="column span-3 last">
+ <h2>On the Body</h2>
+ <hr />
+ <button id="tr">top right</button>
+ <button id="tl">top left</button>
+ <button id="br">bottom right</button>
+ <button id="bl">bottom left</button>
+ <h2>Closable</h2>
+ <button id="closable">Closable</button>
+ <button id="closableReq">Closable Require.</button>
+ <button id="closableReqIMG">Closable Require + Image</button>
+ </div>
+ <div class="clear"></div>
+ </div>
+</body>
+</html>
\ No newline at end of file
Added: branches/experimental/tests/visual/toasterLite.html
==============================================================================
--- (empty file)
+++ branches/experimental/tests/visual/toasterLite.html Thu Oct 23 06:21:54
2008
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>UI Toasters: Test Page</title>
+ <link rel="stylesheet" href="../../../themes/flora/flora.all.css"
type="text/css" media="screen" title="Flora (Default)" />
+ <link rel="stylesheet" href="css/demo.css" type="text/css"
media="screen" title="Flora (Default)" />
+
+ <script type="text/javascript"
src="../../../jquery/src/core.js"></script>
+ <script type="text/javascript"
src="../../../jquery/src/selector.js"></script>
+ <script type="text/javascript"
src="../../../jquery/src/event.js"></script>
+ <script type="text/javascript"
src="../../../jquery/src/ajax.js"></script>
+ <script type="text/javascript"
src="../../../jquery/src/fx.js"></script>
+ <script type="text/javascript"
src="../../../jquery/src/offset.js"></script>
+ <script type="text/javascript"
src="../../../dimensions/jquery.dimensions.js"></script>
+ <script type="text/javascript" src="../ui.toasterLite.js"></script>
+
+ <style>
+ @import "blueprint/screen.css";
+ .notes {background:#fff; padding:2px;}
+ button {width:100%;}
+ </style>
+ <script type="text/javascript" charset="utf-8">
+ $.fn.makeTests = function(settings, tests) {
+ container = $('<div class="container"><h1><span class="alt">Test
Page: '+ settings.title +'</span></h1></div>');
+ f = false;
+ size = 0;
+ divs = {};
+ $.each(tests, function(name, test) {
+ f = !f;
+ if (f) {
+ size++;
+ divs[size] = $('<div></div>');
+ }
+ str = $('<div></div>');
+ str.append('<h2>'+ name +'</h2><hr />');
+ $.each(test, function(name, params) {
+ $('<button>'+ name +'</button><div class="notes">'+
params.description +'</div>').click(new
Function(params.code)).appendTo(str);
+ });
+ divs[size].append(str.html());
+ });
+ span = Math.floor(24 / size);
+ $.each(divs, function(number, value) {
+ console.log(value);
+ console.log('-');
+ container.append($('<div class="column span-'+ span
+'"></div>').append($(value).html()));
+ });
+ console.log(container);
+ $('body').append(container);
+ }
+ $('body').makeTests({
+ title: 'ToasterLite Popups'
+ }, {
+ 'Minimal options': {
+ 'None': {
+ description: 'Makes a default toaster with no options',
+ code: '$.toasterLite({})',
+ },
+ 'Title': {
+ description: ''
+ }
+ },
+
+ 'Minimal options2': {
+ 'None': {
+ description: 'Makes a default toaster with no options',
+ code: '$.toasterLite({})',
+ },
+ 'Title': {
+ description: ''
+ }
+ },
+
+ });
+ </script>
+</head>
+<body>
+ asdf
+</body>
+</html>
\ No newline at end of file
Added: branches/experimental/tests/visual/tree.html
==============================================================================
--- (empty file)
+++ branches/experimental/tests/visual/tree.html Thu Oct 23 06:21:54 2008
@@ -0,0 +1,140 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta http-equiv="Content-Language" content="en" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Tree Test Page</title>
+<script type="text/javascript"
src="../../../trunk/jquery-1.2.6.js"></script>
+
+<script type="text/javascript" src="../ui.tree.js"></script>
+<style type="text/css">
+ @import url(../../../themes/light/light.css);
+ @import url(../../../themes/light/light.tree.css);
+ @import url(../../../themes/dark/dark.css);
+ @import url(../../../themes/dark/dark.tree.css);
+ @import url(../../../themes/tango/tango.tree.css);
+ .light .toggle a { color:#222; }
+ .dark .toggle a { color:snow; }
+ .ui-tree-outline { margin: 1em 6em 1em 0; }
+ #tree { margin-right: 12em; }
+
+body { margin:10px; padding:10px; }
+.toggle { margin:0; padding: 0; clear:right; float: right; }
+.toggle li { font:11pt Verdana; margin:0; padding: 0; width: 5em; display:
block; margin-bottom: 0.3em; }
+.toggle li a { color: black; display: block; border: 1px solid gray;
font:11pt Verdana; text-align:center; text-decoration:none; }
+.toggle li a.selected { background: gray; color: white; }
+.toggle li a:focus { outline: 1px dotted blue; }
+
+</style>
+
+<script type="text/javascript">
+
+$(function() {
+
+ $('#tree').tree({
+ collapse: function(ev, ui) {
+ alert($(ui.node).text());
+ }
+ });
+
+ $('#toggle-theme-none').click(function() {
+ $('.toggle a').removeClass('selected');
+ $(this).addClass('selected');
+
$("body").removeClass("dark").removeClass("tango").removeClass("light");
+ return false;
+ });
+
+ $('#toggle-theme-light').click(function() {
+ $('.toggle a').removeClass('selected');
+ $(this).addClass('selected');
+ $("body").removeClass("dark").removeClass("tango").addClass("light");
+ return false;
+ });
+
+ $('#toggle-theme-dark').click(function() {
+ $('.toggle a').removeClass('selected');
+ $(this).addClass('selected');
+ $("body").removeClass("light").removeClass("tango").addClass("dark");
+ return false;
+ });
+
+ $('#toggle-theme-tango').click(function() {
+ $('.toggle a').removeClass('selected');
+ $(this).addClass('selected');
+ $("body").removeClass("light").removeClass("dark").addClass("tango");
+ return false;
+ }).click();
+
+});
+
+</script>
+
+</head>
+
+<body>
+
+<ul class="toggle">
+ <li><a href="#" id="toggle-theme-none">none</a></li>
+ <li><a href="#" id="toggle-theme-light">light</a></li>
+ <li><a href="#" id="toggle-theme-dark">dark</a></li>
+ <li><a href="#" id="toggle-theme-tango">tango</a></li>
+</ul>
+
+<div><input type="text" /></div>
+
+<ul id="tree">
+ <li>Lorem ipsum dolor
+ <ul>
+ <li>sit amet, consectetur</li>
+ <li>adipisicing elit, sed
+ <ul>
+ <li>do eiusmod</li>
+ <li>tempor incididunt</li>
+ </ul>
+ </li>
+ <li>ut labore et dolore magna aliqua.</li>
+ </ul>
+ </li>
+ <li>Ut enim ad minim veniam,
+ <ul>
+ <li>quis nostrud exercitation</li>
+ <li>ullamco laboris nisi ut</li>
+ <li>aliquip ex ea commodo consequat.</li>
+ <li>quis nostrud exercitation</li>
+ <li>ullamco laboris nisi ut</li>
+ <li>aliquip ex ea commodo consequat.</li>
+ <li>quis nostrud exercitation</li>
+ <li>ullamco laboris nisi ut</li>
+ <li>aliquip ex ea commodo consequat.</li>
+ </ul>
+ </li>
+ <li>Duis aute irure dolor in reprehenderit in
+ <ul>
+ <li>voluptate velit</li>
+ <li>esse cillum dolore eu</li>
+ <li>fugiat nulla pariatur.</li>
+ <li>voluptate velit</li>
+ <li>esse cillum dolore eu</li>
+ <li>fugiat nulla pariatur.</li>
+ </ul>
+ </li>
+ <li>Excepteur sint occaecat cupidatat
+ <ul>
+ <li>non proident,
+ <ul>
+ <li>sunt in</li>
+ <li>culpa qui officia</li>
+ <li>deserunt mollit</li>
+ <li>anim id est</li>
+ <li>laborum</li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+</ul>
+
+<div><input type="text" /></div>
+
+</body>
+</html>
+