HTML列表的增删,列表的增删和移动.html

列表的增删和移动

body{background:#ddd;text-align:center}

.list{display:inline-block;margin-top:20px;padding:40px;border-radius:8px;background:aquamarine;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:#238FCE}

.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}

• [上移]

  [下移]

  [删除]

添加项目

添加到列表：

(function(window) {

var SmartList = function(prefix, defList) {

Find.prototype.prefix = prefix;

var find = new Find(document.getElementsByClassName(prefix)[0]);

var list = new List(find.className('option'));

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');

};

};

function List(tmp) {

this.tmp = tmp;

this.obj = tmp.parentNode;

this.obj.removeChild(tmp);

}

List.prototype = {

add: function(value) {

var tmp = this.tmp.cloneNode(true);

var find = new Find(tmp);

find.className('input').value = value;

var obj = this.obj;

find.className('up').onclick = function() {

var prev = find.prev();

if (prev) {

obj.insertBefore(tmp, prev);

} else {

alert('已经是第1个');

}

};

find.className('down').onclick = function() {

var next = find.next();

if (next) {

obj.insertBefore(next, tmp);

} else {

alert('已经是最后1个');

}

};

find.className('del').onclick = function() {

if (confirm('您确定要删除？')) {

obj.removeChild(tmp);

}

};

this.obj.appendChild(tmp);

}

};

function Find(obj) {

this.obj = obj;

}

Find.prototype = {

prefix: '', // 待查找的前缀

className: function(className) {

return this.obj.getElementsByClassName(this.prefix + '-' + className)[0];

},

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.nextSibling;

while(node) {

if (node.nodeType === Node.ELEMENT_NODE) {

break;

}

node = node.nextSibling;

}

return node;

}

};

window['SmartList'] = SmartList;

})(window);

SmartList('list', ['PHP', 'JavaScript']);

返回首页

一键复制

编辑

Web IDE

原始数据

按行查看

历史