I'd trying to use the jquery.imagetick.min.js plugin (http://ajaxdump.com/?DgyQHXJO) to replace my radioboxes with divs of different colors.
How can i modify the jquery to show the correct color for each box displayed? At the moment i can get them all to display a single color but am unsure how to get them tI'm a little stuck!
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.imagetick.min.js"></script>
<script type="text/javascript">
// Apply styling to radio boxes for color selector
$(function(){
$("input[name='color_select']").imageTick({
custom_button: function($label){
$label.hide();
return '<div class="custom-radio yellow_box"></div>';
}
});
});
</script>
</head>
<style>
#container {
margin: 50px;
}
.custom-radio {
margin-right: 3px;
padding: 20px;
display: inline;
}
.custom-radio.selected {
border: 5px solid black;
}
.purple_box {
background-color: #9873da;
}
.blue_box {
background-color: #77abcc;
}
.red_box {
background-color: #cf444c;
}
.yellow_box {
background-color: #fbc239;
}
.orange_box {
background-color: #ee8d13;
}
.green_box {
background-color: #66c516;
}
</style>
<body>
<div id="container">
<input type="radio" id="yellow" name="color_select" value="yellow" class="custom-radio yellow_box" checked/>
<input type="radio" id="orange" name="color_select" value="orange" class="custom-radio orange_box" />
<input type="radio" id="red" name="color_select" value="re开发者_开发技巧d" class="custom-radio red_box" />
<input type="radio" id="green" name="color_select" value="green" class="custom-radio green_box" />
<input type="radio" id="blue" name="color_select" value="blue" class="custom-radio blue_box" />
<input type="radio" id="purple" name="color_select" value="purple" class="custom-radio purple_box" />
</div>
</body>
</html>
Instead of this
return '<div class="custom-radio yellow_box"></div>';
try this
return '<div class="' + $label.attr('class') + '"></div>';
精彩评论