# HG changeset patch # User Nikola Nikov # Date 1275896671 -10800 # Node ID 3029bf4a2887b33e4a2c98c08e512343379aba39 # Parent 1c27514d61a19e1a11ccdbea6cea0173ab0d9aea Tabs Design diff -r 1c27514d61a1 -r 3029bf4a2887 interface/img/tabs/active-gradient.jpg Binary file interface/img/tabs/active-gradient.jpg has changed diff -r 1c27514d61a1 -r 3029bf4a2887 interface/img/tabs/border.png Binary file interface/img/tabs/border.png has changed diff -r 1c27514d61a1 -r 3029bf4a2887 interface/img/tabs/ico-close.jpg Binary file interface/img/tabs/ico-close.jpg has changed diff -r 1c27514d61a1 -r 3029bf4a2887 interface/img/tabs/unactive-gradient-hover.jpg Binary file interface/img/tabs/unactive-gradient-hover.jpg has changed diff -r 1c27514d61a1 -r 3029bf4a2887 interface/img/tabs/unactive-gradient.jpg Binary file interface/img/tabs/unactive-gradient.jpg has changed diff -r 1c27514d61a1 -r 3029bf4a2887 interface/menu_tmpl.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/interface/menu_tmpl.html Mon Jun 07 10:44:31 2010 +0300 @@ -0,0 +1,35 @@ + + + + +XCP web interface submenu test + + + + + + +test menu +
+ + + \ No newline at end of file diff -r 1c27514d61a1 -r 3029bf4a2887 interface/tabs.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/interface/tabs.css Mon Jun 07 10:44:31 2010 +0300 @@ -0,0 +1,105 @@ +table.tabs { + height:24px; + padding:0; + border:0; +} +table.tabs td { + min-width:30px; + border:0; + padding:0; + padding-top:0px; + width:auto; +} +table.tabs td .tabBg { + float:left; + margin-top:5px; + border:1px solid #867878; + min-width:30px; + font-size:12px; + border-right:0; + height:15px; + padding:0; + padding-top:3px; + padding-left:5px; + padding-right:5px; + background-color:#EEEAEB; + background-image:url('img/tabs/unactive-gradient.jpg'); + background-repeat:repeat-x; + background-position:left top; + color:#8B7F7F; + border-left:1px solid #000000; + overflow:hidden; + position:relative; +} +table.tabs td .tabBg span.tabClose { + position:absolute; + top:0px; + right:0px; + display:none; +} +table.tabs td .tabBg:hover span.tabClose { + display:block; + position:absolute; + top:0px; + right:0px; +} +table.tabs td .tabBg a { + height:100%; + text-decoration:none; + cursor:pointer; +} +table.tabs td.activeTab { + background-image:url('img/tabs/border.png'); + background-repeat:no-repeat; + background-position:bottom right; + padding-right:4px; +} +table.tabs td.activeTab .tabBg { + border:1px solid #867878; + min-width:30px; + font-size:12px; + height:16px; + padding:0; + padding-top:7px; + padding-left:12px; + padding-right:12px; + font-weight:bold; + background-color:#f3f3f3; + background-image:url('img/tabs/active-gradient.jpg'); + background-repeat:repeat-x; + background-position:left top; + border-bottom:1px solid #f3f3f3; + margin-top:0px; + text-align:center; + color:#4E4747; + border-left:1px solid #000000; +} +table.tabs td.singleTab .active { + padding-right:13px; +} +table.tabs td.singleTab:hover .tabBg { + color: #5c5e5d; + background-color:#EEEAEB; + background-image:url('img/tabs/unactive-gradient-hover.jpg'); + background-repeat:repeat-x; + background-position:left top; +} +.tabs .singleTab:last-child .tabBg { + border-right:1px solid #867878; +} +.tabs .activeTab:first-child .tabBg { + border-left:1px solid #867878; +} +.tabs .singleTab:first-child .tabBg { + border-left:1px solid #867878; +} +.tabs div { cursor:pointer; } +.tabContent { + border:1px solid #867878; + background-color:#f3f3f3; + min-width:400px; + min-height:100px; + height:auto; + float:left; + margin-top:-1px; +} \ No newline at end of file diff -r 1c27514d61a1 -r 3029bf4a2887 interface/tabs.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/interface/tabs.js Mon Jun 07 10:44:31 2010 +0300 @@ -0,0 +1,56 @@ +function FileTabs() { + var self = this; + var tempTab = false; + this.clear = function() { tempTab = true; } + this.construct = function(tabId) { + var tbl = document.createElement('TABLE'); + tbl.className = 'tabs'; + tbl.setAttribute('tabList','yes'); + tbl.setAttribute('id',tabId); + tbl.setAttribute('cellpadding',0); + tbl.setAttribute('cellspacing',0); + tbl.insertRow(0); + tempTab = tbl; + return tempTab; + } + this.getTr = function(param) { return param ? param.rows[0] : false; } + this.getDom = function() { return tempTab; } + this.append = function(tabAlias,tabName,onclickEvent,temp) { + if (!temp) { temp = tempTab; } + var tr = self.getTr(temp); + var cl = tr.insertCell(tr.cells.length); + var div = document.createElement('DIV'); + div.className = 'tabBg'; + cl.appendChild(div); + cl.setAttribute('nowrap','nowrap'); + cl.setAttribute('tabAlias',tabAlias); + var a = document.createElement('A'); + a.onclick = function() { + tabs.activate(this.parentNode.parentNode); + onclickEvent(); + } + a.appendChild(document.createTextNode(tabName)); + div.appendChild(a); + tempTab = temp; + return tempTab; + } + this.activate = function(param) { + var tr = param; + while (tr = tr.parentNode) { + if (tr.tagName == 'TR') { break; } + } + for (var i=0,len=tr.cells.length;i + + + +XCP web interface tabs test + + + + + + +
+ + \ No newline at end of file