JS实现类似桌面ListView左右移动的效果

最新推荐文章于 2021-05-27 07:10:39 发布

wwwwwwking

最新推荐文章于 2021-05-27 07:10:39 发布

阅读量218

点赞数

分类专栏： 06_script技术

本文链接：https://blog.csdn.net/wwwwwwking/article/details/18263519

版权

06_script技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

先上效果图

该效果允许将左边列表里的内容移动到右边列表中或者反向操作。。

该效果的实现要点有如下几点：

1. 使用Select来做ListView，切记将select的 multiple 属性设置为 true

2. 可以通过jQuery提供的$("#select_id option[value="targetValue"]")来选定特定的元素，并进行修改和删除

3. 中间两个按钮的居中：可以采取模拟表格的方式来实现居中，即CSS里面加入如下两句

display:table-cell;
vertical-align:middle

不多做介绍，直接贴上源代码

<!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>Move Item</title>
<style>
body {
	background:#FFFFFF;
	margin: 20px;
}

#selecter_container {
	width: 450px;
}

#left_list, #right_list {
	width:200px;
	height:300px;
}

.left_float, .right_float {
	width: 200px;
	height:300px;
	display:block;
}

.left_float {
	float:left;
}
.right_float {
	float: right;
}

#operation_span {
	margin-left: 200px;
	margin-right: 200px;
	width: 50px;
	height: 300px;
	text-align:center;
	display:table-cell;
	vertical-align:middle;
}

</style>
	
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

<script>
	function moveToRight() {
		var leftList = $("#left_list");
		var rightList = $("#right_list");
		var selectedValues = $("#left_list").val();
		if (selectedValues == null) return;
		for (var i = 0; i < selectedValues.length; ++i) {
			rightList.append('<option value="' + selectedValues[i] + '">' 
				+ $("#left_list option[value='" + selectedValues[i] + "']").text() + '</option>');
			$("#left_list option[value='" + selectedValues[i] + "']").remove();
		}
	};
	function moveToLeft() {
		var leftList = $("#left_list");
		var rightList = $("#right_list");
		var selectedValues = $("#right_list").val();
		if (selectedValues == null) return;
		for (var i = 0; i < selectedValues.length; ++i) {
			leftList.append('<option value="' + selectedValues[i] + '">' 
				+ $("#right_list option[value='" + selectedValues[i] + "']").text() + '</option>');
			$("#right_list option[value='" + selectedValues[i] + "']").remove();
		}
	}
</script>

</head>

<body>
	
	<div id="selecter_container">
		<div class="left_float">
			<select id="left_list" name="left_list" multiple="true">
				<option value= "1"> 爱情片 </option>
				<option value= "2"> 动作片 </option>
				<option value= "3"> 战争片 </option>
				<option value= "4"> 恐怖片 </option>
				<option value= "5"> 喜剧片 </option>
				<option value= "6"> 伦理片 </option>
				<option value= "7"> 电视剧 </option>
				<option value= "8"> 动画片 </option>
				<option value= "9"> 其它 </option>
			</select>
		</div>
		<div  class="right_float">
			<select id="right_list" name="right_list" multiple="true">
			</select>
		</div>
		
		<div id="operation_span"> 
			<input type="button" value=">>" οnclick="moveToRight()" /><br />
			<input type="button" value="<<" οnclick="moveToLeft()" />
		</div>
	</div>
</html>

wwwwwwking

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现类似桌面ListView左右移动的效果

Move Itembody { background:#FFFFFF; margin: 20px;}#selecter_container { width: 450px;}#left_list, #right_list { width:200px; height:300px;}.left_float, .right_float { width: 200px; h
复制链接

扫一扫

专栏目录