Форум

n1ko · #1 (**permalink**) 10.03.2012, 12:45

Уважаемые, помогите разобраться с наболевшим вопросом. Совсем недавно стал осваивать технологии разработки плагинов. Столкнулся с очередным вопросом и решил спросить помощи.

Пишу плагин, который отображает серверные сообщения ("позиция удалена", "позиция успешно отредактирована", "операция отменена" и т.п.). Так же отображает статус текущей операции ("Идёт сохранение", "Ожидание подтверждения" и т.д.).

Как в рамках одного плагина правильно сделать несколько методов? Чтобы один отвечал за добавление нового сообщения в список, другой отвечал за статус (выводил, обновлял), другой отвечал за "drag and drop" (плагин выглядит в виде панельки спозиционированной на страничке. при необходимости пользователь может её перетащить на дргое место).

В догонку хочу задать вопрос, как верно забивать разметку. Т.к. этот плагин планирую использовать не на одной страничке (работаю с Joomla. на двух и более видах нужно вывести).

на текущий момент у меня есть наброски. там я только начал вывод разметки

(function($){
    $.fn.mbar = function(options) {
        var options = $.extend({
            drag:   true,
            title:  'Панель сообщений',
            mtime:  true
        }, options);

        var block = $(this);

        var dragHtml = '';
        if(options.drag) {
            dragHtml = '<div class="drag"></div>';
        }
        block.append(
            '<div class="header">' +
                '<div class="title">' + options.title + '</div>' +
                dragHtml +
            '</div>' +
            '<div class="messages" />' +
            '<div class="status" />'
        );

    }
})(jQuery);

вызываю так:

<script type="text/javascript">
    $(document).ready(function(){
        $('.mbar').mbar();
    });
</script>

Блок .mbar пустой.

<div class="mbar"></div>

n1ko · #2 (**permalink**) 10.03.2012, 22:33

Никто не поможет?

zebra · #3 (**permalink**) 10.03.2012, 22:49

Дока

devote · #4 (**permalink**) 11.03.2012, 07:56

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">

(function($){
    $.fn.mbar = function(options) {
        var options = $.extend({
            drag:   true,
            title:  'Панель сообщений',
            mtime:  true
        }, options);

        return this.each(function() {
 
            var block = $(this);
 
            var dragHtml = '';
            if(options.drag) {
                dragHtml = '<div class="drag"></div>';
            }
            block.append(
                '<div class="header">' +
                    '<div class="title">' + options.title + '</div>' +
                    dragHtml +
                '</div>' +
                '<div class="messages" />' +
                '<div class="status" />'
            );
        });
    }
})(jQuery);

        </script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.mbar').mbar();
    });
</script>

    </head>
    <body>
        <div class="mbar"></div>
    </body>
</html>

n1ko · #5 (**permalink**) 11.03.2012, 12:22

Извините, а для что делает "return this.each" в текущем случае?

n1ko · #6 (**permalink**) 11.03.2012, 12:27

var methods = {
     init : function( options ) {

       return this.each(function(){
         $(window).bind('resize.tooltip', methods.reposition);
       });

     },
     destroy : function( ) {

       return this.each(function(){
         $(window).unbind('.tooltip');
       })

     },
     reposition : function( ) { 
       // ... 
     },
     show : function( ) { 
       // ... 
     },
     hide : function( ) {
       // ... 
     },
     update : function( content ) { 
       // ...
     }
  };

Это из официальной документации. Вопрос, Опции (options) будут доступны в других методах? или придётся передавать их там тоже?

n1ko · #7 (**permalink**) 12.03.2012, 21:34

Подскажите, зачем нужно использовать "return this.each(function() { ... }); "? Мне это не понятно и вызывает ступор

devote · #8 (**permalink**) 12.03.2012, 22:23

this.each перебирает/проходит по коллекции элементов, любой jquery объект это коллекция.

n1ko · #9 (**permalink**) 12.03.2012, 22:26

А обязательно ли это делать? Я до этого всегда делал без этого. Вроде всё работало. Прошу прощения, работаю с jQuery не много, мало опыта.

devote · #10 (**permalink**) 12.03.2012, 22:29

Сообщение от n1ko

А обязательно ли это делать?

об этом решает сам программист.

Сообщение от n1ko

Прошу прощения, работаю с jQuery не много, мало опыта.

ну дык может стоит доку почить для начала.

Форум

Справочник

Discord чат

Курсы javascript