Ну вот вам пример, по-моему первый плагин, который я написал,
Он, конечно, ужасен, и работает только в FF (переделывать щас лень) ))))))))), но в нем есть динамическое добавление элементов.
плагин
//Плагин работает так, как я хотел, но есть несколько багов
//1 не работает в IE (нехороший баг)
//2? по поводу простановк ttd.css({width:text.outerWidth()}); - нехороший но никак не влияющий
//3 выпадение из тела таблицы в дальшнейшем
(function($) {
$.fn.spisok = function(options) {
var defaults = {editColor: '#87CEEB',
deleteColor: '#87CEEB',
mainButtonColor: '#4682B4',
mainColor: '#87CEEB',
color:["#87CEEB","#D2691E","#8B008B","#008000"],
colorBut: true
};
var settings = $.extend(defaults, options);
this.each(function(){
var text = $('<input type = "text">');
var ttd = $('<td></td>');
$(this).after(text);
$(this).css({background:settings.mainColor});
ttd.css({width:text.outerWidth()});
var ttr = $('<tr class="addition"></tr>');
ttr.append(ttd);
$(this).wrap(ttr).after(text);
//ttd.css({width:text.outerWidth()});
text.show();
text.hide();
var td = $('<td></td>');
var td1 = $('<td></td>');
var editList = $('<button>edit</button>');
var deleteList = $('<button class="pointer">delete</button>');
td.append(editList);
td1.append(deleteList);
text.parent().after(td);
td.after(td1);
globalWidth = text.outerWidth();
editList.css({width:deleteList.outerWidth()});
editList.css({background:settings.editColor});
deleteList.css({background:settings.deleteColor});
var current = this;
editList.click(function(){
if (editList.text() == 'edit') {
editList.text('confirm');
$(current).hide();
text.show();
text.val($(current).text());
}
else {
editList.text('edit');
text.hide();
$(current).text(text.val());
$(current).show();
}
})
deleteList.click(function(){
$(current).parent().parent().remove();
})
text.keydown(function(e){
switch(e.keyCode) {
case 13:
text.hide();
$(current).text(text.val());
$(current).show();
editList.text('edit');
}
})
})
$('tr.addition').wrapAll('<table></table>');
var mainButton = $('<button>New List Item</button>');
mainButton.css({background:settings.mainButtonColor});
$('tbody').append(mainButton);
var colorButton = $('<button>Color</button>');
colorButton.css({background:settings.mainColor})
var trButton = $("<tr class='addition'></tr>");
mainButton.wrap(trButton);
trButton.append(colorButton);
if(settings.colorBut)
mainButton.after(colorButton);
colorButton.click(function(){
for (var i = 0; i < settings.color.length; i++) {
if (settings.mainColor == settings.color[i]) {
if (i == (settings.color.length - 1))
settings.mainColor = settings.color[0]
else
settings.mainColor = settings.color[i + 1];
break;
}
}
colorButton.css({background:settings.mainColor});
})
mainButton.click(function () {
var tr = $('<tr class="addition"></tr>');
var ttd = $('<td></td>');
ttd.css({width:globalWidth});
var li = $('<li>New List Item</li>');
li.css({background:settings.mainColor});
ttd.append(li);
tr.append(ttd);
var text = $('<input type = "text">');
var editList = $('<button>edit</button>');
var deleteList = $('<button class="pointer">delete</button>');
editList.css({background:settings.editColor});
deleteList.css({background:settings.deleteColor});
if($('*').is('.pointer'))
$('.pointer:last').parent().parent().after(tr);
else {
mainButton.parent().before(li.parent().parent());
}
li.after(text);
text.hide();
var td = $('<td></td>');
var td1 = $('<td></td>');
td.append(editList);
td1.append(deleteList);
text.parent().after(td);
td.after(td1);
editList.css({width:deleteList.outerWidth()});
editList.click(function(){
if (editList.text() == 'edit') {
editList.text('confirm');
li.hide();
text.show();
text.val(li.text());
}
else {
editList.text('edit');
text.hide();
li.text(text.val());
li.show();
}
})
deleteList.click(function(){
tr.remove();
})//!!?
text.keydown(function(e){
switch(e.keyCode) {
case 13:
text.hide();
li.text(text.val());
li.show();
editList.text('edit');
}
})
})
}
})(jQuery);
Пример использования
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.spisok_1.js"></script>
</head>
<script>
$(document).ready(function(){
$('.editable').spisok();
});
</script>
<body>
<li class="editable" >FIRST</li>
<li class="editable">SECOND</li>
<li class = "editable">THIRD</li>
</body>
</html>
|