prettify

baseline

javascript TabView

Simple TabView with CSS3 and Javascript

TabView.htm

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>TabView</title>
  5.     <link href="reset.css" rel="Stylesheet" type="text/css" />
  6.     <link href="TabView.css" rel="Stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <div id="tab1" class="TabView"
  10. ><ul
  11. ><li data-key="home">Home</li
  12. ><li data-key="downloads">DownLoads</li
  13. ><li data-key="documentation">Documentation</li
  14. ><li data-key="discussions">Discussions</li
  15. ><li data-key="issueTracker">Issue Tracker</li
  16. ><li data-key="sourceCode" class="selected">Source Code</li
  17. ><li data-key="People">People</li
  18. ><li data-key="License">License</li
  19. ></ul
  20. ><div data-key="home">This is Home</div
  21. ><div data-key="downloads">This is DownLoads</div
  22. ><div data-key="documentation">This is Documentation</div
  23. ><div data-key="discussions">This is Discussions</div
  24. ><div data-key="issueTracker">This is Issue Tracker</div
  25. ><div data-key="sourceCode" class="selected">This is Source Code</div
  26. ><div data-key="People">This is People</div
  27. ><div data-key="License">This is License</div
  28. ></div>
  29.     <script src="ins.js" type="text/javascript"></script>
  30.     <script src="TabView.js"  type="text/javascript"></script>
  31. </body>
  32. </html>

TabView.css

  1. .TabView>ul>li {
  2.     background: -ms-linear-gradient(top, #fff, #99c);    
  3.     background: -moz-linear-gradient(top, #fff, #99c);    
  4.     background: -webkit-linear-gradient(top, #fff, #99c);    
  5.     background: -o-linear-gradient(top, #fff, #99c);    
  6. }
  7. .TabView>ul>li.selected {
  8.     background: -ms-linear-gradient(top, #69c, #369);    
  9.     background: -moz-linear-gradient(top, #69c, #369);    
  10.     background: -webkit-linear-gradient(top, #69c, #369);    
  11.     background: -o-linear-gradient(top, #69c, #369);    
  12. }
  13. /*******************************************/
  14. .TabView {
  15.     padding:.5em;
  16. }
  17. .TabView>ul {
  18.     border:0;
  19.     border-bottom:5px solid #369;
  20.     padding:0;
  21.     margin:0;
  22.     font-size:.7em;
  23.     white-space:nowrap;
  24. }
  25. .TabView>ul>li {
  26.     display:inline-block;
  27.     border:1px solid #369;
  28.     background-color:#eee;
  29.     padding:.5em;
  30.     margin-right:.3em;
  31.     border-top-left-radius: .7em;
  32.     border-top-right-radius: .7em;
  33.     box-shadow:.1em .3em .2em #369;
  34.     text-shadow: -1px -1px 1px #fff;
  35.     cursor:pointer;
  36.     background: linear-gradient(top, #fff, #99c);    
  37. }
  38. .TabView>ul>li.selected {
  39.     cursor:auto;
  40.     color:#eee;
  41.     background-color:#369;
  42.     background: linear-gradient(top, #69c, #369);    
  43.     text-shadow: 1px 1px 2px #000;
  44. }
  45. .TabView>ul>li.selected:active {
  46.     position:static; 
  47. }
  48. .TabView>ul>li:active {
  49.     position:relative;
  50.     top:1px;
  51.     left:1px;
  52.     text-shadow: 1px 1px 1px #fff;
  53. }
  54. .TabView>div {
  55.     display:none;
  56.     border:1px solid #369;
  57.     padding:.5em;
  58. }
  59. .TabView>div.selected {
  60.     display:block;
  61. }

TabView.js

  1. window.onload = function () {
  2.     oTab = new ins.TabView($("tab1"));
  3.     oTab.onTabChanged = function (sKey) {
  4.         alert(sKey);
  5.     }
  6. };
  7. ins.TabView = function (oDiv) {
  8.     var that = this;
  9.     this.oDiv = oDiv;
  10.     this.onTabChanged;

  12.     this.oDiv.onclick = function (e) {
  13.         if (!e) var e = window.event
  14.         that.SelectionChange(e);
  15.     }
  16. }
  17. ins.TabView.prototype.Unload = function () {
  18.     this.oDiv = null;
  19. };
  20. ins.TabView.prototype.SelectPage = function (sKey) {
  21.     var oLI, oChild, sNew = "";
  22.     for (var nPos = 0; nPos < this.oDiv.childNodes.length; nPos++) {
  23.         oChild = this.oDiv.childNodes[nPos];
  24.         if (oChild.nodeName.toLowerCase() === "div") {
  25.             if (oChild.getAttribute("data-key") === sKey) {
  26.                 oChild.className = "selected";
  27.             } else {
  28.                 oChild.removeAttribute("class");
  29.             }
  30.         } else if (oChild.nodeName.toLowerCase() === "ul") {
  31.             for (var nLI = 0; nLI < oChild.childNodes.length; nLI++) {
  32.                 oLI = oChild.childNodes[nLI];
  33.                 if (oLI.getAttribute("data-key") === sKey) {
  34.                     oLI.className = "selected";
  35.                 } else {
  36.                     oLI.className = "";
  37.                 }
  38.             }
  39.         }

  41.     }
  42.     if (typeof this.onTabChanged === "function") { this.onTabChanged(sKey) }
  43.     oLI = oChild = null;
  44. };
  45. ins.TabView.prototype.SelectionChange = function (evt) {
  46.     var elem = (evt.target) ? evt.target : evt.srcElement;
  47.     this.SelectPage(elem.getAttribute("data-key"));
  48. };
You may need reset.css & ins.js
at 9/12/2010 07:33:00 PM
Labels:

2 comments:

  1. dev20 October, 2011 05:10

    Hey, No working.~~~~~
    ^
    ^ ^

    ReplyDelete
  2. pavlos20 October, 2011 12:09

    It needed some updating.
    Should be OK now (works for me: FF,Chrome,IE9).

    ReplyDelete

Subscribe to: Post Comments (Atom)