Ajax Loader
×

Kockout Tab Control

Use knockout.js to build a tab control similar to jQuery ui's tabs.

HTML 
<html>
1
<html>
2
  <head>
3
    <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
4
  </head>
5
  <body>
6
  <div id="tabs" data-bind="foreach: tabs">  
7
    <div class="tab" data-bind="css: {selected: $parent.selectedTab() == id()}, text: name, click: $parent.selectedTab.bind($parent, id())"></div>
8
</div>
9
<div id="tabContent" data-bind="foreach: tabs">
10
    <div data-bind="if: $parent.selectedTab() == id()">
11
        <span data-bind="text: text"></span>
12
    </div>
13
</div>
14
  </body>
15
</html>
 
CSS 
body { padding: 10px; }
1
body { padding: 10px; }
2
#tabs {
3
    border: 1px solid black;
4
    border-radius: 5px 5px 0 0;
5
    padding: 3px 3px 1px 3px;
6
    background: linear-gradient(silver, white 20%, silver 50%, grey 80%);
7
}
8
.tab {
9
  cursor: default;
10
    border: 1px solid grey;
11
    border-bottom: none;
12
    border-radius: 4px 4px 0 0;
13
    padding: 1px 10px 0 10px;
14
    background: linear-gradient(silver 30%, grey 100%);
15
  color: white;
16
  transition: all .25s ease;
17
    display: inline-block;
18
    margin-top: 4px;
19
}
20
.tab.selected {
21
    font-weight: bold;
22
    padding-top: 3px;
23
  margin-top: 2px;
24
    background: linear-gradient(white 30%, silver 70%, grey 100%);
25
  color: black;
26
}
27
.tab:hover {
28
    background: linear-gradient(white 30%, silver 70%, grey 100%);
29
  color: black;
30
}
31
@keyframes bgColor
32
{
33
from {background: hsl(0,100%,99%) ;}
34
12% {background: hsl(45,100%,99%) ;}
35
25% {background: hsl(90,100%,99%) ;}
36
37% {background: hsl(135,100%,99%) ;}
37
50% {background: hsl(180,100%,99%) ;}
38
62% {background: hsl(225,100%,99%) ;}
39
75% {background: hsl(270,100%,99%) ;}
40
88% {background: hsl(315,100%,99%) ;}
41
to {background: hsl(360,100%,99%) ;}
42
}
43
#tabContent {
44
    text-align: center;
45
    vertical-align: center;
46
    border: 1px solid black;
47
    border-top: none;
48
    height: 250px;
49
    animation:bgColor 10s infinite;
50
}
 
JavaScript 
function ViewModel(){
1
function ViewModel(){
2
    var self = this;
3
    self.Tab = function(id, name, text, selected){
4
        var tab = this;
5
        tab.id = ko.observable(id);
6
        tab.name = ko.observable(name);
7
        tab.text = ko.observable(text);
8
        return tab;
9
    };
10
    self.selectedTab = ko.observable(1);
11
    self.tabs = new Array();
12
    self.tabs.push(new self.Tab(1, 'Tab 1', 'Wecome to Tab #1!'));
13
    self.tabs.push(new self.Tab(2, 'Tab 2', 'This is Tab 2...'));
14
    self.tabs.push(new self.Tab(3, 'Tab 3', 'I\'m tab 3'));
15
    self.tabs.push(new self.Tab(4, 'Tab 4', 'Hello World!'));
16
    return self;
17
}
18
 
19
ko.applyBindings(new ViewModel());
 

Kockout Tab Control

CSSDeck G+