<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
body
{
-moz-user-focus:ignore; /*ff中禁止鼠标选择*/
-moz-user-input:disabled;
-moz-user-select:none;
}
#content{
margin:0 auto;
text-align:center;
position:relative;
background-color:#ddd;
width:1200px;
height:500px;
}
#checks{
position:absolute;
left:200px;
top:100px;
z-index:1;
width:100px;
height:350px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="content">
<div id="checks">
<form id="form1">
<ul>
<li><label for="1">编号01：</label><input id="1" type="checkbox" /></li>
<li><label for="2">编号02：</label><input id="2" type="checkbox" /></li>
<li><label for="3">编号03：</label><input id="3" type="checkbox" /></li>
<li><label for="4">编号04：</label><input id="4" type="checkbox" /></li>
<li><label for="5">编号05：</label><input id="5" type="checkbox" /></li>
<li><label for="6">编号06：</label><input id="6" type="checkbox" /></li>
<li><label for="7">编号07：</label><input id="7" type="checkbox" /></li>
<li><label for="8">编号08：</label><input id="8" type="checkbox" /></li>
<li><label for="9">编号09：</label><input id="9" type="checkbox" /></li>
<li><label for="10">编号10：</label><input id="10" type="checkbox" /></li>
<li><label for="11">编号11：</label><input id="11" type="checkbox" /></li>
<li><label for="12">编号12：</label><input id="12" type="checkbox" /></li>
<li><label for="13">编号13：</label><input id="13" type="checkbox" /></li>
<li><label for="14">编号14：</label><input id="14" type="checkbox" /></li>
<li><label for="15">编号15：</label><input id="15" type="checkbox" /></li>
<li><label for="16">编号16：</label><input id="16" type="checkbox" /></li>
<li><label for="17">编号17：</label><input id="17" type="checkbox" /></li>
<li><label for="18">编号18：</label><input id="18" type="checkbox" /></li>
<li><label for="19">编号19：</label><input id="19" type="checkbox" /></li>
</ul>
</form>
</div>
</div>
<script>
/*
* 鼠标移动形成的选择框来选择checkbox；
* made by keimon
* 2013-03-20
*/
$(function(){
//设置content的宽度是窗口宽度；高度是窗口高度；
$('#content').width($(window).width());
$('#content').height($(window).height());
//取消鼠标移动对元素的选择作用；
document.onselectstart = document.oncontextmenu = function(){return false}
//x1,y1是鼠标按下时光标的位置，x2，y2是鼠标移动时光标的位置；
var x1=0, x2=0, y1=0, y2=0;
//w是选择框的宽度，h是选择框的高度，l是选择框离左边窗口的距离，t是选择框离上边窗口的距离；
var w=0, h=0, l=0, t=0;
//用于判断鼠标是否按下；
var isDown = false;
//box用于放置选择框div；
var box=null;
//选择框的样式
var boxStyle = {
width:'10px',
height:'10px',
top:'0px',
height:'0px',
position:'absolute',
border:'1px solid #CCCCCC',
'background-color':'#FFFFCC',
opacity:'0.3',
filter:'alpha(opacity:30)',
'z-index':'10'
}
$(document).mousedown(function(event){
isDown = true;
x1 = event.pageX;
y1 = event.pageY;
//创建选择框；
box = document.createElement('div');
$(box).css(boxStyle);
$('#content').append($(box));
})
$(document.body).mousemove(function(event){
if(isDown){
x2 = event.pageX;
y2 = event.pageY;
w = Math.abs(x1-x2);
h = Math.abs(y1-y2);
l = x1<x2 ? x1:x2;
t = y1<y2 ? y1:y2;
$(box).css({left:l+'px',top:t+'px',width:w+'px',height:h+'px'});
}
})
$(document).mouseup(function(){
isDown = false;
$('#content').find($(box)).remove();
for(var i=0; i<$('li').length; i++){
//下面注释掉的是用原生js获得元素相对于当前窗口的位置；
//var tt = $('li').eq(i).get(0).offsetParent.offsetTop + $('li').eq(i).get(0).offsetTop;
//var ll = $('li').eq(i).get(0).offsetParent.offsetLeft + $('li').eq(i).get(0).offsetLeft;
//jquery的offset获得元素相对于当前窗口的位置
var tt = $('li').eq(i).offset().top;
var ll = $('li').eq(i).offset().left;
if(ll>l && ll<l+w && tt>t && tt<t+h){
$('li').eq(i).find('input').attr('checked',!$('li').eq(i).find('input').attr('checked'));
}
}
})
})
</script>
</body>
</html>
相关推荐
在IT行业中，实现“checkbox鼠标拖拽框选”功能是一项常见的交互设计，它极大地提高了用户在操作大量复选框时的效率。这个功能通常应用于文件管理器、数据筛选或者自定义设置等场景，让用户能够通过鼠标拖动快速选择...
- 可能需要添加一个标记来确定是否处于框选模式，避免鼠标移动过程中误触发其他事件。 - 为了提高性能，可以使用`HitTest`方法检查checkbox是否位于矩形内，而不是简单地比较坐标。 - 考虑边界条件，确保在鼠标...
易语言自绘选择框源码,自绘选择框,测试消息,重绘_Checkbox,选择框_鼠标移动,初始化,调用旧窗口过程,GetWindowTitle,取位高,取位低,UI_API_SetWindowLong,UI_API_CallWindowProc,UI_EndPaint,UI_BeginPaint,UI_取窗口...
在JavaScript的世界里，"JS原生双栏穿梭选择框"是一种常见的交互元素，它通常用于数据筛选、分类或分配任务等场景。这个功能的核心在于，用户可以通过选择左侧栏的选项，然后通过点击方向键（或者其他的触发方式）将...
5. **响应式设计**：在移动设备上，复选框的美化也需考虑触摸操作，确保触摸区域足够大，易于用户选择。 在提供的`index.html`文件中，应该包含了实现这些效果的HTML结构、CSS样式和可能的JavaScript代码。通过分析...
源码中的实现可能会包含易语言的事件驱动编程模型，例如响应按钮点击事件、鼠标移动事件等，以及使用GDIPlus模块的函数调用来完成实际的绘制工作。开发者需要注意的是，自绘控件需要处理好与系统默认控件的交互，...
利用媒体查询（media queries）可以实现复选框在移动设备和平板上的特定样式调整。 6. **自定义组件**：Bootstrap提供了一些自定义组件，如`custom-checkbox`，它们允许你完全自定义复选框的外观。通过使用这些组件...
悬浮窗口通常指的是在网页或应用主界面之上，始终可见并可随鼠标移动的小窗口。它提供额外的信息或者功能，不干扰用户对主要内容的操作。悬浮窗口的设计可以提高用户效率，因为他们无需离开当前页面即可完成特定任务...
在IT领域，尤其是在前端开发中，构建用户友好的交互界面是一项关键任务。zTree是一款流行的JavaScript库，...了解并掌握zTree的CheckBox、Radio选择以及树形移动等功能，对于提升用户体验和优化项目管理具有重要意义。
在IT领域，尤其是在前端开发中，"SelectBox下拉复选框多选插件"是一种常用的用户界面元素，用于提供用户友好的多选项选择功能。它结合了传统的下拉列表和复选框的特性，使得在有限的空间内，用户能够方便地筛选和...
可以通过重载_WM_HSCROLL或_WM_VSCROLL消息处理程序来跟踪鼠标移动。当鼠标在列表框上时，发送LB_GETITEMRECT消息获取指定索引项的矩形，然后比较鼠标坐标以确定当前项。另外，可以利用GetMessagePos函数获取鼠标...
在鼠标移动时（`mousemove`），我们根据鼠标移动的距离更新元素的位置；最后，当用户释放鼠标按钮（`mouseup`），我们停止更新。 多选框（`checkbox`）是HTML中的一种表单元素，用于让用户可以选择一个或多个选项。...
在IT领域，"DTree & CheckBox"通常指的是一个JavaScript库或组件，用于创建具有复选框功能的可交互的无限层级树形结构。这个组件在Web应用中非常常见，特别是在需要展示分层数据并允许用户进行多选操作的场景下。 ...
这里 `Myframe` 类继承了 `JFrame` 并实现了 `ActionListener`、`MouseListener` 和 `MouseMotionListener` 接口，这意味着它可以处理用户的动作事件、鼠标事件和鼠标移动事件。 ### 3. 使用 Graphics 对象绘图 在...
`:checked`伪类用于检测复选框是否被选中，`:hover`则在鼠标悬停时改变样式，`:active`则在元素被点击时应用特定样式。通过结合这些伪类，可以为不同操作状态定义不同的样式，从而实现按钮的动态效果。 在压缩包内...
在网页设计中，Radio单选项和Checkbox复选框是常见的表单元素，用于收集用户的选择信息。然而，由于浏览器的安全限制，直接通过CSS（层叠样式表）来改变Radio和Checkbox的默认样式通常是无效的。这是因为这些原生的...
- **鼠标移动事件**：`mousemove([fn])` - 当鼠标在元素上移动时触发。 - **错误事件**：`error([fn])` - 当发生错误时触发。 - **鼠标移出事件**：`mouseout([fn])` - 当鼠标指针从元素上移出时触发。 - **获得...
TTorryButton 是增强型的 TSpeedButton 构件，外观如同一个普通的 TLabel 般，当鼠标移动至按钮上方，立即显示出按钮边框及加亮的LED 类型.带Exe演示程序 jcheck10.zip 12K 作者: Jan Hulala。 Windows98 外观的...
| checkbox | 布尔 | 是否显示复选框。 | False | | method | 字符串 | 定义动画效果显示方式。 | post | | caseadeCheck | 布尔 | 是否启用层叠约束。 | True | | onlyLeafCheck | 布尔 | 是否仅对叶节点显示复选框...