转载请注明出处:http://renjie120.iteye.com/
无聊的很,就看了一下以前的经常写的这个小玩意.使用jquery插件的方式完成了代码.
以前写的表格树,因为太多代码了,重构几乎不可能了,所以这次写这个小玩意的时候完全是使用了jquery插件的开发方式.
源码如下:
(function($){
var docloaded = false;
$(document).ready(function () {docloaded = true} );
$.fn.doubleSelect = function(c){
if (!docloaded)
{
$(document).ready
(
function ()
{
$.addDoubleSelect(c);
}
);
} else {
$.addDoubleSelect(c);
}
}
$.addDoubleSelect=function(c){
c=$.extend({
height:'100px',
width:'100px',
left:null,
right:null,
addBtn:null,
removeBtn:null,
addAllBtn:null,
removeAllBtn:null,
noAdd:'请选择要添加的项目',
noRemove:'请选择要移除的项目',
option:'2'
},c);
var dbs = {
init:function(){
dbs.lbtn.click(this.add);
dbs.rbtn.click(this.remove);
dbs.l.dblclick(this.add).height(c.height).width(c.width);
dbs.r.dblclick(this.remove).height(c.height).width(c.width);
dbs.alAdBtn.click(this.addAll);
dbs.alRmBtn.click(this.rmAll);
},
addAll:function(){
dbs.addall(dbs.l,dbs.r);
},
rmAll:function(){
dbs.rmall(dbs.r,dbs.l);
},
add:function(){
if($('option:selected',dbs.l).size()<1){
alert(c.noAdd);
return;
}
dbs.mv(dbs.l,dbs.r);
},
remove:function(){
if($('option:selected',dbs.r).size()<1){
alert(c.noRemove);
return;
}
if(c.option=='1')
$('option:selected',dbs.r).remove();
else{
dbs.mv(dbs.r,dbs.l);
}
},
addall:function(a,b){
$('option',a).each(function(){
if($('option[value='+this.value+']',b).size()<1){
b.append(["<option value='",this.value,"'>",this.text,"</option>"].join(''));
}
if(c.option=='2')
$(this).remove();
});
},
rmall:function(a,b){
$('option',a).each(function(){
if($('option[value='+this.value+']',b).size()<1){
b.append(["<option value='",this.value,"'>",this.text,"</option>"].join(''));
}
$(this).remove();
});
},
mv:function(a,b){
$('option:selected',a).each(function(){
if($('option[value='+this.value+']',b).size()<1){
b.append(["<option value='",this.value,"'>",this.text,"</option>"].join(''));
}
if(c.option=='1')
this.selected = false;
else{
$(this).remove();
}
});
}
};
dbs.l = $('#'+c.left);
dbs.r = $('#'+c.right);
dbs.lbtn = $('#'+c.addBtn);
dbs.rbtn = $('#'+c.removeBtn);
dbs.alAdBtn = $('#'+c.addAllBtn);
dbs.alRmBtn = $('#'+c.removeAllBtn);
dbs.init();
};
})(jQuery);
测试页面:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dblSelect.js"></script>
<script type="text/javascript">
$(function() {
//设置按钮宽度
$('button').width('50px');
//使用双下拉菜单插件
$(document).doubleSelect({
left:'l',//左边的下拉菜单的id
right:'r',//右边下拉菜单的id
width:'150px',//下拉菜单宽度
height:'200px',//高度
addBtn:'add',//添加按钮id
removeBtn:'remove',//删除按钮id
addAllBtn:'addAll',//添加全部按钮id
removeAllBtn:'removeAll',//删除全部按钮id
noAdd:'没有选择要添加的item!',
noRemove:'没有选择要删除的item!',
option:'2'//有1,2两种模式,一种(option='1')是左边移除到右边左边不会减少,另外一种会减少(option=2,默认)!
});
});
</script>
</head>
<body>
<table><tr><td>
<SELECT id="l" style="width:100px;" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</SELECT></td>
<td><button id='add'>添加</button><br><button id="remove">删除</button><br>
<button id='addAll'>全添加</button><br><button id="removeAll">全删除</button></td>
<td>
<SELECT id="r" style="width:100px;" multiple="multiple">
</SELECT></td></tr></table>
1.支持双击select添加,或者移除<br>
2.提供两种模式的下拉菜单的选择,通过option设置
</body>
</html>
- 大小: 7.9 KB
分享到:
相关推荐
jQuery,一个轻量级、高性能的JavaScript库,提供了丰富的API和插件来帮助开发者创建功能强大的下拉菜单。本文将深入探讨jQuery下拉菜单插件的原理和实现方法,并结合提供的文件`jquery.tzSelect.zip`进行实例分析。...
这段代码使用了jQuery的`hover`方法,它接受两个参数,分别对应`mouseenter`和`mouseleave`事件的回调函数。`slideToggle`和`slideUp`是jQuery的动画方法,用于平滑地改变元素的高度,从而实现展开和收起的效果。 ...
在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中,包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先,`demo.html`是演示页面,它展示了如何在实际项目中应用这个插件。这个页面会包含一...
Image DropDown的核心功能在于它能够为每个下拉菜单选项添加小图标,这使得菜单变得更加直观,用户可以通过图标快速识别出各个选项的含义。例如,对于一个包含多种操作(如保存、删除、编辑)的下拉菜单,可以分别...
综上所述,"jQuery多功能搜索框插件下拉菜单选择代码"是一个实用且灵活的前端组件,它结合了jQuery的便利性和Bootstrap的美学,为用户提供了一个高效、直观的搜索体验。通过学习和理解这个项目,开发者不仅可以掌握...
"jQuery大型下拉菜单插件booNavigation"就是这样一个工具,专为创建高效且具有视觉吸引力的下拉菜单而设计。这款插件基于JavaScript库jQuery,简化了开发过程,使得即使是对前端编程不太熟悉的开发者也能轻松实现...
本文将深入探讨一款基于jQuery和CSS3的超酷二级下拉菜单特效插件,这款插件能够为您的网站增添动态效果,提升用户界面的吸引力。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理...
通过以上步骤,我们就可以创建一个既美观又实用的jQuery CSS3下拉菜单。这种方法的优点在于,它允许开发者在不牺牲性能的前提下,创造出吸引人的动态效果。同时,由于主要依赖CSS3,所以该方法在现代浏览器中有着很...
通过以上步骤,我们就成功地创建了一个具备多种展现方式、图文并茂的jQuery下拉菜单。在实际项目中,还可以根据需求进一步优化,如添加过渡动画、触发动画等,提升用户交互体验。记住,jQuery提供的强大工具和丰富的...
一个jquery的下拉菜单插件自己写的jquery下拉菜 Dropdown Jquery1.32
在网页设计中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript的使用,使得动态交互效果的实现变得更为便捷。本文将深入探讨如何利用jQuery来创建功能丰富的下拉菜单。 一、jQuery简介 jQuery是由...
【标题】"商城网站多级下拉菜单,jquery插件版.rar" 描述了一个用于创建类似于京东、淘宝等大型电商网站的多级下拉导航菜单的jQuery插件。这种插件是网页设计中的一个重要组成部分,它能有效地组织大量分类商品,...
本资源包含两款支持多级下拉的jQuery导航菜单代码,非常适合需要构建层级结构清晰、响应式的网站。 首先,我们来看第一款jQuery下拉导航菜单。这款菜单利用了jQuery的事件监听和DOM操作功能,实现了鼠标悬停时展开...
这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件,允许用户通过三个连续的下拉列表分别选择年、月和日。这种设计使得用户能够快速、准确地输入日期,同时保持页面的简洁性...
Mutiselect是一个流行的jQuery插件,它提供了美观的多选下拉效果。它可能包含了自定义样式、搜索过滤、分页等功能,使得用户在大量选项中更容易找到并选择所需项。 5. **JqueryMultiselect2017**: 这可能是另一...
"jQuery自适应横排下拉菜单导航代码"提供了一个高效且美观的解决方案,尤其适合那些希望提升用户体验的开发者。这个代码利用jQuery库实现,能够根据屏幕尺寸自动调整布局,确保在各种设备上都能良好地展示。 首先,...
标题中的“jquery日期控件(有下拉菜单选择年份)”指的是这个定制的jQuery插件,它改进了原有的日期输入功能,特别是年份的选择方式。传统的日期控件通常通过弹出日历或者点击按钮逐个选择年份,这种方式可能会让...
要创建一个jQuery无限级下拉菜单,首先确保引入了jQuery库。你可以从jQuery官方网站下载,或者通过CDN(内容分发网络)链接来引入: ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>...
jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表 jquery html5动画下拉菜单鼠标点击展开多级下拉菜单列表
这段代码使用了jQuery的`hover`方法,它接受两个函数参数,分别对应鼠标进入和离开时的回调。`stop(true, true)`用于停止当前动画并立即跳转到最后的状态,`fadeIn`和`fadeOut`则用于平滑地显示和隐藏子菜单。 综上...