<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Radiogram</title>
<link rel="stylesheet" href="http://thesabbir.github.io/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css">
<script type="text/javascript" src="dist/radiogram.min.js"></script>
<style type="text/css">
/* HTML5 Boilerplate accessible hidden styles */
[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px; margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* One radio button per line */
label {
display: block;
cursor: pointer;
line-height: 2.5;
font-size: 1.5em;
}
[type="radio"] + span {
display: block;
}
/* the basic, unchecked style */
[type="radio"] + span:before {
content: '';
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.25em;
border-radius: 1em;
border: 0.125em solid #fff;
box-shadow: 0 0 0 0.15em #000;
margin-right: 0.75em;
transition: 0.5s ease all;
}
/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before {
background: green;
box-shadow: 0 0 0 0.25em #000;
}
/* never forget focus styling */
[type="radio"]:focus + span:after {
content: '\0020\2190';
font-size: 1.5em;
line-height: 1;
vertical-align: -0.125em;
}
/* Nothing to see here. */
body {
margin: 3em auto;
max-width: 30em;
font-family: Cabin, serif;
}
fieldset {
font-size: 1em;
border: 2px solid #000;
padding: 2em;
border-radius: 0.5em;
}
legend {
color: #fff;
background: #000;
padding: 0.25em 1em;
border-radius: 1em;
}
.p {
text-align: center;
font-size: 14px;
padding-top: 120px;
}
ul{ list-style:outside none; padding:0; margin:0;}
ul.radiogram li{display: inline-block;margin-right: 15px;width: 20%;height: 80px;background-color: transparent; border:1px solid transparent;text-align: center;}
ul.radiogram li:hover{border:1px solid #16abf0; cursor:pointer;}
ul.radiogram li [type="radio"]{display:none;}
ul.radiogram li i,ul.radiogram li > div, ul.radiogram li table, ul.radiogram li div, ul.radiogram li span{ display:block;}
ul.radiogram li i {font-size: 54px;}
</style>
</head>
<body>
<div id="doxcy"><h3>by using ID as Selector</h3></div>
<div class="doxcy"><h3>by using CLASS as Selector</h3></div>
<div id="gander"><h3>by using CLASS as Selector</h3></div>
<script>
obj = {
name : "form[fieldname][]", //RSForm RadioGroup - Input Button use to be in this form.
layout : [ '<div><i class="fa fa-cc-paypal" style="color: #075884;"></i><span>layout1</span></div>',
'<div><i class="fa fa-cc-stripe" style="color: #16abf0;"></i><span>layout2</span></div>',
'<div><i class="fa fa-cc-visa" style="color: #f3d709;"></i><span>layout3</span></div>'
]
};
//usage#1 Same OBJECT[Layout] but by using selector as a class
Radiogram.build('#doxcy',obj);
//usage#2 Same OBJECT[Layout] but by using selector as a class
obj = {
name : "form[fieldname][]", //RSForm RadioGroup - Input Button use to be in this form.
layout : [ '<div><i class="fa fa-cc-amex" style="color: #34C354;"></i><span>layout4</span></div>',
'<div><i class="fa fa-cc-mastercard" style="color: #f08216;"></i><span>layout5</span></div>',
'<div><i class="fa fa-cc-jcb" style="color: #8c8677;"></i><span>layout6</span></div>'
]
};
Radiogram.build('.doxcy',obj);
//EXAMPLE2 MALE/FEMALE Radio Group buttons
obj = {
name : "form[fieldname2][]", //RSForm RadioGroup - Input Button use to be in this form.
layout : [ '<div><i class="icon-user icons" style="color: #ec482e;"></i><span>Male</span></div>',
'<div><i class="icon-user-female icons" style="color: #16abf0;"></i><span>Female</span></div>',
'<div><i class="icon-people icons" style="color: #f3d709;"></i><span>Others</span></div>'
]
};
Radiogram.build('#gander',obj);
</script>
</body>
</html>
|
Download
