JS Bin // source http://jsbin.com/hefeyulili
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| *, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| color: #fff; | |
| } | |
| .container{ | |
| width:90%; | |
| margin:auto; | |
| } | |
| .tab { | |
| margin-left:5px; | |
| position: relative; | |
| margin-bottom: 1px; | |
| width: 100%; | |
| color: #fff; | |
| overflow: hidden; | |
| } | |
| input { | |
| position: absolute; | |
| opacity: 0; | |
| z-index: -1; | |
| } | |
| label { | |
| position: relative; | |
| display: block; | |
| padding: 0 0 0 1.5em; | |
| background: #d9e9f4; | |
| font-weight: 500; | |
| font-size:15px; | |
| line-height: 3; | |
| cursor: pointer; | |
| color:#439ad2; | |
| } | |
| .tab-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| background: white; | |
| -webkit-transition: max-height .35s; | |
| -o-transition: max-height .35s; | |
| transition: max-height .35s; | |
| } | |
| .tab-content p { | |
| margin: 1em; | |
| } | |
| /* :checked */ | |
| input:checked ~ .tab-content { | |
| max-height: 10em; | |
| } | |
| /* Icon */ | |
| label::before { | |
| position: absolute; | |
| left: -.5em; | |
| top: 0; | |
| display: block; | |
| width: 3em; | |
| height: 3em; | |
| line-height: 3; | |
| text-align: center; | |
| -webkit-transition: all .35s; | |
| -o-transition: all .35s; | |
| transition: all .35s; | |
| } | |
| input[type=checkbox] + label::before { | |
| content: "▸"; | |
| } | |
| input[type=radio] + label::before { | |
| content: "\25BC"; | |
| } | |
| input[type=checkbox]:checked + label::before { | |
| transform: rotate(90deg); | |
| } | |
| input[type=radio]:checked + label::before { | |
| transform: rotateX(90deg); | |
| } | |
| .hotel-list{ | |
| list-style-type:none; | |
| padding:0; | |
| margin:0; | |
| } | |
| .hotel-list > li{ | |
| color:#76b0dc; | |
| font-weight:400; | |
| font-size:12px; | |
| margin:0; | |
| display:inline-block; | |
| width:100%; | |
| border-bottom:solid 1px #76b0dc; | |
| padding:5px 5px 5px 15px; | |
| } | |
| .hotel-list > li>.left{ | |
| float:left; | |
| } | |
| .hotel-list > li>.right{ | |
| float:right; | |
| } | |
| .star:before{ | |
| content:' '; | |
| } | |
| .star{ | |
| color:red; | |
| font-size:10px; | |
| display:inline-block; | |
| padding-left:2px; | |
| } | |
| .price{ | |
| color:#118c18; | |
| } | |
| .dom{ | |
| margin-bottom: 25px | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="test" class="dom"> | |
| </div> | |
| <div id="test1" class="dom"> | |
| </div> | |
| <div id="test2" class="dom"> | |
| </div> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| (function(){ | |
| //constructor | |
| this.Tabs = function(){ | |
| //from param | |
| var data = []; | |
| if(arguments[0] && arguments[0].constructor === Object){ | |
| this.params = arguments[0]; | |
| data = this.params.data; | |
| this.domId = this.params.domId; | |
| } | |
| this.$tabs = null; | |
| this.$list = []; | |
| this.data = data; | |
| console.log(this.data) | |
| this.suffix = Math.floor((Math.random() * 1000) + 1); | |
| init.call(this); | |
| /* | |
| [{ | |
| label: "newyork", | |
| items: [{ | |
| link: "newyork edge", | |
| rating: 3 | |
| },{ | |
| link: "newyork edge", | |
| rating: 3 | |
| }] | |
| }, {}] | |
| */ | |
| } | |
| //public | |
| Tabs.prototype.addTab = function(item){ | |
| } | |
| Tabs.prototype.removeTab = function(index){ | |
| } | |
| Tabs.prototype.setTabs = function(items){ | |
| } | |
| //private | |
| function init(){ | |
| console.log(this.data) | |
| this.$tabs = document.createElement("div"); | |
| this.$tabs.className = "container"; | |
| setTabs.call(this); | |
| } | |
| function setTabs(){ | |
| console.log(this.data); | |
| var _that = this, $temp = null, $html = ""; | |
| this.$list = []; | |
| for(var i=0, len=this.data.length; i<len; i ++){ | |
| $temp = null; | |
| $temp = _getItemTemplate(); | |
| $temp = $temp.replace(new RegExp('{{ID}}', 'g'), _that.suffix + "-" + i); | |
| $temp = $temp.replace(new RegExp('{{TITLE}}', 'g'), this.data[i].title); | |
| $temp = $temp.replace(new RegExp('{{CONTENT}}', 'g'), this.data[i].content); | |
| this.$list.push($temp); | |
| } | |
| $html = this.$list.join(""); | |
| this.$tabs.innerHTML = $html; | |
| //document.getElementById(this.domId).innerHTML = $html | |
| document.getElementById(this.domId).append(this.$tabs) | |
| } | |
| function _getItemTemplate(){ | |
| var template = '<div class="tab">' | |
| + '<input id="{{ID}}" type="checkbox" name="tabs">' | |
| + '<label for="{{ID}}">{{TITLE}}</label>' | |
| + '<div class="tab-content">' | |
| + '{{CONTENT}}' | |
| + '</div>' | |
| + '</div>'; | |
| return template; | |
| } | |
| })() | |
| var hotelList = `<ul class="hotel-list"> | |
| <li> | |
| <span class='left'>The May Fair</span> | |
| <span class='right'>From <strike>£232</strike> <span class='price'>£192<span> 4<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Grand Plaza Serviced Apartments</span> | |
| <span class='right'>From <span class='price'>£78</span> 3<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Lancaster Gate Hotel</span> | |
| <span class='right'>From <strike>£68</strike> <span class='price'>£64</span> 5<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Radisson Edwardian Grafton Hotel</span> | |
| <span class='right'>From <span class='price'>£102</span> 2<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>The Rembrandt</span> | |
| <span class='right'>From <strike> £150</strike> <span class='price'>£122</span> 3<span class='star'>★<span> </span> | |
| </li> | |
| </ul>`; | |
| var tabs = new Tabs({ | |
| domId : "test", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); | |
| var tabs1 = new Tabs({ | |
| domId : "test1", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); | |
| var tabs = new Tabs({ | |
| domId : "test2", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">*, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| color: #fff; | |
| } | |
| .container{ | |
| width:90%; | |
| margin:auto; | |
| } | |
| .tab { | |
| margin-left:5px; | |
| position: relative; | |
| margin-bottom: 1px; | |
| width: 100%; | |
| color: #fff; | |
| overflow: hidden; | |
| } | |
| input { | |
| position: absolute; | |
| opacity: 0; | |
| z-index: -1; | |
| } | |
| label { | |
| position: relative; | |
| display: block; | |
| padding: 0 0 0 1.5em; | |
| background: #d9e9f4; | |
| font-weight: 500; | |
| font-size:15px; | |
| line-height: 3; | |
| cursor: pointer; | |
| color:#439ad2; | |
| } | |
| .tab-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| background: white; | |
| -webkit-transition: max-height .35s; | |
| -o-transition: max-height .35s; | |
| transition: max-height .35s; | |
| } | |
| .tab-content p { | |
| margin: 1em; | |
| } | |
| /* :checked */ | |
| input:checked ~ .tab-content { | |
| max-height: 10em; | |
| } | |
| /* Icon */ | |
| label::before { | |
| position: absolute; | |
| left: -.5em; | |
| top: 0; | |
| display: block; | |
| width: 3em; | |
| height: 3em; | |
| line-height: 3; | |
| text-align: center; | |
| -webkit-transition: all .35s; | |
| -o-transition: all .35s; | |
| transition: all .35s; | |
| } | |
| input[type=checkbox] + label::before { | |
| content: "▸"; | |
| } | |
| input[type=radio] + label::before { | |
| content: "\25BC"; | |
| } | |
| input[type=checkbox]:checked + label::before { | |
| transform: rotate(90deg); | |
| } | |
| input[type=radio]:checked + label::before { | |
| transform: rotateX(90deg); | |
| } | |
| .hotel-list{ | |
| list-style-type:none; | |
| padding:0; | |
| margin:0; | |
| } | |
| .hotel-list > li{ | |
| color:#76b0dc; | |
| font-weight:400; | |
| font-size:12px; | |
| margin:0; | |
| display:inline-block; | |
| width:100%; | |
| border-bottom:solid 1px #76b0dc; | |
| padding:5px 5px 5px 15px; | |
| } | |
| .hotel-list > li>.left{ | |
| float:left; | |
| } | |
| .hotel-list > li>.right{ | |
| float:right; | |
| } | |
| .star:before{ | |
| content:' '; | |
| } | |
| .star{ | |
| color:red; | |
| font-size:10px; | |
| display:inline-block; | |
| padding-left:2px; | |
| } | |
| .price{ | |
| color:#118c18; | |
| } | |
| .dom{ | |
| margin-bottom: 25px | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">(function(){ | |
| //constructor | |
| this.Tabs = function(){ | |
| //from param | |
| var data = []; | |
| if(arguments[0] && arguments[0].constructor === Object){ | |
| this.params = arguments[0]; | |
| data = this.params.data; | |
| this.domId = this.params.domId; | |
| } | |
| this.$tabs = null; | |
| this.$list = []; | |
| this.data = data; | |
| console.log(this.data) | |
| this.suffix = Math.floor((Math.random() * 1000) + 1); | |
| init.call(this); | |
| /* | |
| [{ | |
| label: "newyork", | |
| items: [{ | |
| link: "newyork edge", | |
| rating: 3 | |
| },{ | |
| link: "newyork edge", | |
| rating: 3 | |
| }] | |
| }, {}] | |
| */ | |
| } | |
| //public | |
| Tabs.prototype.addTab = function(item){ | |
| } | |
| Tabs.prototype.removeTab = function(index){ | |
| } | |
| Tabs.prototype.setTabs = function(items){ | |
| } | |
| //private | |
| function init(){ | |
| console.log(this.data) | |
| this.$tabs = document.createElement("div"); | |
| this.$tabs.className = "container"; | |
| setTabs.call(this); | |
| } | |
| function setTabs(){ | |
| console.log(this.data); | |
| var _that = this, $temp = null, $html = ""; | |
| this.$list = []; | |
| for(var i=0, len=this.data.length; i<len; i ++){ | |
| $temp = null; | |
| $temp = _getItemTemplate(); | |
| $temp = $temp.replace(new RegExp('{{ID}}', 'g'), _that.suffix + "-" + i); | |
| $temp = $temp.replace(new RegExp('{{TITLE}}', 'g'), this.data[i].title); | |
| $temp = $temp.replace(new RegExp('{{CONTENT}}', 'g'), this.data[i].content); | |
| this.$list.push($temp); | |
| } | |
| $html = this.$list.join(""); | |
| this.$tabs.innerHTML = $html; | |
| //document.getElementById(this.domId).innerHTML = $html | |
| document.getElementById(this.domId).append(this.$tabs) | |
| } | |
| function _getItemTemplate(){ | |
| var template = '<div class="tab">' | |
| + '<input id="{{ID}}" type="checkbox" name="tabs">' | |
| + '<label for="{{ID}}">{{TITLE}}</label>' | |
| + '<div class="tab-content">' | |
| + '{{CONTENT}}' | |
| + '</div>' | |
| + '</div>'; | |
| return template; | |
| } | |
| })() | |
| var hotelList = `<ul class="hotel-list"> | |
| <li> | |
| <span class='left'>The May Fair</span> | |
| <span class='right'>From <strike>£232</strike> <span class='price'>£192<span> 4<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Grand Plaza Serviced Apartments</span> | |
| <span class='right'>From <span class='price'>£78</span> 3<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Lancaster Gate Hotel</span> | |
| <span class='right'>From <strike>£68</strike> <span class='price'>£64</span> 5<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Radisson Edwardian Grafton Hotel</span> | |
| <span class='right'>From <span class='price'>£102</span> 2<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>The Rembrandt</span> | |
| <span class='right'>From <strike> £150</strike> <span class='price'>£122</span> 3<span class='star'>★<span> </span> | |
| </li> | |
| </ul>`; | |
| var tabs = new Tabs({ | |
| domId : "test", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); | |
| var tabs1 = new Tabs({ | |
| domId : "test1", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); | |
| var tabs = new Tabs({ | |
| domId : "test2", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); | |
| </script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| color: #fff; | |
| } | |
| .container{ | |
| width:90%; | |
| margin:auto; | |
| } | |
| .tab { | |
| margin-left:5px; | |
| position: relative; | |
| margin-bottom: 1px; | |
| width: 100%; | |
| color: #fff; | |
| overflow: hidden; | |
| } | |
| input { | |
| position: absolute; | |
| opacity: 0; | |
| z-index: -1; | |
| } | |
| label { | |
| position: relative; | |
| display: block; | |
| padding: 0 0 0 1.5em; | |
| background: #d9e9f4; | |
| font-weight: 500; | |
| font-size:15px; | |
| line-height: 3; | |
| cursor: pointer; | |
| color:#439ad2; | |
| } | |
| .tab-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| background: white; | |
| -webkit-transition: max-height .35s; | |
| -o-transition: max-height .35s; | |
| transition: max-height .35s; | |
| } | |
| .tab-content p { | |
| margin: 1em; | |
| } | |
| /* :checked */ | |
| input:checked ~ .tab-content { | |
| max-height: 10em; | |
| } | |
| /* Icon */ | |
| label::before { | |
| position: absolute; | |
| left: -.5em; | |
| top: 0; | |
| display: block; | |
| width: 3em; | |
| height: 3em; | |
| line-height: 3; | |
| text-align: center; | |
| -webkit-transition: all .35s; | |
| -o-transition: all .35s; | |
| transition: all .35s; | |
| } | |
| input[type=checkbox] + label::before { | |
| content: "▸"; | |
| } | |
| input[type=radio] + label::before { | |
| content: "\25BC"; | |
| } | |
| input[type=checkbox]:checked + label::before { | |
| transform: rotate(90deg); | |
| } | |
| input[type=radio]:checked + label::before { | |
| transform: rotateX(90deg); | |
| } | |
| .hotel-list{ | |
| list-style-type:none; | |
| padding:0; | |
| margin:0; | |
| } | |
| .hotel-list > li{ | |
| color:#76b0dc; | |
| font-weight:400; | |
| font-size:12px; | |
| margin:0; | |
| display:inline-block; | |
| width:100%; | |
| border-bottom:solid 1px #76b0dc; | |
| padding:5px 5px 5px 15px; | |
| } | |
| .hotel-list > li>.left{ | |
| float:left; | |
| } | |
| .hotel-list > li>.right{ | |
| float:right; | |
| } | |
| .star:before{ | |
| content:' '; | |
| } | |
| .star{ | |
| color:red; | |
| font-size:10px; | |
| display:inline-block; | |
| padding-left:2px; | |
| } | |
| .price{ | |
| color:#118c18; | |
| } | |
| .dom{ | |
| margin-bottom: 25px | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| //constructor | |
| this.Tabs = function(){ | |
| //from param | |
| var data = []; | |
| if(arguments[0] && arguments[0].constructor === Object){ | |
| this.params = arguments[0]; | |
| data = this.params.data; | |
| this.domId = this.params.domId; | |
| } | |
| this.$tabs = null; | |
| this.$list = []; | |
| this.data = data; | |
| console.log(this.data) | |
| this.suffix = Math.floor((Math.random() * 1000) + 1); | |
| init.call(this); | |
| /* | |
| [{ | |
| label: "newyork", | |
| items: [{ | |
| link: "newyork edge", | |
| rating: 3 | |
| },{ | |
| link: "newyork edge", | |
| rating: 3 | |
| }] | |
| }, {}] | |
| */ | |
| } | |
| //public | |
| Tabs.prototype.addTab = function(item){ | |
| } | |
| Tabs.prototype.removeTab = function(index){ | |
| } | |
| Tabs.prototype.setTabs = function(items){ | |
| } | |
| //private | |
| function init(){ | |
| console.log(this.data) | |
| this.$tabs = document.createElement("div"); | |
| this.$tabs.className = "container"; | |
| setTabs.call(this); | |
| } | |
| function setTabs(){ | |
| console.log(this.data); | |
| var _that = this, $temp = null, $html = ""; | |
| this.$list = []; | |
| for(var i=0, len=this.data.length; i<len; i ++){ | |
| $temp = null; | |
| $temp = _getItemTemplate(); | |
| $temp = $temp.replace(new RegExp('{{ID}}', 'g'), _that.suffix + "-" + i); | |
| $temp = $temp.replace(new RegExp('{{TITLE}}', 'g'), this.data[i].title); | |
| $temp = $temp.replace(new RegExp('{{CONTENT}}', 'g'), this.data[i].content); | |
| this.$list.push($temp); | |
| } | |
| $html = this.$list.join(""); | |
| this.$tabs.innerHTML = $html; | |
| //document.getElementById(this.domId).innerHTML = $html | |
| document.getElementById(this.domId).append(this.$tabs) | |
| } | |
| function _getItemTemplate(){ | |
| var template = '<div class="tab">' | |
| + '<input id="{{ID}}" type="checkbox" name="tabs">' | |
| + '<label for="{{ID}}">{{TITLE}}</label>' | |
| + '<div class="tab-content">' | |
| + '{{CONTENT}}' | |
| + '</div>' | |
| + '</div>'; | |
| return template; | |
| } | |
| })() | |
| var hotelList = `<ul class="hotel-list"> | |
| <li> | |
| <span class='left'>The May Fair</span> | |
| <span class='right'>From <strike>£232</strike> <span class='price'>£192<span> 4<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Grand Plaza Serviced Apartments</span> | |
| <span class='right'>From <span class='price'>£78</span> 3<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Lancaster Gate Hotel</span> | |
| <span class='right'>From <strike>£68</strike> <span class='price'>£64</span> 5<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>Radisson Edwardian Grafton Hotel</span> | |
| <span class='right'>From <span class='price'>£102</span> 2<span class='star'>★<span> </span> | |
| </li><li > | |
| <span class='left'>The Rembrandt</span> | |
| <span class='right'>From <strike> £150</strike> <span class='price'>£122</span> 3<span class='star'>★<span> </span> | |
| </li> | |
| </ul>`; | |
| var tabs = new Tabs({ | |
| domId : "test", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); | |
| var tabs1 = new Tabs({ | |
| domId : "test1", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); | |
| var tabs = new Tabs({ | |
| domId : "test2", | |
| data: [{title: "hotels in newyork", content:hotelList },{title: "hotels in UK", content:hotelList },{title: "hotels iangalore", content:hotelList }] | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment