function onTabs(e) {
var attrActive = e.target.getAttribute("attr-active");
var elm = searchAround(e.target,{'searchFor':{'class':['fields']}});
var tmpid = elm.getAttribute("id");
if(typeof(tmpid)=='undefined' || tmpid==null) {
tmpid = "tmpid"+(new Date().getTime())+random(100,99999);
elm.setAttribute("id",tmpid);
}
//
qS("#"+tmpid+" > .tabs .name.active").classList.remove("active");
qS("#"+tmpid+" > .display.active").classList.remove("active");
//
e.target.classList.add("active");
qS("#"+tmpid+" > .display."+attrActive).classList.add("active");
//
document.dispatchEvent(new CustomEvent("tabs_" + attrActive, { detail: e.target }));
}# Initialize default javascript:
document.querySelectorAll(".fields .tabs .name").forEach(function(elm) {
elm.addEventListener("click", onTabs, false);
});# jQuery javascript:
$(".fields > .tabs .name").on("click",function(e) {
//
var attrActive = $(this).attr("attr-active");
//
var elm = findParent(e.target,{classname:'fields',});
var tmpid = $(elm).attr("id");
if(typeof(tmpid)=='undefined' || tmpid==null) {
tmpid = "tmpid"+(new Date().getTime())+random(100,99999);
$(elm).attr("id",tmpid);
}
//
$("#"+tmpid+" > .tabs .name").removeClass("active");
$(this).addClass("active");
//
$("#"+tmpid+" > .display").removeClass("active");
$("#"+tmpid+" > .display."+attrActive).addClass("active");
// Trigger attrActive event
console.warn("adm/index -> Trigger","tabs_"+attrActive);
$(document).trigger("tabs_"+attrActive,[this]);
});# HTML:
<div id="webpages" class="webpages hor active template_content"> <!-- .template_content is added for .ourdrops to work! -->
<div class="fields">
<div class="tabs">
<div class="name active" attr-active="tab_chat" style="margin:2px;">Chat</div>
<div class="name" attr-active="tab_list" style="margin:2px;">List of conversations</div>
</div>
<div class="display tab_chat active">
tab 1
</div>
<div class="display tab_list">
tab 2
</div>
</div>
</div>
# CSS:
/*-- TAB MENuS CSS START --*/
.fields .display:not(.active) {
display:none;
}
.fields .tabs {
color:white;
font-weight: bolder;
font-family: system-ui;
}
.fields .tabs > div {
display:inline-block;
padding:3px 13px;
}
.fields .tabs .name {
cursor:pointer;
background:#8fbc8f;
}
.fields .tabs .name:not(.active) {
color:lightblue;
}
.fields .tabs .name:not(.active):hover {color:white;}
.fields .tabs .name.active {
box-shadow:0px 0px 2px 1px green;
}
.fields.vertical > .tabs {
float:left;
}
.fields.vertical > .tabs > div {
display:block;
width:100px;
text-align:center;
}
.fields.vertical > .display:not(.notMenus) {
margin-left:120px;
}
.fields.vertical > .display > div:not(.notMenus) {
margin:0px 27px;
}
.fields:not(.vertical) > .display > div:not(.notMenus) {
margin:13px 0px;
}
/*-- TAB MENuS CSS END --*/