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