jQuery实现动态生成Dom列表并左右移动（二）

wangxiao5530

浏览: 136850 次
性别:
来自: 大连

最近访客更多访客>>

wangqibao198374

sb12345

lixinyang823

jiwenfengtiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

页面效果如下：

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/WX_TEST/js/jquery-1.4.3.min.js"></script>
<style>
	#ulLeft {float:left;list-style:none;border:1px solid #000;padding:0;width:100px;height:120px}
	#ulMiddle {float:left;list-style:none;padding:0;width:30px;height:120px;margin-left:20px;margin-top:20px}
	#ulMiddle input{width:110px}
	#ulMiddle li{margin-top:3px}
	#ulRight {float:left;list-style:none;border:1px solid #000;margin-left:100px;padding:0;width:100px;height:120px}
	.selLi {background:green}
</style>
</head>
<body>
	<div id="divAll">
		<ul id="ulLeft">
		</ul>
		<ul id="ulMiddle">
			<li><input type="button" id="btnRight" name="btnRight" value="Add >"></li>
			<li><input type="button" id="btnLeft" name="btnLeft" value="< Remove"></li>
			<li><input type="button" id="btnRightAll" name="btnRightAll" value="Add All >>"></li>
			<li><input type="button" id="btnLeftAll" name="btnLeftAll" value="<< Remove All"></li>
		</ul>
		<ul id="ulRight">
		</ul>
	</div>
</body>

<script> 

	$(function(){
		var jsonArr = [{"id":1,"name":"Andrew"},
		               {"id":2,"name":"Bruce"},
		               {"id":3,"name":"Simpzon"},
		               {"id":4,"name":"SitePoint"}];
		
		for(var index=0;index<jsonArr.length;index++){
			var liObj = $("<li id="+ jsonArr[index].id +">"+ jsonArr[index].name +"</li>")
				.toggle(function(){
					$(this).addClass("selLi");
				  },
				  function(){
				    $(this).removeClass("selLi");
				  });
			$("#ulLeft").append(liObj);
		}
		
		$("#btnRight").click(function(){
			selYnChk("#ulLeft");
			$("#ulRight").append($("#ulLeft > li.selLi"));
			$("#ulRight > li.selLi").removeClass("selLi");
		});
		
		$("#btnLeft").click(function(){
			selYnChk("#ulRight");
			$("#ulLeft").append($("#ulRight > li.selLi"));
			$("#ulLeft > li.selLi").removeClass("selLi");
		});
		
		$("#btnRightAll").click(function(){
			$("#ulRight").append($("#ulLeft > li"));
			$("#ulRight > li.selLi").removeClass("selLi");
		});
		
		$("#btnLeftAll").click(function(){
			$("#ulLeft").append($("#ulRight > li"));
			$("#ulLeft > li.selLi").removeClass("selLi");
		});
		
		function selYnChk(obj){
			if( $(obj).find("li.selLi").size() == 0 ){
				alert("请选择!");
				return;
			}
		}
		
	});
	
</script>

</html>