Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.02.2010, 21:13
Новичок на форуме
Отправить личное сообщение для Sanyo Посмотреть профиль Найти все сообщения от Sanyo
 
Регистрация: 15.02.2010
Сообщений: 4

Динамическое добавление элементов
Как то по ненадобности находил пример

Есть поле и рядом с ним две кноки + и -
Нажимаешь по кнопке + добавляется еще одно поле, по кнопке - , удаляется соответственно.

Подскажите где копать, ничего не нашел
Ответить с цитированием
  #2 (permalink)  
Старый 15.02.2010, 21:33
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Здесь на форуме темы почитать можно, в этой ветке. Много ссылок полезных на любой материал, это стандартные возможности jquery, удалять, добавлять и т. д.....
Тут можно глянуть http://slyweb.ru/jquerymain/
__________________
Нет предела совершенству...

Последний раз редактировалось sysya, 15.02.2010 в 21:35. Причина: добавить
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2010, 05:11
Новичок на форуме
Отправить личное сообщение для Sanyo Посмотреть профиль Найти все сообщения от Sanyo
 
Регистрация: 15.02.2010
Сообщений: 4

Сообщение от sysya Посмотреть сообщение
Здесь на форуме темы почитать можно, в этой ветке. Много ссылок полезных на любой материал, это стандартные возможности jquery, удалять, добавлять и т. д.....
Тут можно глянуть http://slyweb.ru/jquerymain/
Спасибо за ответ. Но прежде чем я тему создавал я порыл форум и ничего не нашел.
Ссылку поглядел, но я первый раз сталкнулся с этой системой, было бы здорово поглядеть уже готовый пример.
Если есть что показать, буду оч рад!
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2010, 07:33
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Есть чем за пример заплатить? За деньги ещё и напишут что и как работает в каждом куске кода.
И ещё я имел ввиду не пример посмотреть, када ссылку дал, нужно изучать весь материал на том сайте. Бесплатно либо в каком нибудь блоге(в поисковике порыскать), либо в мышеловке, либо самому изучить и сделать какой либо скрипт
__________________
Нет предела совершенству...

Последний раз редактировалось sysya, 16.02.2010 в 07:37. Причина: добавить
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2010, 11:23
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,125

Ну вот вам пример, по-моему первый плагин, который я написал,
Он, конечно, ужасен, и работает только в 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>
Ответить с цитированием
  #6 (permalink)  
Старый 16.02.2010, 11:28
Новичок на форуме
Отправить личное сообщение для Sanyo Посмотреть профиль Найти все сообщения от Sanyo
 
Регистрация: 15.02.2010
Сообщений: 4

Спасибо Shaci!

sysya, ну вот, не все такие скупые как ты!
Ответить с цитированием
  #7 (permalink)  
Старый 16.02.2010, 13:01
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Я скуп??? Вспомни про мышеловку
__________________
Нет предела совершенству...
Ответить с цитированием
  #8 (permalink)  
Старый 16.02.2010, 13:39
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,125

Сообщение от Sanyo Посмотреть сообщение
Спасибо за ответ. Но прежде чем я тему создавал я порыл форум и ничего не нашел.
Ссылку поглядел, но я первый раз сталкнулся с этой системой, было бы здорово поглядеть уже готовый пример.
Если есть что показать, буду оч рад!
Кстате, действительно, посмотрите здесь: http://www.slyweb.ru/
Там наверняка есть маленькие примерчики (тысячи их! ) на очень мало-мало строк))).
Ответить с цитированием
  #9 (permalink)  
Старый 16.02.2010, 15:29
Новичок на форуме
Отправить личное сообщение для Sanyo Посмотреть профиль Найти все сообщения от Sanyo
 
Регистрация: 15.02.2010
Сообщений: 4

Ага, уже глядел, уже начал разбераться по чуть чуть с твоим примером и этим сайтом. Спасибо
Ответить с цитированием
  #10 (permalink)  
Старый 03.05.2013, 12:09
Профессор
Отправить личное сообщение для Kvark Посмотреть профиль Найти все сообщения от Kvark
 
Регистрация: 02.04.2013
Сообщений: 225

тут вот хороший пример

а теперь еще и тут

Последний раз редактировалось Kvark, 08.05.2013 в 15:42.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 15:42
Ищу плагин автоподбора с добавлением выбранных элементов в хранилище? bobroff jQuery 3 30.11.2009 17:07
Как снять фокус со всех элементов? Logo Общие вопросы Javascript 7 02.07.2009 22:53
Динамическое добавление нового option в form artwalek Элементы интерфейса 19 24.04.2009 16:42
Выбор элементов и построение списка выбранных элементов. madgals Events/DOM/Window 6 14.04.2009 21:30