大致写了一个，基础的功能已经实现
<script type="text/javascript">
/**
* 类操作函数
*/
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
/**
* 定义类
*/
var Div2Radio = Class.create();
Div2Radio.prototype = {
initialize: function() {
this.panel = new Object;
this.groupName = "";
this.radioImages = new Array();
this.radioInputs = new Array();
},
/**
* 设置容器
* @param string 容器名
*/
setPanel: function(panelName) {
this.panel = this.$(panelName);
if (!this.panel) {
return false;
}
},
/**
* 添加新组
* @param string 组名
*/
addGroup: function(groupName) {
this.groupName = groupName;
this.radioImages[groupName] = new Array();
this.radioInputs[groupName] = new Array();
},
/**
* 添加按钮
* @param String 按钮值
* @param String 按钮图片
*/
addRadio: function(value, imgSrc) {
var img = document.createElement("img");
img.id = this.groupName + "_input_" + value;
img.src = imgSrc;
img.width = 150;
img.border = null;
this.radioImages[this.groupName].push(img);
var input = document.createElement("input");
input.id = this.groupName + "_input_" + value;
input.type = "radio";
input.name = this.groupName;
input.value = value;
this.setStyle(input, "display", "none");
this.radioInputs[this.groupName].push(input);
this.addListener(img, 'click', this.bind(this, this.onClick, this.groupName, img.id, input.id), false);
this.panel.appendChild(img);
this.panel.appendChild(input);
},
/**
* Radio图片被点击之后的处理
* @param String 按钮的Group
* @param String 选中图片的ID
* @param Srting 选中隐藏按钮的ID
*/
onClick: function(groupName, imgId, inputId) {
for (i=0; i<this.radioImages[groupName].length; i++) {
if (this.radioImages[groupName][i].id == imgId) {
// 图片被选中，执行以下操作
this.setStyle(this.radioImages[groupName][i], "border", "3px solid red");
} else {
// 未被选中的图片，执行以下操作
this.setStyle(this.radioImages[groupName][i], "border", "none");
}
}
// 隐藏的radio
for (i=0; i<this.radioInputs[groupName].length; i++) {
if (this.radioInputs[groupName][i].id == inputId) {
this.radioInputs[groupName][i].checked = true;
} else {
this.radioInputs[groupName][i].checked = false;
}
}
},
// === 工具函数 ==========================================
$: function(id) {
return document.getElementById(id);
},
$A: function(iterable) {
if(!iterable) {
return [];
}
if(iterable.toArray) {
return iterable.toArray();
} else {
var results = [];
for(var i = 0; i < iterable.length; i++) {
results.push(iterable[i]);
}
return results;
}
},
bind: function() {
var array = this.$A(arguments);
var func = array[1];
var _method = func, args = array, object = args.shift();
var param = new Array();
for (var i=1;i<array.length;i++) {
param.push(array[i]);
}
return function() {
return _method.apply(object, param);
}
},
setStyle: function(element, key, value) {
element.style[key] = value;
},
getStyle: function(element, key) {
return element.style[key];
},
addListener: function(element, name, observer, useCapture) {
if(element.addEventListener) {
element.addEventListener(name, observer, useCapture);
} else if(element.attachEvent) {
element.attachEvent('on' + name, observer);
}
},
getElementsByName: function (name, tag) {
var returns = document.getElementsByName(name);
if(returns.length > 0) return returns;
returns = new Array();
var e = document.getElementsByTagName(tag);
for(i = 0; i < e.length; i++) {
if(e[i].getAttribute("name") == name) {
returns[returns.length] = e[i];
}
}
return returns;
}
}
function init() {
// 调用类
var dr = new Div2Radio();
dr.setPanel("form_search");
// 添加一个组，并往组里添加2个图片
dr.addGroup("group1");
dr.addRadio(1,"1.jpg","<p>","</p>");
dr.addRadio(2,"2.jpg","<p>","</p>");
// 添加另一个组，并往组里添加2个图片
dr.addGroup("group2");
dr.addRadio(1,"3.jpg","","");
dr.addRadio(2,"4.jpg","","");
}
</script>
<form id="form_search" method="get">
<input type="submit" />
</form>