xcpweb

changeset 5:3029bf4a2887

Tabs Design
author Nikola Nikov <nikolanikov@webconnect.bg>
date Mon Jun 07 10:44:31 2010 +0300 (2010-06-07)
parents 1c27514d61a1
children fa572caf2edc
files interface/img/tabs/active-gradient.jpg interface/img/tabs/border.png interface/img/tabs/ico-close.jpg interface/img/tabs/unactive-gradient-hover.jpg interface/img/tabs/unactive-gradient.jpg interface/menu_tmpl.html interface/tabs.css interface/tabs.js interface/tabs_tmpl.html
line diff
     1.1 Binary file interface/img/tabs/active-gradient.jpg has changed
     2.1 Binary file interface/img/tabs/border.png has changed
     3.1 Binary file interface/img/tabs/ico-close.jpg has changed
     4.1 Binary file interface/img/tabs/unactive-gradient-hover.jpg has changed
     5.1 Binary file interface/img/tabs/unactive-gradient.jpg has changed
     6.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     6.2 +++ b/interface/menu_tmpl.html	Mon Jun 07 10:44:31 2010 +0300
     6.3 @@ -0,0 +1,35 @@
     6.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     6.5 +<html xmlns="http://www.w3.org/1999/xhtml">
     6.6 +<head>
     6.7 +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     6.8 +<title>XCP web interface submenu test</title>
     6.9 +<link href="rightmenu.css" rel="stylesheet" type="text/css" />
    6.10 +<script type="Text/JavaScript" Language="JavaScript" src="rightmenu.js"></script>
    6.11 +<style media="all" type="text/css">
    6.12 +.more-info {display:none}
    6.13 +</style>
    6.14 +<script type="text/javascript" language="javascript">
    6.15 +var param;
    6.16 +function createMenu(param,e) {
    6.17 +	if (xcp_menu.getMenu(param)) { xcp_menu.dropMenu(param); }
    6.18 +	var currentMenu = xcp_menu.createMenu(param);
    6.19 +	if (typeof(currentMenu) == 'object') {
    6.20 +		xcp_menu.appendInMenu(currentMenu,'item1','Item 1',"alert('Item 1')",'/interface/img/ico-arrow-right.png');
    6.21 +		xcp_menu.appendInMenu(currentMenu,'item2','Item 2',"alert('Item 2');",'/interface/img/ico-arrow-right.png');
    6.22 +		var subcurrent = xcp_menu.appendSubInMenu(currentMenu,'sub1','Sub1','/interface/img/ico-arrow-right.png');
    6.23 +		if (typeof(subcurrent) == 'object') {
    6.24 +			xcp_menu.appendInMenu(subcurrent,'submenu1','Sub Menu 1',"alert('Sub Menu 1')",'/interface/img/ico-arrow-right.png');
    6.25 +		}
    6.26 +		xcp_menu.appendInMenu(currentMenu,'item3','Item 3',"alert('item3');",'/interface/img/ico-arrow-right.png');
    6.27 +		xcp_menu.appendInMenu(currentMenu,'item4','Item 4',"alert('item4')",'/interface/img/ico-arrow-right.png');
    6.28 +		xcp_menu.openRightMenu('menu_'+param,e);
    6.29 +	}
    6.30 +}
    6.31 +</script>
    6.32 +</head>
    6.33 +<body>
    6.34 +<a href="#" onclick="createMenu('current_prv',event);">test menu</a>
    6.35 +<div id="otherPages"></div>
    6.36 +<div id="submenus"></div>
    6.37 +</body>
    6.38 +</html>
    6.39 \ No newline at end of file
     7.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     7.2 +++ b/interface/tabs.css	Mon Jun 07 10:44:31 2010 +0300
     7.3 @@ -0,0 +1,105 @@
     7.4 +table.tabs {
     7.5 +	height:24px;
     7.6 +	padding:0;
     7.7 +	border:0;
     7.8 +}
     7.9 +table.tabs td {
    7.10 +	min-width:30px;
    7.11 +	border:0;
    7.12 +	padding:0;
    7.13 +	padding-top:0px;
    7.14 +	width:auto;
    7.15 +}
    7.16 +table.tabs td .tabBg {
    7.17 +	float:left;
    7.18 +	margin-top:5px;
    7.19 +	border:1px solid #867878;
    7.20 + 	min-width:30px;
    7.21 +	font-size:12px;
    7.22 +	border-right:0;
    7.23 +	height:15px;
    7.24 +	padding:0;
    7.25 +	padding-top:3px;
    7.26 +	padding-left:5px;
    7.27 +	padding-right:5px;
    7.28 +	background-color:#EEEAEB;
    7.29 +	background-image:url('img/tabs/unactive-gradient.jpg');
    7.30 +	background-repeat:repeat-x;
    7.31 +	background-position:left top;
    7.32 +	color:#8B7F7F;
    7.33 +	border-left:1px solid #000000;
    7.34 +	overflow:hidden;
    7.35 +	position:relative;
    7.36 +}
    7.37 +table.tabs td .tabBg span.tabClose {
    7.38 +	position:absolute;
    7.39 +	top:0px;
    7.40 +	right:0px;
    7.41 +	display:none;
    7.42 +}
    7.43 +table.tabs td .tabBg:hover  span.tabClose {
    7.44 +	display:block;
    7.45 +	position:absolute;
    7.46 +	top:0px;
    7.47 +	right:0px;
    7.48 +}
    7.49 +table.tabs td .tabBg a {
    7.50 +	height:100%;
    7.51 +	text-decoration:none;
    7.52 +	cursor:pointer;
    7.53 +}
    7.54 +table.tabs td.activeTab {
    7.55 +	background-image:url('img/tabs/border.png');
    7.56 +	background-repeat:no-repeat;
    7.57 +	background-position:bottom right;
    7.58 +	padding-right:4px;
    7.59 +}
    7.60 +table.tabs td.activeTab .tabBg {
    7.61 +	border:1px solid #867878;
    7.62 + 	min-width:30px;
    7.63 +	font-size:12px;
    7.64 +	height:16px;
    7.65 +	padding:0;
    7.66 +	padding-top:7px;
    7.67 +	padding-left:12px;
    7.68 +	padding-right:12px;
    7.69 +	font-weight:bold;
    7.70 +	background-color:#f3f3f3;
    7.71 +	background-image:url('img/tabs/active-gradient.jpg');
    7.72 +	background-repeat:repeat-x;
    7.73 +	background-position:left top;
    7.74 +	border-bottom:1px solid #f3f3f3;
    7.75 +	margin-top:0px;
    7.76 +	text-align:center;
    7.77 +	color:#4E4747;
    7.78 +	border-left:1px solid #000000;
    7.79 +}
    7.80 +table.tabs td.singleTab .active {
    7.81 +	padding-right:13px;
    7.82 +}
    7.83 +table.tabs td.singleTab:hover .tabBg {
    7.84 +	color: #5c5e5d;
    7.85 +	background-color:#EEEAEB;
    7.86 +	background-image:url('img/tabs/unactive-gradient-hover.jpg');
    7.87 +	background-repeat:repeat-x;
    7.88 +	background-position:left top;
    7.89 +}
    7.90 +.tabs .singleTab:last-child .tabBg {
    7.91 +	border-right:1px solid #867878;
    7.92 +}
    7.93 +.tabs .activeTab:first-child .tabBg {
    7.94 +	border-left:1px solid #867878;
    7.95 +}
    7.96 +.tabs .singleTab:first-child .tabBg {
    7.97 +	border-left:1px solid #867878;
    7.98 +}
    7.99 +.tabs div { cursor:pointer; }
   7.100 +.tabContent {
   7.101 +	border:1px solid #867878;
   7.102 +	background-color:#f3f3f3;
   7.103 +	min-width:400px;
   7.104 +	min-height:100px;
   7.105 +	height:auto;
   7.106 +	float:left;
   7.107 +	margin-top:-1px;
   7.108 +}
   7.109 \ No newline at end of file
     8.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     8.2 +++ b/interface/tabs.js	Mon Jun 07 10:44:31 2010 +0300
     8.3 @@ -0,0 +1,56 @@
     8.4 +function FileTabs() {
     8.5 +	var self = this;
     8.6 +	var tempTab = false;
     8.7 +	this.clear = function() { tempTab = true; }
     8.8 +	this.construct = function(tabId) {
     8.9 +		var tbl = document.createElement('TABLE');
    8.10 +		tbl.className = 'tabs';
    8.11 +		tbl.setAttribute('tabList','yes');
    8.12 +		tbl.setAttribute('id',tabId);
    8.13 +		tbl.setAttribute('cellpadding',0);
    8.14 +		tbl.setAttribute('cellspacing',0);
    8.15 +		tbl.insertRow(0);
    8.16 +		tempTab = tbl;
    8.17 +		return tempTab;
    8.18 +	}
    8.19 +	this.getTr = function(param) { return param ? param.rows[0] : false; }
    8.20 +	this.getDom = function() { return tempTab; }
    8.21 +	this.append = function(tabAlias,tabName,onclickEvent,temp) {
    8.22 +		if (!temp) { temp = tempTab; }
    8.23 +		var tr = self.getTr(temp);
    8.24 +		var cl = tr.insertCell(tr.cells.length);
    8.25 +		var div = document.createElement('DIV');
    8.26 +		div.className = 'tabBg';
    8.27 +		cl.appendChild(div);
    8.28 +		cl.setAttribute('nowrap','nowrap');
    8.29 +		cl.setAttribute('tabAlias',tabAlias);
    8.30 +		var a = document.createElement('A');
    8.31 +		a.onclick = function() {
    8.32 +			tabs.activate(this.parentNode.parentNode);
    8.33 +			onclickEvent();
    8.34 +		}
    8.35 +		a.appendChild(document.createTextNode(tabName));
    8.36 +		div.appendChild(a);
    8.37 +		tempTab = temp;
    8.38 +		return tempTab;
    8.39 +	}
    8.40 +	this.activate = function(param) {
    8.41 +		var tr = param;
    8.42 +		while (tr = tr.parentNode) {
    8.43 +			if (tr.tagName == 'TR') { break; }
    8.44 +		}
    8.45 +		for (var i=0,len=tr.cells.length;i<len;i++) { tr.cells[i].className = 'singleTab'; }
    8.46 +		param.className = 'activeTab';
    8.47 +	}
    8.48 +	this.activateByAlias = function(alias,temp) {
    8.49 +		if (!temp) { return false; }
    8.50 +		var tr = self.getTr(temp);
    8.51 +		for (var i=0,len=tr.cells.length;i<len;i++) {
    8.52 +			if (tr.cells[i].getAttribute('tabAlias') == alias) {
    8.53 +				tr.cells[i].className = 'activeTab';
    8.54 +			}
    8.55 +			else { tr.cells[i].className = 'singleTab'; }
    8.56 +		}
    8.57 +	}
    8.58 +}
    8.59 +var tabs = new FileTabs();
    8.60 \ No newline at end of file
     9.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     9.2 +++ b/interface/tabs_tmpl.html	Mon Jun 07 10:44:31 2010 +0300
     9.3 @@ -0,0 +1,35 @@
     9.4 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     9.5 +<html xmlns="http://www.w3.org/1999/xhtml">
     9.6 +<head>
     9.7 +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     9.8 +<title>XCP web interface tabs test</title>
     9.9 +<link href="tabs.css" rel="stylesheet" type="text/css" />
    9.10 +<script type="Text/JavaScript" Language="JavaScript" src="tabs.js"></script>
    9.11 +<script type="text/javascript" language="javascript">
    9.12 +function testTabs() {
    9.13 +	tabs.construct('testtab');
    9.14 +	tabs.append('name','name of the tab',function() { myFunc(1); });
    9.15 +	tabs.append('name2','name2 of the tab',function() { myFunc(2); });
    9.16 +	tabs.activateByAlias('name',tabs.getDom());
    9.17 +	document.getElementById('tabDiv').appendChild(tabs.getDom());
    9.18 +	var cnt = document.createElement('DIV');
    9.19 +	cnt.setAttribute('id','tabContent');
    9.20 +	cnt.className = 'tabContent';
    9.21 +	document.getElementById('tabDiv').appendChild(cnt);
    9.22 +	tabs.clear();
    9.23 +}
    9.24 +function myFunc(param) {
    9.25 +	document.getElementById('tabContent').innerHTML = param;
    9.26 +}
    9.27 +</script>
    9.28 +<style>
    9.29 +#tabDiv {
    9.30 +	width:auto;
    9.31 +	text-align:left;
    9.32 +}
    9.33 +</style>
    9.34 +</head>
    9.35 +<body onload="testTabs();">
    9.36 +<div id="tabDiv"></div>
    9.37 +</body>
    9.38 +</html>
    9.39 \ No newline at end of file