在后台项目的开发中 由于数据表单中radioButton和checkButton样式使用的是默认样式。给人感觉提示不明显,所以想要修改一下 默认的样式。具体如下:
radioButton修改
在radioButton控件的setScript()方法中添加以下代码
$form->radioButton('gender', __('性别'))
->options([1=>‘男’,2=>'女'])
->setScript(<<<SCRIPT
//设置当前选中的样式为btn btn-primary active 未选中的样式为btn btn-default
$('.radio-group-toggle label').filter('.active').attr('class','btn btn-primary active').siblings().attr('class','btn btn-default');
//监测点击事件
$('.radio-group-toggle label').click(function() {
$(this).attr('class','btn btn-primary active').siblings().attr('class','btn btn-default');
});
SCRIPT );
checkboxButton修改
在checkboxButton控件的setScript方法中添加以下代码
$form->checkboxButton('education', '学历')
->options([1=>'小学',2='中学',3=>'大学'])->setScript(<<<SCRIPT
//设置样式
$('.checkbox-group-toggle label').filter('.active').attr('class','btn btn-primary active');
//点击事件
$('.checkbox-group-toggle label').click(function(e) {
e.stopPropagation();
e.preventDefault();
//因为在控件的初始化时已经加载了此段js事件监测,所以此处取相反的操作,并且只做对样式的修改
if ($(this).hasClass('active')) {
$(this).attr('class','btn btn-primary active');
} else {
$(this).attr('class','btn btn-default');
}
});
SCRIPT
);