Kockout Tab Control
Use knockout.js to build a tab control similar to jQuery ui's tabs.
Use knockout.js to build a tab control similar to jQuery ui's tabs.
<html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
</head>
<body>
<div id="tabs" data-bind="foreach: tabs">
<div class="tab" data-bind="css: {selected: $parent.selectedTab() == id()}, text: name, click: $parent.selectedTab.bind($parent, id())"></div>
</div>
<div id="tabContent" data-bind="foreach: tabs">
<div data-bind="if: $parent.selectedTab() == id()">
<span data-bind="text: text"></span>
</div>
</div>
</body>
</html>
body { padding: 10px; }
body { padding: 10px; }
#tabs {
border: 1px solid black;
border-radius: 5px 5px 0 0;
padding: 3px 3px 1px 3px;
background: linear-gradient(silver, white 20%, silver 50%, grey 80%);
}
.tab {
cursor: default;
border: 1px solid grey;
border-bottom: none;
border-radius: 4px 4px 0 0;
padding: 1px 10px 0 10px;
background: linear-gradient(silver 30%, grey 100%);
color: white;
transition: all .25s ease;
display: inline-block;
margin-top: 4px;
}
.tab.selected {
font-weight: bold;
padding-top: 3px;
margin-top: 2px;
background: linear-gradient(white 30%, silver 70%, grey 100%);
color: black;
}
.tab:hover {
background: linear-gradient(white 30%, silver 70%, grey 100%);
color: black;
}
@keyframes bgColor
{
from {background: hsl(0,100%,99%) ;}
12% {background: hsl(45,100%,99%) ;}
25% {background: hsl(90,100%,99%) ;}
37% {background: hsl(135,100%,99%) ;}
50% {background: hsl(180,100%,99%) ;}
62% {background: hsl(225,100%,99%) ;}
75% {background: hsl(270,100%,99%) ;}
88% {background: hsl(315,100%,99%) ;}
to {background: hsl(360,100%,99%) ;}
}
#tabContent {
text-align: center;
vertical-align: center;
border: 1px solid black;
border-top: none;
height: 250px;
animation:bgColor 10s infinite;
}
function ViewModel(){
function ViewModel(){
var self = this;
self.Tab = function(id, name, text, selected){
var tab = this;
tab.id = ko.observable(id);
tab.name = ko.observable(name);
tab.text = ko.observable(text);
return tab;
};
self.selectedTab = ko.observable(1);
self.tabs = new Array();
self.tabs.push(new self.Tab(1, 'Tab 1', 'Wecome to Tab #1!'));
self.tabs.push(new self.Tab(2, 'Tab 2', 'This is Tab 2...'));
self.tabs.push(new self.Tab(3, 'Tab 3', 'I\'m tab 3'));
self.tabs.push(new self.Tab(4, 'Tab 4', 'Hello World!'));
return self;
}
ko.applyBindings(new ViewModel());