Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Simple class for creating bootstrap button groups.
var btngroup=function(){
this.desc="Simple class for creating bootstrap button groups";
};
btngroup.prototype={
addBtnGroup:function(p){
p.container.innerHTML="";
p.bscont=document.createElement("div");
p.bscont.setAttribute("class","btn-group");
p.bscont.setAttribute("role","group");
p.bscont.setAttribute("aria-label","...");
p.container.appendChild(p.bscont);
this.bscont=p.bscont;
if(p.buttons!=undefined){
this.buttons=p.buttons;
this.setupBtnGroup(p.buttons);
}
return this;
},
addBtn:function(p){
var obj=this;
var btn=document.createElement("button");
btn.setAttribute("type","button");
for(var i in p){
if(i=="bcolor"){
btn.setAttribute("class","btn btn-"+p[i]);
}else if(i=="text"){
var text=document.createElement("span");
text.innerHTML=p[i];
btn.appendChild(text);
}else if(i=="icon"){
var icon=document.createElement("i");
icon.className=p[i];
btn.appendChild(icon);
}else if(i=="goback"){
if(p[i]){
btn.addEventListener("click", function(){
obj.bscont.innerHTML="";
obj.setupBtnGroup(obj.buttons);
});
}
}else if(i=="onclick"){
if(typeof p[i]=="object"){
btn[i]=function(){
obj.bscont.innerHTML="";
obj.setupBtnGroup(p[i]);
};
}else{
btn[i]=p[i];
}
}
}
this.bscont.appendChild(btn);
},
setupBtnGroup:function(p){
for(var i in p){
this.addBtn(p[i]);
}
}
};
//example
new btngroup().addBtnGroup({
container:document.body,
buttons:[{
icon:"glyphicon glyphicon-floppy-disk",
text:" SAVE",
bcolor:"primary",
onclick:[
{
icon:"glyphicon glyphicon-thumbs-up",
text:" CONFIRM",
bcolor:"info",
goback:true,
onclick:[
{
icon:"glyphicon glyphicon-ok-sign",
text:" I'm sure",
bcolor:"default",
goback:true,
onclick:function(){
console.log("I'm sure");
}
},{
icon:"glyphicon glyphicon-remove-sign",
text:" I am not sure",
bcolor:"danger",
goback:true,
onclick:function(){
console.log("I am not sure");
}
}
]
},{
icon:"glyphicon glyphicon-thumbs-down",
text:" QUIT",
bcolor:"warning",
goback:true,
onclick:function(){
console.log("QUIT");
}
}
]
},{
icon:"glyphicon glyphicon-arrow-left",
text:" Back",
bcolor:"danger",
onclick:function(){
console.log("go Back");
}
}
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment