VPF::написание плагина JQuery - Форум программистов

psevdo

Дата 14.1.2017, 11:39 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 17.9.2009

Репутация: нет
Всего: нет

Всем здравствуйте. Мне нужно плагин свой написать. Прочитал статью. Есть у меня вот такой код:

Код


<div id="moveselect1">
    <div class="avialable">
        <ul>
            <li class="selected">item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
    <div class="awarded">
        <ul>
        </ul>
    </div>
</div>
<div id="moveselect112">
    <div class="avialable">
        <ul>
            <li class="selected">item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
        </ul>
    </div>
    <div class="awarded">
        <ul>
        </ul>
    </div>
</div>

Код


$(document).ready(function(){
    $('#moveselect1').moveSelect(); 
    $('#moveselect112').moveSelect(); 
});

Выводит: https://cloud.mail.ru/public/5xTc/yQjsvnoKu
Т.е. данные туда-сюда гоняются.

Вот код плагина:

Код


(function($) {
    
    var methods = {
        init : function(params){

            wrapId = 'moveselect-'+ this.attr('id');
            this.wrap('<div class="moveselect" id="'+ wrapId +'"></div>');
            
            var avialableBlock = $('#'+ wrapId +' .avialable');
            var awardedBlock = $('#'+ wrapId +' .awarded');
            
            buttonsHtml = '<div class="buttons">';
            buttonsHtml += '<div class="moveselect-right">>></div>';
            buttonsHtml += '<div class="moveselect-left"><<</div>';
            buttonsHtml += '</div>';
            avialableBlock.after(buttonsHtml);

            return this.each(function(){
                $('.moveselect .moveselect-left').bind('click.moveSelect', methods.moveLeft);
                $('.moveselect .moveselect-right').bind('click.moveSelect', methods.moveRight);
            });
        },
        destroy : function(){
        },
        moveLeft : function(){
        },
        moveRight : function(p){
        }
    };
    
    $.fn.moveSelect = function(method){

        if(methods[method]){
            // если запрашиваемый метод существует, мы его вызываем
            // все параметры, кроме имени метода прийдут в метод
            // this так же перекочует в метод
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if(typeof method === 'object' || !method){
            // если первым параметром идет объект, либо совсем пусто
            // выполняем метод init
            return methods.init.apply(this, arguments);
        } else {
            // если ничего не получилось
            $.error('Метод "' + method + '" не найден.');
        }
    };
    
})(jQuery)

Вопрос вот в чем... Если использовать этот плагин на странице один раз, то проблем нет. Но если больше одного раза, то нужно их друг от друга отделять. Как это правильно делать? Я думал переменную wrapId в методе init где хранить, но не разобрался. Поэтому прошу помощи.

psevdo

Дата 14.1.2017, 14:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 17.9.2009

Репутация: нет
Всего: нет

может хоть подскажите куда двигаться?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »