没有合适的资源?快使用搜索试试~ 我知道了~
基于jquery扩展漂亮的CheckBox(自己编写)
需积分: 3 0 下载量 69 浏览量
2020-12-04
04:54:44
上传
评论
收藏 81KB PDF 举报
温馨提示
试读
2页
大家都知道默认的html复选框控件样式可定义相当有限,无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的CheckBox控件。喜欢的朋友可以拿去使用,有什么好的建议希望你给我留言。废话不多说,切入正题。 Html部分代码如下: 代码如下: <b class=”combox”></b> Css部分代码如下: 代码如下: .combox{float:left;background:url(/img/Icon_BG.png);} .combox{width:16px;height:16px;background-position:-21px -40px;cursor:pointe
资源详情
资源评论
资源推荐
基于基于jquery扩展漂亮的扩展漂亮的CheckBox(自己编写自己编写)
大家都知道默认的html复选框控件样式可定义相当有限,无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编
写的CheckBox控件。喜欢的朋友可以拿去使用,有什么好的建议希望你给我留言。废话不多说,切入正题。
Html部分代码如下:
代码如下:
<b class=”combox”></b>
Css部分代码如下:
代码如下:
.combox{float:left;background:url(/img/Icon_BG.png);}
.combox{width:16px;height:16px;background-position:-21px -40px;cursor:pointer;font-size:9px;}
.combox.checked{background-position:-37px -40px;}
Js部分代码如下:
1、自定复选框类
代码如下:
//复选框
var CheckBox = function () {
this.obj;
var _this = this, _obj;
//初始化
this.init = function () {
_obj = _this.obj;
var tem = _obj.length > 1 ? _obj.eq(0) : _obj;
if (tem.length == 1 && tem.attr(‘class’).indexOf(‘combox’) == -1) {
showMessage(“控件属性设置有误:部分控件并不是复选框!”);
return;
}
//对象单击事件
var click_fun = function (obj) {
if (obj.attr(‘class’).indexOf(‘checked’) > -1) {
obj.removeClass(‘checked’);
_this.click_cancel();
} else {
obj.addClass(‘checked’);
_this.click_callback();
}
}
//设置有文字复选框
if (_obj.attr(‘_txt’) != undefined) {
_obj.each(function (i) {
var cb = _obj.eq(i);
cb.wrapAll(‘<font class=”cb_txt”></font>’);
//文本单击事件
cb.parent().append(cb.attr(‘_txt’)).click(function () { click_fun(cb); });
});
} else//对象点击事件
_obj.unbind(‘click’).click(function () { click_fun($(this)); });
}
//点击回调事件
this.click_callback = function () { }
//取消选择事件
this.click_cancel = function () { }
}
2、调用如下:
代码如下:
var checkbox = new CheckBox();
checkbox.obj = $(‘.content ul li .combox’);
//点击回调事件 根据自己的需求去调整,默认没有相应操作事件,可以不用赋值
checkbox.click_callback = function () { fun_setPay(); }
//取消选择事件
checkbox.click_cancel = function () { fun_setPay(); }
checkbox.init();
使用的图片:
weixin_38618819
- 粉丝: 4
- 资源: 894
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0