Beispiel: ohne großes Framework
-
JavaScript
JavaScript Beispiele (jsAnimations.js):
- jsTree
- jsTabs
- jsAccordion
- jsFade
-
Lazarus und Free Pascal
Free Pascal Beispiele:
...
-
PHP
PHP Beispiele:
...
HTML:
<html>
<head>
<script type="text/javascript" src="jsTabsheet.js"></script>
<link rel="stylesheet" type="text/css" href="tabsheet.css" /></head>
<body>
<ul class="tabsheets">
<li class="sheet">
<h4 class="sheet-header">Javascript</h4>
<h5>Javascript Beispiele (jsAnimations.js):</h5>
<ul>
<li>jsTree</li>
<li>jsTabs</li>
<li>jsAccordion</li>
<li>jsFade</li>
</ul>
</li>
<li class="sheet">
<h4 class="sheet-header">Lazarus und Free Pascal</h4>
<h5>Free Pascal Beispiele:</h5>
<p>...</p>
</li>
<li class="sheet">
<h4 class="sheet-header">PHP</h4>
<h5>PHP Beispiele:</h5>
<p>...</p>
</li>
</ul>
</body>
</html>JavaScript:
function getElementsByClassName(searchClass, tagName, domNode) {
if (domNode == null) domNode = document;
if (tagName == null) tagName = '*';
var el = new Array();
var tags = domNode.getElementsByTagName(tagName);
var tcl = " "+searchClass+" ";
for(var i=0,j=0; i<tags.length; i++) {
var test = " " + tags[i].className + " ";
if (test.indexOf(tcl) != -1) {
el[j++] = tags[i];
}
};
return el;
}
function getChildNodes(parentElement, tagName) {
var childs = parentElement.childNodes;
var children = [];
for (var i=0; i<childs.length; i++) {
if (((childs[i].nodeType == 1) ? childs[i].tagName.toLowerCase() : '') == tagName) {
children.push(childs[i]);
}
};
return children;
}
function htmlDecode(s) {
function isEmpty(val) {
if (val) {
return ((val === null) || val.length === 0 || /^\s+$/.test(val));
} else {
return true;
}
};
function HTML2Numerical(s) {
function swapArrayVals(s, arr1, arr2) {
if (isEmpty(s)) {
return "";
};
var re;
if (arr1 && arr2) {
//ShowDebug("in swapArrayVals arr1.length = " + arr1.length + " arr2.length = " + arr2.length)
// array lengths must match
if (arr1.length === arr2.length) {
for (var x=0,i=arr1.length; x<i; x++) {
re = new RegExp(arr1[x], 'g');
s = s.replace(re,arr2[x]); //swap arr1 item with matching item from arr2
}
}
};
return s;
};
var arr1 = new Array(' ','¡','¢','£','¤','¥','¦','§','¨','©','ª','«','¬','­','®','¯','°','±','²','³','´','µ','¶','·','¸','¹','º','»','¼','½','¾','¿','À','Á','Â','Ã','Ä','Å','Æ','Ç','È','É','Ê','Ë','Ì','Í','Î','Ï','Ð','Ñ','Ò','Ó','Ô','Õ','Ö','×','Ø','Ù','Ú','Û','Ü','Ý','Þ','ß','à','á','â','ã','ä','å','æ','ç','è','é','ê','ë','ì','í','î','ï','ð','ñ','ò','ó','ô','õ','ö','÷','ø','ù','ú','û','ü','ý','þ','ÿ','"','&','<','>','Œ','œ','Š','š','Ÿ','ˆ','˜',' ',' ',' ','‌','‍','‎','‏','–','—','‘','’','‚','“','”','„','†','‡','‰','‹','›','€','ƒ','Α','Β','Γ','Δ','Ε','Ζ','Η','Θ','Ι','Κ','Λ','Μ','Ν','Ξ','Ο','Π','Ρ','Σ','Τ','Υ','Φ','Χ','Ψ','Ω','α','β','γ','δ','ε','ζ','η','θ','ι','κ','λ','μ','ν','ξ','ο','π','ρ','ς','σ','τ','υ','φ','χ','ψ','ω','ϑ','ϒ','ϖ','•','…','′','″','‾','⁄','℘','ℑ','ℜ','™','ℵ','←','↑','→','↓','↔','↵','⇐','⇑','⇒','⇓','⇔','∀','∂','∃','∅','∇','∈','∉','∋','∏','∑','−','∗','√','∝','∞','∠','∧','∨','∩','∪','∫','∴','∼','≅','≈','≠','≡','≤','≥','⊂','⊃','⊄','⊆','⊇','⊕','⊗','⊥','⋅','⌈','⌉','⌊','⌋','⟨','⟩','◊','♠','♣','♥','♦');
var arr2 = new Array(' ','¡','¢','£','¤','¥','¦','§','¨','©','ª','«','¬','­','®','¯','°','±','²','³','´','µ','¶','·','¸','¹','º','»','¼','½','¾','¿','À','Á','Â','Ã','Ä','Å','Æ','Ç','È','É','Ê','Ë','Ì','Í','Î','Ï','Ð','Ñ','Ò','Ó','Ô','Õ','Ö','×','Ø','Ù','Ú','Û','Ü','Ý','Þ','ß','à','á','â','ã','ä','å','æ','ç','è','é','ê','ë','ì','í','î','ï','ð','ñ','ò','ó','ô','õ','ö','÷','ø','ù','ú','û','ü','ý','þ','ÿ','"','&','<','>','Œ','œ','Š','š','Ÿ','ˆ','˜',' ',' ',' ','‌','‍','‎','‏','–','—','‘','’','‚','“','”','„','†','‡','‰','‹','›','€','ƒ','Α','Β','Γ','Δ','Ε','Ζ','Η','Θ','Ι','Κ','Λ','Μ','Ν','Ξ','Ο','Π','Ρ','Σ','Τ','Υ','Φ','Χ','Ψ','Ω','α','β','γ','δ','ε','ζ','η','θ','ι','κ','λ','μ','ν','ξ','ο','π','ρ','ς','σ','τ','υ','φ','χ','ψ','ω','ϑ','ϒ','ϖ','•','…','′','″','‾','⁄','℘','ℑ','ℜ','™','ℵ','←','↑','→','↓','↔','↵','⇐','⇑','⇒','⇓','⇔','∀','∂','∃','∅','∇','∈','∉','∋','∏','∑','−','∗','√','∝','∞','∠','∧','∨','∩','∪','∫','∴','∼','≅','≈','≠','≡','≤','≥','⊂','⊃','⊄','⊆','⊇','⊕','⊗','⊥','⋅','⌈','⌉','⌊','⌋','〈','〉','◊','♠','♣','♥','♦');
return swapArrayVals(s, arr1, arr2);
};
var c,m,d = s.replace(/(<([^>]+)>)/ig,"");
if (isEmpty(d)) return "";
// convert HTML entites back to numerical entites first
d = HTML2Numerical(d);
// look for numerical entities "
var arr=d.match(/&#[0-9]{1,5};/g);
// if no matches found in string then skip
if (arr != null) {
for (var x=0; x<arr.length; x++) {
m = arr[x];
c = m.substring(2, m.length-1); //get numeric part which is refernce to unicode character
// if its a valid number we can decode
if(c >= -32768 && c <= 65535){
// decode every single match within string
d = d.replace(m, String.fromCharCode(c));
}else{
d = d.replace(m, ""); //invalid so replace with nada
}
}
};
return d;
}
function jsTabSheets(){
this.tabs = [];
this.sheets = null;
this.currentTab = 0;
}
jsTabSheets.prototype = {
selectTab: function(idx){
this.tabs[this.currentTab].className = "tab";
this.sheets[this.currentTab].style.display = "none";
this.currentTab = idx;
this.tabs[idx].className = "tab-current";
this.sheets[idx].style.display = "block";
},
init: function(tabsheet){
var self = this;
var tabs = document.createElement("ul");
tabs.className = "tabs";
tabsheet.parentNode.insertBefore(tabs, tabsheet);
this.sheets = getChildNodes(tabsheet, "li");
for (var i=0; i<this.sheets.length; i++) {
this.sheets[i].style.display = "none";
var tab = document.createElement("li");
tab.className = "tab";
tab.tabid = i;
tab.onmousedown = function(ev) {
self.selectTab(this.tabid);
if ((ev) && (ev.stopPropagation)){
ev.stopPropagation();
}
};
if (this.sheets[i].className=="sheet current") this.currentTab = i;
var tabName = getElementsByClassName("sheet-header", "*", this.sheets[i]);
if (document.createTextNode) {
tab.appendChild(document.createTextNode(htmlDecode(tabName[0].innerHTML)));
} else {
tab.innerHTML = tabName[0].innerHTML.replace(/(<([^>]+)>)/ig,"");
};
tabName[0].style.display = "none";
tabs.appendChild(tab);
this.tabs.push(tab);
};
this.selectTab(this.currentTab);
}
}
function initTabsheets() {
var tabSheetList = getElementsByClassName("tabsheets", "ul");
for (var i=0; i<tabSheetList.length; i++) {
var tabSheets = new jsTabSheets();
tabSheets.init(tabSheetList[i]);
}
}
if (window.addEventListener) {
window.addEventListener('load', function(event) {initTabsheets();});
} else if (window.attachEvent) {
window.attachEvent('onload', function(event) {initTabsheets();});
} else {
window['onload'] = function(event) {initTabsheets();};
}Stylesheet:
.tabs, .tabsheets {
position: relative;
margin: 0;
padding: 0;
list-style: none;
list-style-image: none;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tabs {
background-color: #fcfbf9;
z-index: 10;
}
.tab, .tab-current {
position: relative;
margin: 0;
padding: 0;
float: left;
display: block;
cursor: pointer;
color: #626B71;
font-size: 13px;
font-weight: bold;
border: 1px solid #C8CED0;
border-bottom: none;
-moz-border-radius: 4px 4px 0px 0px;
-webkit-border-radius: 4px 4px 0px 0px;
-o-border-radius: 4px 4px 0px 0px;
border-radius: 4px 4px 0px 0px;
}
.tab {
padding: 3px 25px 2px 25px;
top: 2px;
z-index: 1;
}
.tab:hover {
background-color: #EFF1F1;
}
.tab-current {
padding: 4px 25px 3px 25px;
top: 1px;
z-index: 10;
background-color: #FCFCFC;
}
.tabsheets {
margin: 0;
padding: 0 0 37px 0;
z-index: 2;
clear: both;
}
.tabsheets .sheet {
margin: 0;
padding: 10px 10px 10px 10px;
z-index: 3;
border: 1px solid #C8CED0;
background-image: -moz-linear-gradient(top, #fcfcfc 91%, #ededed 100%);
-moz-border-radius: 0 5px 5px 5px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(91%, #fcfcfc), to(#ededed));
background-image: -webkit-linear-gradient(top, #fcfcfc 91%, #ededed 100%);
-webkit-border-radius: 0 5px 5px 5px;
background-image: -o-linear-gradient(top, #fcfcfc 91%, #ededed 100%);
-o-border-radius: 0 5px 5px 5px;
background-image: -ms-linear-gradient(top, #fcfcfc 91%, #ededed 100%);
-ms-border-radius: 0 5px 5px 5px;
background-image: linear-gradient(to bottom, #fcfcfc 91%, #ededed 100%);
border-radius: 0 5px 5px 5px;
}
.tabsheets .sheet .sheet-header {
padding: 3px 25px 3px 25px;
background-image: -moz-linear-gradient(top, #fcfcfc 11%, #ededed 100%);
-moz-border-radius: 0 5px 5px 5px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(11%, #fcfcfc), to(#ededed));
background-image: -webkit-linear-gradient(top, #fcfcfc 11%, #ededed 100%);
-webkit-border-radius: 0 5px 5px 5px;
background-image: -o-linear-gradient(top, #fcfcfc 11%, #ededed 100%);
-o-border-radius: 0 5px 5px 5px;
background-image: -ms-linear-gradient(top, #fcfcfc 11%, #ededed 100%);
-ms-border-radius: 0 5px 5px 5px;
background-image: linear-gradient(to bottom, #fcfcfc 11%, #ededed 100%);
border-radius: 0 5px 5px 5px;
}
share it: Google +1TwitterFacebookXing