js 左边移动到右边插件

endual

浏览: 3544334 次
性别:
来自: 杭州

最近访客更多访客>>

wrgjwrrjurhj

sindyqiu

kristy_yy

whzresponse

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery+css模拟select控件的左边移动到右边的功能丨芯晴网页特效丨CsrCode.Cn</title>

*{ margin:0; padding:0; font-size:12px;}

#wBox{ width:524px; float:left; margin:20px;}

#wBox ul{ border:1px solid #09F; width:168px; float:left; list-style:none; padding:10px; height:200px; overflow:auto;}

#wBox ul li{ border:1px solid #ccc; height:22px; line-height:22px; text-align:center; margin:3px; cursor:pointer;}

#wBox ul li.noSelect{ border-color:#000; background:#eee; color:#ccc; cursor:default;}

#wBox ul li.biaoji{ background:#FFC; border-color:#F90; font-weight:bold;}

#wBox ul#listBox1{ margin-right:10px;}

#wBox ul#listBox2{ float:right;}

button{ font-size:14px; padding:0 15px; margin:20px; display:block;}

.cf{ clear:both;}

</style>

$(function(){

//清空

var lival = "";

$('#liVal').val(lival);

//选择

$('#wBox li:not(".noSelect")').live('click',function(){

$(this).toggleClass('biaoji');

})

//添加

$('#liAdd').click(function(){

if($('#listBox1>li').hasClass('biaoji')){

var selectLi = $('#listBox1>li.biaoji');

var liHtml = "";

lival = $('#liVal').val();

for(var i=0; i<selectLi.length; i++){

liHtml += '<li>'+selectLi.eq(i).html()+'</li>';

lival += selectLi.eq(i).find('em:first').text()+',';

$('#liVal').val(lival);

selectLi.eq(i).remove();

}

$(liHtml).appendTo('#listBox2');

}else{

alert('请选择');

}

})

//移除

$('#liRemove').click(function(){

if($('#listBox2>li').hasClass('biaoji')){

var selectLi = $('#listBox2>li.biaoji');

var liHtml = "";

for(var i=0; i<selectLi.length; i++){

liHtml += '<li>'+selectLi.eq(i).html()+'</li>';

var liMove = selectLi.eq(i).find('em:first').text()+',';

liMove = $('#liVal').val().replace(liMove,'');

$('#liVal').val(liMove);

selectLi.eq(i).remove();

}

$(liHtml).appendTo('#listBox1');

}else{

alert('请选择');

}

})

});

</script>

</head>

<body>

</ul>

</div>

</body>

</html>

<br><br><br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js">jquery-1.6.2.min.js</a><br><br> 用到了比较多的CSS和JavaScript代码，有的地方是用select做的，<br>这个是用ul模拟的，不支持shift多选，只能一个一个点，取值是字符串的，<br>有兴趣的给改成数组的也行，希望各位多多指点。 <br><hr> <p align="center"><font color=black>本特效由 <a target="_blank" href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

分享到：

shiro的实现原理 (讲的很清楚明白) | JSTL 标签无效

2013-09-05 13:14
浏览 1528
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论