Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> написание плагина 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 где хранить, но не разобрался. Поэтому прошу помощи.
PM MAIL   Вверх
psevdo
Дата 14.1.2017, 14:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



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


 




[ Время генерации скрипта: 0.1147 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.