JSFiddle - React, Tailwind, and code Playground
HTML
<div id="response">
</div>
CSS
#response {
text-align: center;
font-size: 12px;
height: 200px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
}
#radio label {
color: #FFFFFF;
background-color: #4CCBBC;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4CCBBC), color-stop(1, #1A5351) );
background:-moz-linear-gradient( center top, #4CCBBC 5%, #1A5351 100% );
box-shadow:inset 0px 1px 0px 0px #DFDFC6;
-moz-box-shadow:inset 0px 1px 0px 0px #DFDFC6;
-webkit-box-shadow:inset 0px 1px 0px 0px #DFDFC6;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4CCBBC', endColorstr='#1A5351');
}
#radio label:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4CCBBC), color-stop(1, #4CCBBC) );
background:-moz-linear-gradient( center top, #4CCBBC 5%, #4CCBBC 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4CCBBC', endColorstr='#4CCBBC');
background-color:#4CCBBC;
}
JavaScript
var templates = new myTemplates();
$(document).ready(function() {
var elementInfo = { 'type' : "radio",
'choices' : [ 'Disagree Very Strongly', 'Disagree Strongly',
'Disagree', 'Agree','Agree Strongly', 'Agree Very Strongly']
};
$( "#response" ).append( templates.getTemplate(elementInfo) );
var elementDiv = $('#' + elementInfo['type']);
elementDiv.buttonset();
var maxWidth = Math.max.apply(null, $(".ui-button").map(function () {
return $(this).outerWidth(true);}).get());
$(".ui-button").css({"width" : maxWidth});
});
function myTemplates(){
this.radio = function(choices){
radio = '<form><div id="radio" class=".radio">';
for (var i=0, c; c = choices[i]; i++){
radio += '<input type="radio" id="radio' + i;
radio += '" name="radio" />';
radio += '<label for="radio' + i;
radio += '"> ' + c;
radio += ' </label>';
};
radio += '</div></form>';
return radio;
};
this.getTemplate = function(infoHash){
var type = infoHash['type'];
if (type == 'radio'){
return this.radio( infoHash['choices'] );
}
else {
alert('template.js: no such template');
}
return false;
};
};