利用DOM操作节点的方式实现列表的增删和移动
case.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表的增删和移动</title>
<style>
body{background:#ddd;text-align:center}
.list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:#fff;color:#333;text-align:left;font-size:13px}
.list-ul{list-style:none;margin:0;padding:0}
.list-option{padding:6px 0;}
.list-input{width:300px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
.list-input:hover{background:#effaff}
.list-btn span{color:#0065A0;;cursor:pointer}
.list-btn span:hover{text-decoration:underline}
.list-btn b{text-align:center;background-color:#D6EDFF;border-radius:6px;width:20px;height:20px;display:inline-block;margin:0 2px;cursor:pointer;color:#238FCE;border:1px solid #B3DBF8;float:left}
.list-bottom{margin-top:5px}
.list-add-show{color:#f60;cursor:pointer}
.list-add-show:before{position:relative;top:1px;margin-right:5px;content:"+";font-weight:700;font-size:16px;font-family:arial}
.list-add-show span:hover{text-decoration:underline}
.list-add-area{margin-top:5px}
.list-add-add{cursor:pointer;margin-left:5px}
.list-add-cancel{cursor:pointer;margin-left:4px}
.list-add-input{width:180px;border:1px solid #ccc;padding:4px;font-size:14px;color:#333}
.list-add-input:hover{background:#effaff}
.list-tmp{display:none}
.list-hide{display:none}
</style>
</head>
<body>
<form action="" method="">
<div class="list">
<ul class="list-ul">
<li class="list-option">
<input type="text" class="list-input" name="list[]" id="" value="" />
<span class="list-btn">
<span class="list-up">[上移]</span>
<span class="list-down">[下移]</span>
<span class="list-del">[删除]</span>
</span>
</li>
</ul>
<div class="list-bottom" id="">
<span class="list-add-show">添加项目</span>
<div class="list-add-area list-hide">
添加到列表
<input type="text" class="list-add-input" name="list[]" id="list[]" value="" />
<input type="button" class="list-add-add" value="添加" />
<input class="list-add-cancel" type="button" value="取消" />
</div>
</div>
</div>
</form>
<!--引入Javascript文件-->
<script src="SmartList.js" type="text/javascript"></script>
<script type="text/javascript">
//第一个参数表示HTML中列表的class前缀,用来针对网页中指定前缀的class元素进行操作
//第二个参数表示页面打开时,自动添加到列表中项目对应的<input>列表项的value值
SmartList('list', ['PHP', 'JavaScript']);
</script>
</body>
</html>SmartList.js
(function(window) {
/**SmartList智能列表生成
* @param {String} prefix 前缀
* @param {Array} defList 默认项数组
*/
var SmartList = function(prefix, defList) {
Find.prototype.prefix = prefix;
var find = new Find(document.getElementsByClassName(prefix)[0]); // 获取对象
//创建List对象 实现默认列表项的添加
var list = new List(find.className('option')); //通过find对象查找class为list-option的<li>模板
//基于defList数组中的每个元素来添加列表项
for (var i in defList) {
list.add(defList[i]);
}
var add = {
'show':find.className('add-show'), //获取“添加项目”元素对象
'area':find.className('add-area'), //获取添加区域块的元素对象
'input':find.className('add-input'), //获取添加的文本框元素对象
'add':find.className('add-add'), //获取添加按钮的元素对象
'cancel':find.className('add-cancel') //获取取消按钮的元素对象
};
add.show.onclick = function() { //控制添加区域的显示隐藏
add.area.classList.remove(prefix + '-hide');
};
add.add.onclick = function() { //添加到列表
list.add(add.input.value);
};
add.cancel.onclick = function() { //取消添加
add.area.classList.add(prefix + '-hide');
};
};
//Find构造函数的参数表示从哪个元素对象中进行查找
//原型中的prefix属性表示class前缀，className()方法用于根据class查找元素
function Find(obj) {
this.obj = obj;
}
Find.prototype = {
prefix: '', //待查找的前缀
className: function(className) {
return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];
},
//prev()方法，next()方法用于查找移动列表项的前后元素
/*若获取当前对象的前一个或后一个节点是null,则返回node;
否则通过循环判断node的节点类型
确定获取的node是否是元素节点，若是则停止循环并返回
*/
prev: function() {
var node = this.obj.previousSibling; // 获取当前元素对象的前一个节点
while (node) {
if (node.nodeType === Node.ELEMENT_NODE) {
break;
}
node = node.previousSibling;
}
return node;
},
next: function() {
var node = this.obj.nextElementSibling; //获取当前元素对象的后一个节点
while (node) {
if (node.nodeType === Node.ELEMENT_NODE) {
break;
}
node = node.nextElementSibling;
}
return node;
}
}
/**
* List 生成列表
* @constructor
* @param {Object} tmp 模板对象
*/
function List(tmp) { // List构造函数 参数tmp表示操作的<li>元素模板
this.tmp = tmp;
this.obj = tmp.parentNode; // 保存模板的父节点对象
this.obj.removeChild(tmp); //从<ul>中移除<li>模板
}
List.prototype = {
/**
* 向列表中添加项目
* @param {String} value 新项目的文本值
*/
add: function(value) {
var tmp = this.tmp.cloneNode(true); //克隆一个元素节点
//1.将value添加到list-input的value属性中
var find = new Find(tmp);
find.className('input').value = value;
var obj = this.obj; //获取ul元素对象
//2.为list-up（上移）添加单击事件
find.className('up').onclick = function() { //添加上移单击事件
var prev = find.prev(); //获取前一个节点
if (prev) {
obj.insertBefore(tmp, prev); //在prev前插入tmp
} else {
alert('已经是第一个了');
}
};
//3.为list-down（下移）添加单击事件
find.className('down').onclick = function() { //添加下移单击事件
var next = find.next(); //获取后一个节点
if (next) {
obj.insertBefore(next, tmp); //在tmp前插入next
} else {
alert('已经是最后一个了');
}
};
//4.为list-del（删除）添加单击事件
find.className('del').onclick = function() { //添加删除单击事件
if (confirm('您确定要删除？')) {
obj.removeChild(tmp);
}
}
//5.将创建的列表项添加到列表末尾
this.obj.appendChild(tmp);
}
};
window['SmartList'] = SmartList;
})(window);
