自定义样式的radio控件
先看效果
在有些地方默认的radio效果已经不能满足很多交互需求
如果抛弃默认的radio控件又会丢失很多重要的属性,比如后退或者F5之后表单信息的存储.
利用label与input的对应关系,把radio隐藏,显示label标签
然后根据name属性利用js对表单分组处理
原理就是这样的
html代码:
CSS部分：
.form .tb-radio {
display: none;
width: 0;
height: 0;
margin: 0;
padding: 0;
position: absolute;
}
.form .tb-radio-label {
line-height: 26px;
height: 26px;
border: 1px solid #ddd;
display: inline-block;
padding: 1px 17px;
outline: none;
cursor: pointer;
margin-top: 15px;
}
.form .tb-radio-label.crt,
.form .tb-radio-label:hover,
.form .tb-radio-label.hover,
.form .tb-radio-label:focus {
border: 2px solid #ff6600;
line-height: 26px;
*line-height: 27px;
_line-height: 26px;
height: 26px;
padding: 0 16px;
background-color: #eaeaea;
outline: none;
}
.form .tb-radio-label.crt {
background: url(images/sprites.png) no-repeat 100% -702px;
background-color: #eaeaea;
}
JS部分：
KISSY.ready(function(S){
//代码开始
var DOM = S.DOM,
Event = S.Event;
var TBRadioLabels = S.query('.J_Radio');
//从checked状态中读取选择情况
S.each(TBRadioLabels,function(i){
var t_radio = getInputByLabel(i);
if(t_radio.checked){
DOM.addClass(i,'crt');
}
});
//点击或者回车触发选择
Event.on(TBRadioLabels,'click keydown',function(ev){
if(!S.isUndefined(ev.keyCode) && ev.keyCode != 13 && ev.keyCode != 0) return ;
var radioGroup = DOM.attr(getInputByLabel(ev.currentTarget),'name');
S.each(TBRadioLabels,function(i){
if(DOM.attr(getInputByLabel(i),'name') === radioGroup){
DOM.removeClass(i,'crt');
}
});
getInputByLabel(ev.currentTarget).checked = true;
DOM.addClass(ev.currentTarget,'crt');
});
//通过label获取对应的input
function getInputByLabel(label){
var inputId = '#'+DOM.attr(label,'for');
return S.get(inputId);
}
});
附上demo:http://lansepink.appspot.com/media/aglsYW5zZXBpbmtyDQsSBU1lZGlhGJqJJAw/radio.htm
还没有评论