Created
March 9, 2015 14:30
-
-
Save gangadharjannu/6f85be28fe7fbdf70158 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/yesiwe
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> | |
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
/*Common CSS reset*/ | |
html, body { | |
margin: 0; | |
padding: 0; | |
} | |
* { | |
margin: 0; | |
padding: 0 | |
} | |
bg-accordion { | |
display: block; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.bg-panel-group { | |
width: 100%; | |
background-color: #f3f3f3; | |
color: #777; | |
position: relative; | |
} | |
.bg-panel-title { | |
background-color: #ccc; | |
margin: 0px; | |
} | |
.bg-panel-title a { | |
color: #fff; | |
padding: 6px 12px; | |
display: block; | |
font-size: 12pt; | |
} | |
.bg-panel-title { | |
background-color: #389abe; | |
background-image: -moz-linear-gradient(top, #389abe 0%, #2a7b99 100%); /* FF3.6+ */ | |
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */ | |
background-image: -o-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */ | |
background-image: -ms-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* IE10+ */ | |
background-image: linear-gradient(to bottombottom, #389abe 0%,#2a7b99 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */ | |
} | |
.bg-panel-title a { | |
text-shadow: 1px 1px 0px rgba(0,0,0,0.2); | |
text-shadow: 1px 1px 0px rgba(0,0,0,0.2); | |
border-right: 1px solid rgba(0, 0, 0, .2); | |
border-left: 1px solid rgba(0, 0, 0, .2); | |
border-bottom: 1px solid rgba(0, 0, 0, .2); | |
border-top: 1px solid rgba(250, 250, 250, .2); | |
} | |
.bg-panel-group .bg-panel-title .bg-panel-body { | |
padding: 0; | |
background: none; | |
border: none; | |
outline: none; | |
} | |
@media only screen and (min-width: 768px) { | |
.bg-menu-group { | |
} | |
.bg-panel { | |
width: auto; | |
min-width: 15%; | |
display: inline-block; | |
float: left; | |
white-space: nowrap; | |
} | |
.bg-panel-body { | |
display: block; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
width: 100%; | |
position: absolute; | |
border: 1px solid #389abe; | |
left: 0; | |
} | |
h3 { | |
margin: 0 | |
} | |
.bg-panel-body { | |
padding: 0 5px; | |
margin-top: -1px; | |
} | |
} | |
.bgActive { | |
background-color: #fa9300; | |
background-image: -moz-linear-gradient(top, #fa9300 0%, #dc621e 100%); /* FF3.6+ */ | |
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */ | |
background-image: -o-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */ | |
background-image: -ms-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* IE10+ */ | |
background-image: linear-gradient(to bottombottom, #fa9300 0%,#dc621e 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */ | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<div ng-app="bgApp" ng-controller="myCtrl"> | |
<bg-accordion type="menu-accordian" open-heading="tab3" open-bg-panel="2"> | |
<bg-accordion-group heading="Tab1" content="<a href='www.google.com'>Link1</a>"></bg-accordion-group> | |
<bg-accordion-group heading="Tab2" content="Content2"></bg-accordion-group> | |
<bg-accordion-group heading="Tab3" > | |
Content3 | |
</bg-accordion-group> | |
<bg-accordion-group heading="Tab4" content="Content4"></bg-accordion-group> | |
<bg-accordion-group heading="Tab5" content="Content5"></bg-accordion-group> | |
</bg-accordion> | |
</div> | |
</div> | |
<script id="jsbin-javascript"> | |
var bgAccordian = angular.module('bgApp', []); | |
bgAccordian.controller('myCtrl', function ($scope) { | |
$scope.myName = 'bharath'; | |
}); | |
bgAccordian.directive('bgAccordion', ['$compile', | |
function ($compile) { | |
return { | |
restrict: 'E', | |
compile: function (ele, attr) { | |
if (attr.type.toUpperCase() === 'ACCORDION' || attr.type.toUpperCase() === 'COLLAPSE') | |
angular.element(ele).addClass('bg-panel-group'); | |
else if (attr.type.toLowerCase() === 'menu-accordian') | |
angular.element(ele).addClass('bg-menu-group'); | |
return function ($scope, ele, attrs) { | |
}; | |
}, | |
controller: function () { | |
console.log('bg-accordian controller'); | |
} | |
}; | |
}]); | |
bgAccordian.directive('bgAccordionGroup', function () { | |
var link = function ($scope, ele, attrs) { | |
$(ele).find('span').html($(ele).attr('heading')); | |
if ($(ele).attr('content')) | |
$(ele).find('.bg-panel-body').html($(ele).attr('content')); | |
if (typeof (ele.parent().attr('open-heading')) != "undefined") { | |
if ($(ele).find("span").text().toUpperCase() == $(ele).parent().attr("open-heading").toUpperCase()) { | |
$(ele).children().eq(1).show(); | |
} else { | |
$(ele).children().eq(1).hide(); | |
} | |
} else { | |
if (($(ele).index() + 1) == $(ele).parent().attr("open-bg-panel")) { | |
$(ele).children().eq(1).show(); | |
} else { | |
$(ele).children().eq(1).hide(); | |
} | |
} | |
$scope.openTab = function (e) { | |
if ($(ele).parent().attr('type').toLowerCase() === 'COLLAPSE') { | |
$(e.currentTarget).next().toggle(); | |
} | |
else { | |
if (window.matchMedia('(min-width: 768px)').matches) { | |
$(e.currentTarget).parent().siblings().children().removeClass("bgActive"); | |
$(e.currentTarget).addClass("bgActive"); | |
console.log("tabs"); | |
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide(); | |
$(e.currentTarget).next().show(); | |
} else { | |
console.log("accordion"); | |
$(e.currentTarget).parent().siblings().children().removeClass("bgActive"); | |
$(e.currentTarget).addClass("bgActive"); | |
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide(); | |
$(e.currentTarget).next().toggle(); | |
} | |
} | |
}; | |
}; | |
return { | |
restrict: 'E', | |
replace: true, | |
template: function () { | |
return '<div class="bg-panel"><div class="bg-panel-title" ng-click="openTab($event)"><h3><a><span></span></a></h3></div><div class="bg-panel-body">' + $("bg-accordion-group").html() + '</div></div>'; | |
}, | |
compile: function (ele, attr) { | |
console.log('bg-accordian compiler'); | |
return link; | |
} | |
}; | |
}); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<script src="//code.jquery.com/jquery-1.9.1.min.js"><\/script> | |
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<div id="container"> | |
<div ng-app="bgApp" ng-controller="myCtrl"> | |
<bg-accordion type="menu-accordian" open-heading="tab3" open-bg-panel="2"> | |
<bg-accordion-group heading="Tab1" content="<a href='www.google.com'>Link1</a>"></bg-accordion-group> | |
<bg-accordion-group heading="Tab2" content="Content2"></bg-accordion-group> | |
<bg-accordion-group heading="Tab3" > | |
Content3 | |
</bg-accordion-group> | |
<bg-accordion-group heading="Tab4" content="Content4"></bg-accordion-group> | |
<bg-accordion-group heading="Tab5" content="Content5"></bg-accordion-group> | |
</bg-accordion> | |
</div> | |
</div> | |
</body> | |
</html></script> | |
<script id="jsbin-source-css" type="text/css">/*Common CSS reset*/ | |
html, body { | |
margin: 0; | |
padding: 0; | |
} | |
* { | |
margin: 0; | |
padding: 0 | |
} | |
bg-accordion { | |
display: block; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.bg-panel-group { | |
width: 100%; | |
background-color: #f3f3f3; | |
color: #777; | |
position: relative; | |
} | |
.bg-panel-title { | |
background-color: #ccc; | |
margin: 0px; | |
} | |
.bg-panel-title a { | |
color: #fff; | |
padding: 6px 12px; | |
display: block; | |
font-size: 12pt; | |
} | |
.bg-panel-title { | |
background-color: #389abe; | |
background-image: -moz-linear-gradient(top, #389abe 0%, #2a7b99 100%); /* FF3.6+ */ | |
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */ | |
background-image: -o-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */ | |
background-image: -ms-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* IE10+ */ | |
background-image: linear-gradient(to bottombottom, #389abe 0%,#2a7b99 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */ | |
} | |
.bg-panel-title a { | |
text-shadow: 1px 1px 0px rgba(0,0,0,0.2); | |
text-shadow: 1px 1px 0px rgba(0,0,0,0.2); | |
border-right: 1px solid rgba(0, 0, 0, .2); | |
border-left: 1px solid rgba(0, 0, 0, .2); | |
border-bottom: 1px solid rgba(0, 0, 0, .2); | |
border-top: 1px solid rgba(250, 250, 250, .2); | |
} | |
.bg-panel-group .bg-panel-title .bg-panel-body { | |
padding: 0; | |
background: none; | |
border: none; | |
outline: none; | |
} | |
@media only screen and (min-width: 768px) { | |
.bg-menu-group { | |
} | |
.bg-panel { | |
width: auto; | |
min-width: 15%; | |
display: inline-block; | |
float: left; | |
white-space: nowrap; | |
} | |
.bg-panel-body { | |
display: block; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
width: 100%; | |
position: absolute; | |
border: 1px solid #389abe; | |
left: 0; | |
} | |
h3 { | |
margin: 0 | |
} | |
.bg-panel-body { | |
padding: 0 5px; | |
margin-top: -1px; | |
} | |
} | |
.bgActive { | |
background-color: #fa9300; | |
background-image: -moz-linear-gradient(top, #fa9300 0%, #dc621e 100%); /* FF3.6+ */ | |
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */ | |
background-image: -o-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */ | |
background-image: -ms-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* IE10+ */ | |
background-image: linear-gradient(to bottombottom, #fa9300 0%,#dc621e 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */ | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">var bgAccordian = angular.module('bgApp', []); | |
bgAccordian.controller('myCtrl', function ($scope) { | |
$scope.myName = 'bharath'; | |
}); | |
bgAccordian.directive('bgAccordion', ['$compile', | |
function ($compile) { | |
return { | |
restrict: 'E', | |
compile: function (ele, attr) { | |
if (attr.type.toUpperCase() === 'ACCORDION' || attr.type.toUpperCase() === 'COLLAPSE') | |
angular.element(ele).addClass('bg-panel-group'); | |
else if (attr.type.toLowerCase() === 'menu-accordian') | |
angular.element(ele).addClass('bg-menu-group'); | |
return function ($scope, ele, attrs) { | |
}; | |
}, | |
controller: function () { | |
console.log('bg-accordian controller'); | |
} | |
}; | |
}]); | |
bgAccordian.directive('bgAccordionGroup', function () { | |
var link = function ($scope, ele, attrs) { | |
$(ele).find('span').html($(ele).attr('heading')); | |
if ($(ele).attr('content')) | |
$(ele).find('.bg-panel-body').html($(ele).attr('content')); | |
if (typeof (ele.parent().attr('open-heading')) != "undefined") { | |
if ($(ele).find("span").text().toUpperCase() == $(ele).parent().attr("open-heading").toUpperCase()) { | |
$(ele).children().eq(1).show(); | |
} else { | |
$(ele).children().eq(1).hide(); | |
} | |
} else { | |
if (($(ele).index() + 1) == $(ele).parent().attr("open-bg-panel")) { | |
$(ele).children().eq(1).show(); | |
} else { | |
$(ele).children().eq(1).hide(); | |
} | |
} | |
$scope.openTab = function (e) { | |
if ($(ele).parent().attr('type').toLowerCase() === 'COLLAPSE') { | |
$(e.currentTarget).next().toggle(); | |
} | |
else { | |
if (window.matchMedia('(min-width: 768px)').matches) { | |
$(e.currentTarget).parent().siblings().children().removeClass("bgActive"); | |
$(e.currentTarget).addClass("bgActive"); | |
console.log("tabs"); | |
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide(); | |
$(e.currentTarget).next().show(); | |
} else { | |
console.log("accordion"); | |
$(e.currentTarget).parent().siblings().children().removeClass("bgActive"); | |
$(e.currentTarget).addClass("bgActive"); | |
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide(); | |
$(e.currentTarget).next().toggle(); | |
} | |
} | |
}; | |
}; | |
return { | |
restrict: 'E', | |
replace: true, | |
template: function () { | |
return '<div class="bg-panel"><div class="bg-panel-title" ng-click="openTab($event)"><h3><a><span></span></a></h3></div><div class="bg-panel-body">' + $("bg-accordion-group").html() + '</div></div>'; | |
}, | |
compile: function (ele, attr) { | |
console.log('bg-accordian compiler'); | |
return link; | |
} | |
}; | |
}); | |
</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
/*Common CSS reset*/ | |
html, body { | |
margin: 0; | |
padding: 0; | |
} | |
* { | |
margin: 0; | |
padding: 0 | |
} | |
bg-accordion { | |
display: block; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.bg-panel-group { | |
width: 100%; | |
background-color: #f3f3f3; | |
color: #777; | |
position: relative; | |
} | |
.bg-panel-title { | |
background-color: #ccc; | |
margin: 0px; | |
} | |
.bg-panel-title a { | |
color: #fff; | |
padding: 6px 12px; | |
display: block; | |
font-size: 12pt; | |
} | |
.bg-panel-title { | |
background-color: #389abe; | |
background-image: -moz-linear-gradient(top, #389abe 0%, #2a7b99 100%); /* FF3.6+ */ | |
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#389abe), color-stop(100%,#2a7b99)); /* Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Chrome10+,Safari5.1+ */ | |
background-image: -o-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* Opera 11.10+ */ | |
background-image: -ms-linear-gradient(top, #389abe 0%,#2a7b99 100%); /* IE10+ */ | |
background-image: linear-gradient(to bottombottom, #389abe 0%,#2a7b99 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389abe', endColorstr='#2a7b99',GradientType=0 ); /* IE6-9 */ | |
} | |
.bg-panel-title a { | |
text-shadow: 1px 1px 0px rgba(0,0,0,0.2); | |
text-shadow: 1px 1px 0px rgba(0,0,0,0.2); | |
border-right: 1px solid rgba(0, 0, 0, .2); | |
border-left: 1px solid rgba(0, 0, 0, .2); | |
border-bottom: 1px solid rgba(0, 0, 0, .2); | |
border-top: 1px solid rgba(250, 250, 250, .2); | |
} | |
.bg-panel-group .bg-panel-title .bg-panel-body { | |
padding: 0; | |
background: none; | |
border: none; | |
outline: none; | |
} | |
@media only screen and (min-width: 768px) { | |
.bg-menu-group { | |
} | |
.bg-panel { | |
width: auto; | |
min-width: 15%; | |
display: inline-block; | |
float: left; | |
white-space: nowrap; | |
} | |
.bg-panel-body { | |
display: block; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
width: 100%; | |
position: absolute; | |
border: 1px solid #389abe; | |
left: 0; | |
} | |
h3 { | |
margin: 0 | |
} | |
.bg-panel-body { | |
padding: 0 5px; | |
margin-top: -1px; | |
} | |
} | |
.bgActive { | |
background-color: #fa9300; | |
background-image: -moz-linear-gradient(top, #fa9300 0%, #dc621e 100%); /* FF3.6+ */ | |
background-image: -webkit-gradient(linear, left top, left bottombottom, color-stop(0%,#fa9300), color-stop(100%,#dc621e)); /* Chrome,Safari4+ */ | |
background-image: -webkit-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Chrome10+,Safari5.1+ */ | |
background-image: -o-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* Opera 11.10+ */ | |
background-image: -ms-linear-gradient(top, #fa9300 0%,#dc621e 100%); /* IE10+ */ | |
background-image: linear-gradient(to bottombottom, #fa9300 0%,#dc621e 100%); /* W3C */ | |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa9300', endColorstr='#dc621e',GradientType=0 ); /* IE6-9 */ | |
} |
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
var bgAccordian = angular.module('bgApp', []); | |
bgAccordian.controller('myCtrl', function ($scope) { | |
$scope.myName = 'bharath'; | |
}); | |
bgAccordian.directive('bgAccordion', ['$compile', | |
function ($compile) { | |
return { | |
restrict: 'E', | |
compile: function (ele, attr) { | |
if (attr.type.toUpperCase() === 'ACCORDION' || attr.type.toUpperCase() === 'COLLAPSE') | |
angular.element(ele).addClass('bg-panel-group'); | |
else if (attr.type.toLowerCase() === 'menu-accordian') | |
angular.element(ele).addClass('bg-menu-group'); | |
return function ($scope, ele, attrs) { | |
}; | |
}, | |
controller: function () { | |
console.log('bg-accordian controller'); | |
} | |
}; | |
}]); | |
bgAccordian.directive('bgAccordionGroup', function () { | |
var link = function ($scope, ele, attrs) { | |
$(ele).find('span').html($(ele).attr('heading')); | |
if ($(ele).attr('content')) | |
$(ele).find('.bg-panel-body').html($(ele).attr('content')); | |
if (typeof (ele.parent().attr('open-heading')) != "undefined") { | |
if ($(ele).find("span").text().toUpperCase() == $(ele).parent().attr("open-heading").toUpperCase()) { | |
$(ele).children().eq(1).show(); | |
} else { | |
$(ele).children().eq(1).hide(); | |
} | |
} else { | |
if (($(ele).index() + 1) == $(ele).parent().attr("open-bg-panel")) { | |
$(ele).children().eq(1).show(); | |
} else { | |
$(ele).children().eq(1).hide(); | |
} | |
} | |
$scope.openTab = function (e) { | |
if ($(ele).parent().attr('type').toLowerCase() === 'COLLAPSE') { | |
$(e.currentTarget).next().toggle(); | |
} | |
else { | |
if (window.matchMedia('(min-width: 768px)').matches) { | |
$(e.currentTarget).parent().siblings().children().removeClass("bgActive"); | |
$(e.currentTarget).addClass("bgActive"); | |
console.log("tabs"); | |
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide(); | |
$(e.currentTarget).next().show(); | |
} else { | |
console.log("accordion"); | |
$(e.currentTarget).parent().siblings().children().removeClass("bgActive"); | |
$(e.currentTarget).addClass("bgActive"); | |
$(e.currentTarget).parent().siblings().find(".bg-panel-body").hide(); | |
$(e.currentTarget).next().toggle(); | |
} | |
} | |
}; | |
}; | |
return { | |
restrict: 'E', | |
replace: true, | |
template: function () { | |
return '<div class="bg-panel"><div class="bg-panel-title" ng-click="openTab($event)"><h3><a><span></span></a></h3></div><div class="bg-panel-body">' + $("bg-accordion-group").html() + '</div></div>'; | |
}, | |
compile: function (ele, attr) { | |
console.log('bg-accordian compiler'); | |
return link; | |
} | |
}; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment