(function($){
/*-----------------------------------------------------------------/
功能:用鼠标拖拉来选中checkbox
参数:无
返回:原调用对象
示例:$('#testtable').squareSelection();
author: hushuilong
email: hushuilong@gmail.com
/-----------------------------------------------------------------*/
$.fn.squareSelection=function(){
var container = $(this);
var stop_pop = function(e) {
try {
e.stopPropagation();
} catch(err) {
window.event.cancelBubble = true;
}
};
var box = function(){
if($('#square_selection_box').length == 0){
$('<div></div>',{id:'square_selection_box', style: [
'position:absolute; top:0; left:0;',
'border:1px solid #072246; background: #6bb0c9;',
'filter:Alpha(Opacity=15); opacity:0.15;',
'overflow:hidden;display:none;z-index:99999;'
].join('')}).appendTo(document.body);
}
return $('#square_selection_box');
};
var init = function(){
document.oncontextmenu=function(){ return false; };
$(container).find(':checkbox').mousedown(function(e){
stop_pop(e);
});
// mouse up
$(document).bind('mouseup', function(event){
$(container)[0].setCapture && $(container)[0].releaseCapture();
if(box().css('display') != 'none') {
var box_offset_top = box().offset().top;
var box_offset_bottom = box().offset().top + box().height();
$(container).find(':checkbox').each(function(i,item){
var offset_top = $(item).offset().top;
var offset_bottom = $(item).offset().top + $(item).height();
if (offset_bottom >= box_offset_top && offset_top <= box_offset_bottom) {
$(item).attr('checked',true);
}
});
}
box().hide();
$(container).unbind('mousemove');
});
// mouse down
$(container).mousedown(function(event){
event.preventDefault && event.preventDefault(); // 阻止默认行为发生
$(container).find(':checkbox').attr('checked',false);
var startPos = {
top: event.clientY + $(document).scrollTop(),
left: event.clientX + $(document).scrollLeft()
};
this.setCapture && this.setCapture();
// mouse move
$(container).unbind('mousemove').mousemove(function(event){
document.selection && document.selection.empty(); // for ie 取消选择
window.getSelection && window.getSelection().removeAllRanges(); // for non ie 取消选择
var top = event.clientY + $(document).scrollTop();
var left = event.clientX + $(document).scrollLeft();
var endPos = {
top: Math.max(top, container.offset().top),
left: Math.max(left, container.offset().left)
};
var fixedPoint = { // 设置定点
left: endPos.left > startPos.left ? startPos.left : endPos.left,
top: endPos.top > startPos.top ? startPos.top : endPos.top
};
var w = Math.min(Math.abs(endPos.left - startPos.left), container.offset().left + container.width() - fixedPoint.left);
var h = Math.min(Math.abs(endPos.top - startPos.top), container.offset().top + container.height() - fixedPoint.top);
box().show().css({left: fixedPoint.left+'px', top: fixedPoint.top+'px', width: w+'px', height: h+'px'});
});
});
}
init();
return $(this);
};
})(jQuery);
花了一个晚上研究出来的一个
jquery
插件,
用鼠标拖拉来选中
checkbox
用鼠标拖拉来选中
checkbox
用法: 在上面的红框里面点击鼠标左键(或右键),按住不动,移动鼠标 形成选区,再释放鼠标
分享到:
相关推荐
jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框
checkBox分别处理选中与不选中checkBox分别处理选中与不选中
jquery checkbox 选中 取消 checkbox多选
JS判断是否选中checkbox
JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
checkbox多项选中及取消选中
鼠标拖拽出一个矩形,矩形范围内的checkbox将被选中。类似windows 框选文件一样
点击按钮获取选中的CheckBox值,JQ实现,代码非常简单。
简单实现自定义checkbox控件四种选择状态的图片样式
所以checkbox为false。...把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基
循环动态判断checkbox是否被选中foreach(Control c in Panel1.Controls)
android listview复选框,包括全选,反选,取消选择,确认删除,androidStudio环境中的demo
CheckBox 选中效果 选中子的父自动选中,选中父的子全部选中 适用于C:Foreach 读取${list} 然后选中的选项添加到数据库
通过CheckBox删除选中记录
jquery获取checkbox选中的值,包括全选 取消全选 反选 选中奇数行 获取选中的值
代码中简单易懂的获取所选中的CheckBox的值
巧用struts标签之checkboxlist选中默认值换行处理
CSS3选中Checkbox复选框动画SVG.rar
Android中Selsetor选中时改变CheckBox背景,在开发中非常常用,我们通常会用到单选框,多选框,在实际项目中,默认的颜色不会满足我们的要求,所以,我们需要自己设置,这是我写的一个例子希望能和大家交流学习