Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

Another XP style panel bar for Web

, 16 Aug 2005
XP style panel bar for Web applications.
xppanelbar.zip
Css
Images
BlueCollapse.gif
BlueExpand.gif
ClassicCollapse.gif
ClassicExpand.gif
CPCollapse.gif
CPExpand.gif
Home.gif
lgren031.jpg
lgren072.jpg
marb028.jpg
OliveCollapse.gif
OliveExpand.gif
paper003.jpg
paper005.gif
SilverCollapse.gif
SilverExpand.gif
ss018.jpg
ss206.gif
VStudio.gif
VStudio.png
Js
/*------------------------------------------------------------------------------
 * FILE    : PanelBar.js
 * PURPOSE : Render Panelbar like cross-browser DHTML control.
 * REQUIRES: JavaScript 1.3, IE 6.0, FireFox 1.0
 * AUTHOR  : Khan Information Systems (KIS)
 *------------------------------------------------------------------------------
 * Copyright (c) 2005. Khan Information Systems. All Rights Reserved
 * The contents of this file are subject to the KIS Public License 1.0
 * (the "License"); you may not use this file except in compliance with the 
 * License. You should have received a copy of the KIS Public License along with 
 * this library; if not, please ask your software vendor to provide one.
 * 
 * YOU AGREE THAT THE PROGRAM IS PROVIDED AS-IS, WITHOUT WARRANTY OF ANY KIND
 * (EITHER EXPRESS OR IMPLIED) INCLUDING, WITHOUT LIMITATION, ANY IMPLIED 
 * WARRANTY OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, AND ANY 
 * WARRANTY OF NON INFRINGEMENT. IN NO EVENT SHALL THE CONTRIBUTORS BE LIABLE FOR
 * ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 
 * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE 
 * PROGRAM, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 *
 * See the License for the specific language governing rights and limitations 
 * under the License.
 -----------------------------------------------------------------------------*/
TARGET_OTHER = 0; TARGET_BLANK = 1; TARGET_SELF = 2; TARGET_PARENT = 3; TARGET_TOP = 4; BROWSER_IE = 1; BROWSER_GECKO = 2; BROWSER_OTHER = -1; var x1123687333468 = ""; var x1123687333469 = 0; var x1123687333470 = false; var x1123687333471 = "css"; var x1123687333472 = "XPBlue.css"; var x1123687333473 = "Images"; var x1123687333474 = -1; var x1123687333475 = ""; function x1123687333476() { this.id = 0; this.x1123687333477 = 0; this.x1123687333478 = new Array; this.x1123687333479 = x1123687333479; this.x1123687333480 = x1123687333534; } function x1123687333481(x1123687333482, x1123687333483, x1123687333484) { this.id = ""; this.x1123687333485 = 0; this.x1123687333486 = x1123687333482; this.x1123687333487 = x1123687333483; this.x1123687333488 = true; this.x1123687333489 = false; this.x1123687333490 = new Array; this.x1123687333491 = 0; this.x1123687333492 = x1123687333484; this.x1123687333493 = x1123687333493; this.x1123687333480 = x1123687333506; } function x1123687333494(x1123687333482, x1123687333495, x1123687333496, x1123687333483, x1123687333497, x1123687333498) { this.x1123687333485 = ""; this.x1123687333486 = x1123687333482; this.x1123687333499 = x1123687333495; this.x1123687333500 = x1123687333498; this.x1123687333501 = x1123687333496; this.x1123687333487 = x1123687333483; this.x1123687333488 = false; this.x1123687333502 = false; this.x1123687333503 = x1123687333497; this.x1123687333480 = x1123687333511; } function x1123687333479(x1123687333482, x1123687333483, x1123687333484) { var x1123687333504; x1123687333504 = new x1123687333481(x1123687333482, x1123687333483, x1123687333484); x1123687333504.id = this.x1123687333477; x1123687333504.x1123687333485 = this.id; this.x1123687333478[this.x1123687333477] = x1123687333504; this.x1123687333477++; return x1123687333504; } function x1123687333493(x1123687333482, x1123687333495, x1123687333496, x1123687333483, x1123687333497, x1123687333498) { var x1123687333505; x1123687333505 = new x1123687333494(x1123687333482, x1123687333495, x1123687333496, x1123687333483, x1123687333497, x1123687333498); x1123687333505.x1123687333485 = this.id; this.x1123687333490[this.x1123687333491] = x1123687333505; this.x1123687333491++; } function x1123687333506() { var x1123687333507 = 0; var x1123687333508; var x1123687333509, x1123687333510; document.write("<div class=\"menuHeaderCollapsed\" id=\"mnu_" + this.x1123687333485 + "_" + this.id + "\"" + " onmouseover=\"x1123687333517(this)\"" + " onmouseout=\"x1123687333520(this)\"" + "onclick=\"x1123687333521(this)\">"); document.write("<table border=\"0\" cellspacing=\"0\"" + " cellpadding=\"4\" width=\"100%\">"); document.write("<tr><td style=\"vertical-align: center;\">" + this.x1123687333486 + "</td></tr>"); document.write("</table></div>"); document.write("<div style=\"display: none; visibility: hidden;\"" + " class=\"menuItems\" id=\"mnu_" + this.x1123687333485 + "_" + this.id + "_child" + "\">"); if (this.x1123687333492 != null) { document.write("<table border=\"0\" cellspacing=\"2\"" + " cellpadding=\"4\" width=\"100%\" style=\"" + "background-image: url('" + x1123687333473 + "/" + this.x1123687333492 + "');\">"); } else document.write("<table border=\"0\" cellspacing=\"2\"" + " cellpadding=\"4\" width=\"100%\">"); for (x1123687333507 = 0; x1123687333507 < this.x1123687333491; x1123687333507++) { this.x1123687333490[x1123687333507].x1123687333480(); } document.write("</table></div>"); document.write ("<span style=\"DISPLAY: block\">&nbsp;</span>"); } function x1123687333511() { var x1123687333512 = ""; document.write("<tr><td>"); if (this.x1123687333503) x1123687333512 = "<img src=\"" + x1123687333475 + x1123687333473 + "/" + this.x1123687333503 + "\" border=\"0\"\">&nbsp;"; document.write("<a href=" + x1123687333513(this.x1123687333500, (x1123687333475 + this.x1123687333499), this.x1123687333501) + "\">"); document.write(x1123687333512); document.write(this.x1123687333486); document.write("</a>"); document.write("</td></tr>"); } function x1123687333513(x1123687333514, x1123687333495, x1123687333496) { var x1123687333515 = ""; var x1123687333516; x1123687333516 = x1123687333495; if (x1123687333496 != null) x1123687333516 = x1123687333495 + "?" + x1123687333496; if (x1123687333514 == TARGET_BLANK) x1123687333515 = "\"" + x1123687333516 + "\" TARGET=\"_blank\""; else if (x1123687333514 == TARGET_SELF) x1123687333515 = "\"" + x1123687333516 + "\" TARGET=\"_self\""; else if (x1123687333514 == TARGET_PARENT) x1123687333515 = "\"" + x1123687333516 + "\" TARGET=\"_parent\""; else if (x1123687333514 == TARGET_TOP) x1123687333515 = "\"" + x1123687333516 + "\" TARGET=\"_top\""; else if (x1123687333514 != null) x1123687333515 = "\"" + x1123687333516 + "\" TARGET=\"" + x1123687333514 + "\""; else x1123687333515 = "\"" + x1123687333516 + "\""; return x1123687333515; } function x1123687333517(x1123687333518) { var x1123687333519 = x1123687333518.className; if (x1123687333519 == "menuHeaderExpanded") x1123687333518.className = "menuHeaderExpandedOver"; else x1123687333518.className = "menuHeaderCollapsedOver"; } function x1123687333520(x1123687333518) { var x1123687333519 = x1123687333518.className; if (x1123687333519 == "menuHeaderExpandedOver") x1123687333518.className = "menuHeaderExpanded"; else x1123687333518.className = "menuHeaderCollapsed"; } function x1123687333521(x1123687333518) { var x1123687333519 = x1123687333518.className; var x1123687333509 = x1123687333518.id; var x1123687333505, x1123687333522; if (x1123687333518.id != x1123687333468) x1123687333505 = document.getElementById(x1123687333468); if (x1123687333505) { x1123687333505.className = "menuHeaderCollapsed"; x1123687333522 = document.getElementById(x1123687333468 + "_child"); x1123687333522.style.visibility = "hidden"; x1123687333522.style.display = "none"; } x1123687333522 = document.getElementById(x1123687333509 + "_child"); if (x1123687333522.style.visibility == "hidden") { x1123687333518.className = "menuHeaderExpandedOver"; x1123687333522.style.visibility = "visible"; x1123687333522.style.display = "block"; } else { x1123687333518.className = "menuHeaderCollapsedOver"; x1123687333522.style.visibility = "hidden"; x1123687333522.style.display = "none"; } x1123687333468 = x1123687333518.id; } function x1123687333523() { switch(navigator.family) { case 'ie4': x1123687333474 = BROWSER_IE; break; case 'gecko': x1123687333474 = BROWSER_GECKO; break; default: x1123687333474 = BROWSER_OTHER; break; } } function x1123687333524() { var x1123687333525, x1123687333526, x1123687333527; var x1123687333528, x1123687333529, x1123687333530; var x1123687333531; var x1123687333532, x1123687333533; x1123687333525 = window.location.protocol; if (x1123687333525.indexOf("http") != -1) { x1123687333526 = window.location.hostname; x1123687333527 = window.location.pathname; x1123687333528 = window.location.port; x1123687333529 = window.location.href; x1123687333530 = x1123687333525 + "/" + "/" + x1123687333526 + ":" + x1123687333528; x1123687333532 = x1123687333530.length; x1123687333531 = x1123687333529.substr(x1123687333532 + 1); x1123687333533 = x1123687333531.indexOf("/"); x1123687333475 = x1123687333531.substr(0, x1123687333533); if (x1123687333475.length > 0) x1123687333475 = "/" + x1123687333475 + "/"; } } function x1123687333534(x1123687333535) { var x1123687333507 = 0; var x1123687333536 = "\x4B\x68\x61\x6E\x20\x49\x6E\x66\x6F\x72"; var x1123687333537 = "\x6D\x61\x74\x69\x6F\x6E\x20\x53\x79\x73\x74\x65\x6D\x73"; for (x1123687333507 = 0; x1123687333507 < this.x1123687333477; x1123687333507++) { document.write("<div id=\"panelBar\" style=\"width: " + x1123687333535 + "\">"); this.x1123687333478[x1123687333507].x1123687333480(); document.write("</div></center>"); } } function x1123687333538() { var x1123687333539; x1123687333539 = new x1123687333476(); x1123687333539.id = x1123687333469; x1123687333469++; return x1123687333539; } function x1123687333540(x1123687333541, x1123687333542, x1123687333543) { if (x1123687333541 != null) x1123687333472 = x1123687333541; if (x1123687333542 != null) x1123687333471 = x1123687333542; if (x1123687333543 != null) x1123687333473 = x1123687333543; if (!x1123687333470) { document.write("<link href=\"" + x1123687333471 + "/" + x1123687333472 + "\"" + " rel=\"stylesheet\" type=\"text/css\">"); _themSet = true;}}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Prasad Khandekar
Software Developer (Senior) Freelancer
India India
I am a software professional with over 20 years of commercial business applications design and development experience.
 
My programming experience includes Java, Spring, .NET, Classic VB & ASP, Scripting, Power Builder, PHP, Magic & far far ago FoxPro, C, Assembly and COBOL.
 
From last 11 years I am mostly working with Java Technology. I am currently available to take up new assignments.

| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 17 Aug 2005
Article Copyright 2005 by Prasad Khandekar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid