From 48bad81158bbc70f291cfd23b23e1a6a49ab26dd Mon Sep 17 00:00:00 2001 From: Thierry Parmentelat Date: Tue, 20 Jan 2009 09:27:23 +0000 Subject: [PATCH] minitabs reimplemented with forms, now support POSTing --- planetlab/includes/plc_minitabs.php | 35 +++++++++- planetlab/minitabs/minitabs.css | 101 +++++++++++++++------------- planetlab/minitabs/minitabs.js | 20 ++++-- 3 files changed, 102 insertions(+), 54 deletions(-) diff --git a/planetlab/includes/plc_minitabs.php b/planetlab/includes/plc_minitabs.php index 00cb870..8cdaf71 100644 --- a/planetlab/includes/plc_minitabs.php +++ b/planetlab/includes/plc_minitabs.php @@ -7,13 +7,42 @@ drupal_set_html_head(' '); +// the expected argument is an (ordered) associative array +// ( label => todo , ...) +// label is expected to be the string to display in the menu +// todo can be either +// (*) a string : it is then taken to be a URL to move to +// (*) or an associative array with the following keys +// (*) 'method': 'POST' or 'GET' -- default is 'GET' +// (*) 'url': where to go +// (*) 'values': an associative array of (key,value) pairs to send to the URL; values are strings +// (*) 'active': if set, this entry is the default one on startup +// (not supported yet) + + function plc_tabs($array) { print '
'; print ''; print '
'; diff --git a/planetlab/minitabs/minitabs.css b/planetlab/minitabs/minitabs.css index 065cf0d..3abc6c3 100644 --- a/planetlab/minitabs/minitabs.css +++ b/planetlab/minitabs/minitabs.css @@ -1,56 +1,65 @@ -li.minitabs { +#minitabs_container { + padding: 20px; + margin: 8px 0; + width:80%; + margin:8px auto; +} +#miniflex { + width: 100%; + float: left; + font-size: small; /* could be specified at a higher level */ + margin: 0; + padding: 0 10px 0 10px; + border-bottom: 1px solid #696; + position:relative; + z-index:2; +} + +input.minitabs, li.minitabs { font-family: verdana, sans-serif; font-size: 14px; text-align: center; font-style: oblique; + border: 0; + background-color: transparent; } -#minitabs_container { - padding: 20px; - margin: 8px 0; - width:80%; - margin:8px auto; - } -#miniflex { - width: 100%; - float: left; - font-size: small; /* could be specified at a higher level */ - margin: 0; - padding: 0 10px 0 10px; - border-bottom: 1px solid #696; - position:relative; - z-index:2; - } - #miniflex li { - float: left; - margin: 0; - padding: 0 8px 0 8px; - display: inline; - list-style: none; - position:relative; - } + float: left; + margin: 0; + padding: 0 8px 0 8px; + display: inline; + list-style: none; + position:relative; +} -#miniflex a:link, #miniflex a:visited { - float: left; - font-size: 85%; - line-height: 20px; - font-weight: bold; - margin: 0 5px 0 5px; - text-decoration: none; - color: #9c9; - } +#miniflex input.minitabs { + float: left; + font-size: 85%; + line-height: 20px; + font-weight: bold; + margin: 0 5px 0 5px; + text-decoration: none; + /* color when passive */ + color: #9c9; +} -#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover { - border-bottom: 4px solid #696; - padding-bottom: 2px; - color: #696; - } +#miniflex input.active { + border-bottom: 4px solid #696; + padding-bottom: 2px; + /* color when mouse is on button */ + color: #696; +} + +#miniflex input[type=hidden] { + padding-bottom: 0px; +} #animated-tab { - position: absolute; - z-index: 1; - font-size: 85%; - line-height: 20px; - padding-bottom: 2px; - border-bottom: 4px solid #696; - } + position: absolute; + z-index: 1; + font-size: 85%; + line-height: 20px; + padding-bottom: 2px; + border-bottom: 4px solid #696; +} + diff --git a/planetlab/minitabs/minitabs.js b/planetlab/minitabs/minitabs.js index a42823e..74c1999 100644 --- a/planetlab/minitabs/minitabs.js +++ b/planetlab/minitabs/minitabs.js @@ -28,7 +28,8 @@ var miniTab = { miniTab.ul = document.getElementById("miniflex"); miniTab.liArr = miniTab.ul.getElementsByTagName("li"); - miniTab.aArr = miniTab.ul.getElementsByTagName("a"); + // Thierry: the original impl. relied on links rather than forms + miniTab.aArr = miniTab.ul.getElementsByTagName("input"); for(var i = 0, li; li = miniTab.liArr[i]; i++) { li.onmouseover = miniTab.aArr[i].onfocus = function(e) { @@ -52,7 +53,7 @@ var miniTab = { miniTab.activeTab = miniTab.currentTab = i; } a.style.borderBottom = "0px"; - a.style.paddingBottom = "6px"; + /*a.style.paddingBottom = "6px";*/ } miniTab.slideObj = miniTab.ul.parentNode.appendChild(document.createElement("div")); @@ -80,10 +81,19 @@ var miniTab = { miniTab.initAnim(); }, + /* search for input with type != hidden */ + locateSubmitInput: function () { + inputs=miniTab.liArr[miniTab.activeTab].getElementsByTagName("input"); + for(var i=0,input; inputs[i]; i++) { + input=inputs[i]; + if (input.type == "submit") return input; + } + }, + initAnim: function() { - - miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + miniTab.liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + miniTab.ul.offsetLeft); - miniTab.destW = parseInt(miniTab.liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth); + var input=miniTab.locateSubmitInput(); + miniTab.destX = parseInt(miniTab.liArr[miniTab.activeTab].offsetLeft + input.offsetLeft + miniTab.ul.offsetLeft); + miniTab.destW = parseInt(input.offsetWidth); miniTab.t = 0; miniTab.b = miniTab.slideObj.offsetLeft; miniTab.c = miniTab.destX - miniTab.b; -- 2.47.0