svn changeset:193/svn branch:toolkittags/6.7.0.beta1
/** Construct example theme that extends some other theme | |||||
* typically the DefaultTheme. | |||||
* | |||||
* @param themeRoot The base URL of theme resources. | |||||
* @param defaultTheme Theme to be extended. | |||||
* | |||||
*/ | |||||
function ExampleTheme(themeRoot, defaultTheme) { | |||||
this.themeName = "ExampleTheme"; | |||||
this.root = themeRoot; | |||||
this.parent = defaultTheme; | |||||
// Tell the parent where to look for theme icons | |||||
this.parent.iconRoot = this.root; | |||||
} | |||||
/** Register all renderers to a ajax client. | |||||
* | |||||
* @param client The ajax client instance. | |||||
*/ | |||||
ExampleTheme.prototype.registerTo = function(client) { | |||||
// We register our own customlayout handler. | |||||
// This way the layouts can be in different place. | |||||
client.registerRenderer(this,"customlayout",null,this.renderCustomLayout); | |||||
} | |||||
ExampleTheme.prototype.renderCustomLayout = function(renderer,uidl,target,layoutInfo) { | |||||
// Shortcuts | |||||
var theme = renderer.theme; | |||||
var parentTheme = theme.parent; | |||||
// Get style | |||||
var style = uidl.getAttribute("style"); | |||||
if (style == null) return null; | |||||
// Load the layout | |||||
var url = theme.root + style + ".html"; | |||||
var text = renderer.client.loadDocument(url,false); | |||||
if (text == null) return null; | |||||
// Create containing element | |||||
var main = parentTheme.createPaintableElement(renderer,uidl,target); | |||||
var n = parentTheme.createElementTo(main, "div"); | |||||
n.setAttribute("id",uidl.getAttribute("id")); | |||||
n.innerHTML=text; | |||||
var divs = n.getElementsByTagName("div"); | |||||
for (var i=0; i<divs.length; i++) { | |||||
var div = divs.item(i); | |||||
var name = div.getAttribute("location"); | |||||
if (name != null) { | |||||
for (var j=0; j < uidl.childNodes.length; j++) { | |||||
var c = uidl.childNodes.item(j); | |||||
if (c.nodeType == Node.ELEMENT_NODE | |||||
&& c.nodeName == "location" | |||||
&& c.getAttribute("name") == name) { | |||||
for (var k=0; k<c.childNodes.length; k++) { | |||||
var cc = c.childNodes.item(k); | |||||
if (cc.nodeType == Node.ELEMENT_NODE) { | |||||
var parent = div.parentNode; | |||||
// TODO | |||||
if (parent != null) { | |||||
parentTheme.removeAllChildNodes(div); | |||||
var newNode = renderer.client.renderUIDL(cc,div); | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} | |||||
} |
<HTML> | |||||
<HEAD> | |||||
<link rel="stylesheet" href="default.css" type="text/css"/> | |||||
</HEAD> | |||||
<BODY> | |||||
<DIV class="table"> | |||||
<DIV class="caption pad">Table | |||||
<DIV class="outset popup"> | |||||
<DIV class="border pad"> | |||||
<IMG class="icon" src="img/icon.gif"/> | |||||
<DIV class="content"> | |||||
This is the popup description. | |||||
IT can be multiline. | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="outset"> | |||||
<DIV class="border"> | |||||
<TABLE> | |||||
<TR class="header"> | |||||
<TD class="empty"></TD> | |||||
<TD class="cheader clickable bg"><DIV class="caption">R header 1</DIV></TD> | |||||
<TD class="cheader clickable bg"><DIV class="caption">R header 2</DIV></TD> | |||||
<TD class="cheader clickable bg"><DIV class="caption">R header 3</DIV></TD> | |||||
</TR> | |||||
<TR class="odd clickable"> | |||||
<TD class="rheader"><DIV class="caption">C header 1</DIV></TD> | |||||
<TD>cell</TD> | |||||
<TD>cell</TD> | |||||
<TD>cell</TD> | |||||
</TR> | |||||
<TR class="even clickable"> | |||||
<TD class="rheader"><DIV class="caption">C header</DIV></TD> | |||||
<TD>cell</TD> | |||||
<TD>cell</TD> | |||||
<TD>cell</TD> | |||||
</TR> | |||||
<TR class="odd clickable"> | |||||
<TD class="rheader"><DIV class="caption">C header</DIV></TD> | |||||
<TD>cell</TD> | |||||
<TD>cell with some more stuff<br/>asdasdas</TD> | |||||
<TD>cell</TD> | |||||
</TR> | |||||
<TR class="even clickable"> | |||||
<TD class="rheader"><DIV class="caption">C header</DIV></TD> | |||||
<TD>cell</TD> | |||||
<TD>cell</TD> | |||||
<TD>cell</TD> | |||||
</TR> | |||||
</TABLE> | |||||
<DIV class="nav pad"><< 5 / 72 >></DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<BR/> | |||||
<DIV class="panel outset"> | |||||
<DIV class="border"> | |||||
<DIV class="caption pad">Panel</DIV> | |||||
<DIV class="content"> | |||||
This is supposed to be panel content. | |||||
<P> | |||||
The quick brown fox jumps over the lazy dog. | |||||
The quick brown fox jumps over the lazy dog. | |||||
The quick brown fox jumps over the lazy dog. | |||||
The quick brown fox jumps over the lazy dog. | |||||
The quick brown fox jumps over the lazy dog. | |||||
The quick brown fox jumps over the lazy dog. | |||||
<DIV class="tabsheet"> | |||||
<DIV class="caption">Tabsheet</DIV> | |||||
<DIV class="tabs"> | |||||
<DIV class="tab clickable inline"><DIV class="caption border pad inline">Tab 1</DIV></DIV> | |||||
<DIV class="tab-on inline"><DIV class="caption border pad inline">Tab 2</DIV></DIV> | |||||
<DIV class="tab clickable inline"><DIV class="caption border pad inline">Tab 3</DIV></DIV> | |||||
<DIV class="tab disabled inline"><DIV class="caption border pad inline">Disabled</DIV></DIV> | |||||
</DIV> | |||||
<DIV class="outset"> | |||||
<DIV class="content border"> | |||||
This is supposed to be tabsheet content. | |||||
<P> | |||||
The quick brown fox jumps over the lazy dog. | |||||
The quick brown fox jumps over the lazy dog. | |||||
The quick brown fox jumps over the lazy dog. | |||||
</P> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<BR/> | |||||
<DIV class="button outset clickable"> | |||||
<DIV class="border pad bg"> | |||||
<DIV class="caption">Ok</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="button outset clickable error"> | |||||
<DIV class="border pad bg"> | |||||
<DIV class="caption">Error</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="button outset disabled"> | |||||
<DIV class="border pad bg"> | |||||
<DIV class="caption">Disabled asdasdasdasdasdasdasdasdasd</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="link clickable"> | |||||
<DIV class="border pad"> | |||||
<DIV class="caption">This is a link</DIV> | |||||
<DIV class="description"> | |||||
Perhaps a link should display it's description directly? I think so :-)<br/> | |||||
Multiline. | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="link disabled"> | |||||
<DIV class="border pad"> | |||||
<DIV class="caption">This is a link</DIV> | |||||
<DIV class="description"> | |||||
Perhaps a link should display it's description directly? I think so :-)<br/> | |||||
Multiline. | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<BR/> | |||||
<DIV class="outset"> | |||||
<DIV class="border"> | |||||
<DIV class="caption capshift inline pad">Panel lite</DIV> | |||||
<DIV class="content"> | |||||
<DIV class="textfield"> | |||||
<DIV class="caption">Textfield</DIV> | |||||
<DIV class="border"> | |||||
<DIV class="inset"> | |||||
<INPUT type="text"> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="textfield error"> | |||||
<DIV class="caption">Textfield</DIV> | |||||
<DIV class="border"> | |||||
<DIV class="inset"> | |||||
<INPUT type="text"> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="textfield disabled"> | |||||
<DIV class="caption">Disabled</DIV> | |||||
<DIV class="border"> | |||||
<DIV class="inset"> | |||||
<INPUT type="text"> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="tree"> | |||||
<DIV class="placeholder"> | |||||
<DIV class="caption">Tree</DIV> | |||||
<DIV class="content"> | |||||
<DIV class="node clickable"> | |||||
<IMG src="img/tree/on.gif" class="icon"> | |||||
<DIV class="caption inline">Node</DIV> | |||||
</DIV> | |||||
<DIV class="nodes"> | |||||
<DIV class="node clickable"> | |||||
<IMG src="img/tree/off.gif" class="icon"> | |||||
<DIV class="caption inline">Node</DIV> | |||||
</DIV> | |||||
<DIV class="node clickable"> | |||||
<IMG src="img/tree/on.gif" class="icon"> | |||||
<DIV class="caption inline">Node</DIV> | |||||
</DIV> | |||||
<DIV class="nodes"> | |||||
<DIV class="node clickable"> | |||||
<IMG src="img/tree/off.gif" class="icon"> | |||||
<DIV class="caption inline">Node</DIV> | |||||
</DIV> | |||||
<DIV class="node clickable"> | |||||
<IMG src="img/tree/off.gif" class="icon"> | |||||
<DIV class="caption inline">Node</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
<DIV class="node clickable"> | |||||
<IMG src="img/tree/off.gif" class="icon"> | |||||
<DIV class="caption inline">Node</DIV> | |||||
</DIV> | |||||
<DIV class="node clickable"> | |||||
<IMG src="img/tree/off.gif" class="icon"> | |||||
<DIV class="caption inline">Node</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</DIV> | |||||
</BODY> | |||||
</HTML> |
* { | |||||
font-size: 10pt; | |||||
font-family: sans-serif; | |||||
} | |||||
.popup { | |||||
font-weight: normal; | |||||
position: absolute; | |||||
z-index: 1000; | |||||
background: white; | |||||
} | |||||
.popup .content { | |||||
display: inline; | |||||
} | |||||
.popup .icon { | |||||
vertical-align: middle; | |||||
} | |||||
.popup.hide { | |||||
display: inline; | |||||
border: none; | |||||
} | |||||
.popup.hide .border { | |||||
display: inline; | |||||
border: none; | |||||
} | |||||
.popup.hide .icon { | |||||
display: inline; | |||||
width: 16px; | |||||
height: 16px; | |||||
} | |||||
.popup.hide .content { | |||||
display: none; | |||||
} | |||||
.inline { | |||||
display: inline; | |||||
} | |||||
.pad { | |||||
padding-top: 3px; | |||||
padding-bottom: 3px; | |||||
padding-left: 7px; | |||||
padding-right: 7px; | |||||
} | |||||
.bg { | |||||
background-image: url('img/bg1.gif'); | |||||
background-repeat: repeat-x; | |||||
} | |||||
.disabled { | |||||
color: #999999; | |||||
opacity: 0.5; | |||||
filter: alpha(opacity=50); | |||||
} | |||||
.disabled .caption { | |||||
color: #999999; | |||||
} | |||||
.disabled .border .caption { | |||||
color: #999999; | |||||
} | |||||
.caption { | |||||
font-weight: bold; | |||||
color: black; | |||||
clear: both; | |||||
} | |||||
.content { | |||||
padding: 7px; | |||||
} | |||||
.capshift { | |||||
position: relative; | |||||
top: -10px; | |||||
left: 3px; | |||||
background-color: white; | |||||
} | |||||
.clickable { | |||||
cursor: hand; | |||||
cursor: pointer; | |||||
} | |||||
DIV.clickable.outset:hover { | |||||
border: 1px solid #eeeeee; | |||||
} | |||||
DIV.clickable:hover .border { | |||||
border: 1px solid #aaaaee; | |||||
} | |||||
.border { | |||||
border-top: 1px solid #aaaaaa; | |||||
border-left: 1px solid #aaaaaa; | |||||
border-bottom: 1px solid #aaaaaa; | |||||
border-right: 1px solid #aaaaaa; | |||||
} | |||||
.error .border { | |||||
border-color: #ee6666; | |||||
} | |||||
.inset { | |||||
border-top: 2px solid #eeeeee; | |||||
border-left: 2px solid #eeeeee; | |||||
} | |||||
.outset { | |||||
border-bottom: 2px solid #eeeeee; | |||||
border-right: 2px solid #eeeeee; | |||||
} | |||||
/* COMPONENTS */ | |||||
.link { | |||||
border: 1px solid white; | |||||
} | |||||
.link .caption { | |||||
color: blue; | |||||
} | |||||
.link .description { | |||||
font-size: smaller; | |||||
padding-left: 7px; | |||||
} | |||||
.link DIV.border { | |||||
border: 1px solid white; | |||||
} | |||||
DIV.link.clickable:hover .border { | |||||
background-image: url('img/bg1.gif'); | |||||
background-repeat: repeat-x; | |||||
} | |||||
.tabs { | |||||
padding-left: 0px !important; | |||||
padding-left: 1px; | |||||
padding-top: 5px; | |||||
padding-bottom: 3px; | |||||
} | |||||
.tab, .tab-on { | |||||
border-right: 2px solid #eeeeee; | |||||
border-bottom: none; | |||||
} | |||||
.tab-on { | |||||
position: relative; | |||||
top: 1px; | |||||
} | |||||
.tab .caption { | |||||
background-image: url('img/bg1.gif'); | |||||
background-repeat: repeat-x; | |||||
border-bottom: none; | |||||
} | |||||
DIV.tab.clickable:hover .caption { | |||||
background-image: url('img/bg1.gif'); | |||||
background-repeat: repeat-x; | |||||
} | |||||
.tab-on .caption { | |||||
border-bottom: 1px solid white; | |||||
border-bottom: none; | |||||
background-color: white; | |||||
} | |||||
.node { | |||||
border: 1px solid white; | |||||
} | |||||
.nodes { | |||||
padding-left: 16px; | |||||
} | |||||
.node .caption { | |||||
vertical-align: top; | |||||
font-weight: normal; | |||||
} | |||||
DIV.node:hover{ | |||||
border: 1px solid #aaaaee; | |||||
background-image: url('img/bg1.gif'); | |||||
background-repeat: repeat-x; | |||||
} | |||||
DIV.node:hover .caption { | |||||
color: blue; | |||||
} | |||||
.panel { | |||||
background-image: url('img/bg3.jpg'); | |||||
background-repeat: no-repeat; | |||||
} | |||||
DIV.textfield:hover .border { | |||||
border: 1px solid #aaaaee; | |||||
} | |||||
.textfield INPUT { | |||||
border: none; | |||||
} | |||||
.table TABLE { | |||||
border-collapse: collapse; | |||||
empty-cells: show; | |||||
xborder: 1px solid #999999; | |||||
width: 100%; | |||||
} | |||||
.table TD { | |||||
padding-left: 5px; | |||||
padding-right: 5px; | |||||
padding-top: 3px; | |||||
padding-bottom: 3px; | |||||
border-left: 1px solid #eeeeee; | |||||
border-bottom: 1px solid #eeeeee; | |||||
} | |||||
.table .odd { | |||||
background-color: #f9f9f9; | |||||
} | |||||
.table .cheader { | |||||
border-bottom-color: #999999; | |||||
border-left: 1px solid #999999; | |||||
} | |||||
.table .rheader { | |||||
text-align: right; | |||||
border-right: 1px solid #999999; | |||||
border-left: none; | |||||
} | |||||
.table .empty { | |||||
border-bottom-color: #999999; | |||||
border-right-color: #999999; | |||||
} | |||||
.table .nav { | |||||
border-top: 2px solid #eeeeee; | |||||
text-align: center; | |||||
} | |||||
.table TR.clickable:hover { | |||||
background-image: url('img/bg1.gif'); | |||||
background-repeat: repeat-x; | |||||
} | |||||
.table TR.clickable:hover TD { | |||||
border-bottom: 1px solid #9999ee; | |||||
} | |||||
.over .caption { | |||||
color: #6666cc; | |||||
} |
<html> | |||||
<head> | |||||
<title>Table concept prototype</title> | |||||
<style> | |||||
.header { | |||||
color:white; | |||||
padding-left:2px; | |||||
padding-bottom:2px; | |||||
border:1px solid #458cee; | |||||
background: transparent url(aquaHeaderIcon.gif) 0 -5px repeat-x; | |||||
} | |||||
div.table { | |||||
border: 1px solid silver; | |||||
width: 515px; | |||||
} | |||||
#scroller { | |||||
width: 15px; | |||||
float: right; | |||||
margin-top: 15px; | |||||
height: 315px; | |||||
overflow: -moz-scrollbars-vertical; | |||||
overflow-y: auto; | |||||
overflow-x: hidden; | |||||
} | |||||
div.horiz-scroller { | |||||
width: 500px; | |||||
height: 345px; ' | |||||
overflow: -moz-scrollbars-horizontal; | |||||
overflow-y: hidden; | |||||
overflow-x: auto; | |||||
} | |||||
#tbody { | |||||
overflow: hidden; | |||||
height: 312px; | |||||
} | |||||
div.table td { | |||||
font: 11px "Lucida Grande",LucidaGrande,verdana,sans-serif; | |||||
} | |||||
div.table tbody td { | |||||
border-bottom: 1px solid #eee; | |||||
} | |||||
div.table tbody td.unknown { | |||||
background-color: #eee; | |||||
} | |||||
</style> | |||||
</head> | |||||
<body> | |||||
<script lang="JavaScript"> | |||||
cols = 19; | |||||
rows = 100; | |||||
function scr() { | |||||
var t = document.getElementById("tbody"); | |||||
var s = document.getElementById("scroller"); | |||||
t.scrollTop = s.scrollTop; | |||||
} | |||||
</script> | |||||
<div class="table"> | |||||
<div id="scroller" onscroll="scr()"><div style="height: 5000px; width: 1px;"> </div></div> | |||||
<div class="horiz-scroller"> | |||||
<TABLE border="0" cellspacing="0" style="width: 1000px;"> | |||||
<THEAD> | |||||
<tr class="header"><script>for (var i=0; cols > i; i++) document.write("<td>Col " + (1+i) + "</td>");</script></th> | |||||
</THEAD> | |||||
<TBODY id="tbody"> | |||||
<script> | |||||
document.write('<tr><td class="unknown" colspan="'+cols+'" height="1000"> </td></tr>'); | |||||
for (var j=0; rows > j; j++) { | |||||
document.write("<tr>"); | |||||
for (var i=0; cols > i; i++) document.write("<td>" + (1+i) + "," + (1+j) + "</td>"); | |||||
document.write("</tr>"); | |||||
} | |||||
document.write('<tr><td class="unknown" colspan="'+cols+'" height="2000"> </td></tr>'); | |||||
</script> | |||||
</TBODY> | |||||
</TABLE> | |||||
</div> | |||||
</div> | |||||
</body> | |||||
</html> |
<html> | |||||
<head> | |||||
<title>Table concept prototype</title> | |||||
</head> | |||||
<body> | |||||
<script lang="JavaScript"> | |||||
cols = 10; | |||||
rows = 50; | |||||
function scr() { | |||||
var t = document.getElementById("inner"); | |||||
var h = document.getElementById("header"); | |||||
var s = document.getElementById("scroller"); | |||||
t.scrollTop = s.scrollTop; | |||||
h.style.top = "" + s.scrollTop + "px"; | |||||
} | |||||
</script> | |||||
<div id="outer" style="border: 2px outset #8080A0; width: 522px;"> | |||||
<div id="scroller" onscroll="scr()" | |||||
style="width: 15px; float: right; margin-top: 22px; height: 308px; overflow: -moz-scrollbars-vertical; overflow-y: auto; overflow-x: hidden;"> | |||||
<div style="height: 5000px; width: 1px;"> </div> | |||||
</div> | |||||
<div style="width: 500px; height: 345px; overflow-x: auto; overflow-y: hidden; " id="inner"> | |||||
<TABLE border="1" style="width: 1000px;"> | |||||
<tr id="header" style="position: relative; background-color: white; z-index: 10;"><script>for (var i=0; cols > i; i++) document.write("<th>Col " + (1+i) + "</th>");</script></th> | |||||
<script> | |||||
document.write('<tr><td colspan="'+cols+'" height="1000"> </td></tr>'); | |||||
for (var j=0; rows > j; j++) { | |||||
document.write("<tr>"); | |||||
for (var i=0; cols > i; i++) document.write("<td>" + (1+i) + "," + (1+j) + "</td>"); | |||||
document.write("</tr>"); | |||||
} | |||||
document.write('<tr><td colspan="'+cols+'" height="1000"> </td></tr>'); | |||||
</script> | |||||
</TABLE> | |||||
</div> | |||||
</div> | |||||
</body> | |||||
</html> |
<html> | |||||
<head> | |||||
<title>Table concept prototype</title> | |||||
<style> | |||||
.header { | |||||
color:white; | |||||
padding-left:2px; | |||||
padding-bottom:2px; | |||||
border:1px solid #458cee; | |||||
background: transparent url(aquaHeaderIcon.gif) 0 -5px repeat-x; | |||||
} | |||||
#header { | |||||
position: relative; | |||||
} | |||||
div.table { | |||||
border: 1px solid silver; | |||||
width: 515px; | |||||
height: 315px; | |||||
overflow: auto; | |||||
} | |||||
div.table td { | |||||
font: 11px "Lucida Grande",LucidaGrande,verdana,sans-serif; | |||||
} | |||||
div.table tbody td { | |||||
border-bottom: 1px solid #eee; | |||||
} | |||||
div.table tbody td.unknown { | |||||
background-color: #eee; | |||||
} | |||||
</style> | |||||
</head> | |||||
<body> | |||||
<script lang="JavaScript"> | |||||
cols = 19; | |||||
rows = 100; | |||||
function scr() { | |||||
var t = document.getElementById("tbody"); | |||||
var h = document.getElementById("header"); | |||||
h.style.top = "" + t.scrollTop + "px"; | |||||
} | |||||
</script> | |||||
<div id="tbody" class="table" onscroll="scr()"> | |||||
<TABLE border="0" cellspacing="0" style="width: 1000px;" id="header"> | |||||
<tr class="header" ><script>for (var i=0; cols > i; i++) document.write("<td>Col " + (1+i) + "</td>");</script></tr> | |||||
</TABLE> | |||||
<TABLE border="0" cellspacing="0" style="width: 1000px;"> | |||||
<script> | |||||
document.write('<tr><td class="unknown" colspan="'+cols+'" height="1000"> </td></tr>'); | |||||
for (var j=0; rows > j; j++) { | |||||
document.write("<tr>"); | |||||
for (var i=0; cols > i; i++) document.write("<td>" + (1+i) + "," + (1+j) + "</td>"); | |||||
document.write("</tr>"); | |||||
} | |||||
document.write('<tr><td class="unknown" colspan="'+cols+'" height="2000"> </td></tr>'); | |||||
</script> | |||||
</TABLE> | |||||
</div> | |||||
<!-- Add script to match header widths to table column widths !!!! --> | |||||
</body> | |||||
</html> |