Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.03.2012, 12:45
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

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

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

Как в рамках одного плагина правильно сделать несколько методов? Чтобы один отвечал за добавление нового сообщения в список, другой отвечал за статус (выводил, обновлял), другой отвечал за "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>
Ответить с цитированием
  #2 (permalink)  
Старый 10.03.2012, 22:33
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

Никто не поможет?
Ответить с цитированием
  #3 (permalink)  
Старый 10.03.2012, 22:49
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Дока
Ответить с цитированием
  #4 (permalink)  
Старый 11.03.2012, 07:56
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

<!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>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #5 (permalink)  
Старый 11.03.2012, 12:22
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

Извините, а для что делает "return this.each" в текущем случае?
Ответить с цитированием
  #6 (permalink)  
Старый 11.03.2012, 12:27
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

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, 11.03.2012 в 12:38.
Ответить с цитированием
  #7 (permalink)  
Старый 12.03.2012, 21:34
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

Подскажите, зачем нужно использовать "return this.each(function() { ... }); "? Мне это не понятно и вызывает ступор
Ответить с цитированием
  #8 (permalink)  
Старый 12.03.2012, 22:23
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

this.each перебирает/проходит по коллекции элементов, любой jquery объект это коллекция.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #9 (permalink)  
Старый 12.03.2012, 22:26
Аспирант
Отправить личное сообщение для n1ko Посмотреть профиль Найти все сообщения от n1ko
 
Регистрация: 08.11.2011
Сообщений: 37

А обязательно ли это делать? Я до этого всегда делал без этого. Вроде всё работало. Прошу прощения, работаю с jQuery не много, мало опыта.
Ответить с цитированием
  #10 (permalink)  
Старый 12.03.2012, 22:29
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

Сообщение от n1ko
А обязательно ли это делать?
об этом решает сам программист.
Сообщение от n1ko
Прошу прощения, работаю с jQuery не много, мало опыта.
ну дык может стоит доку почить для начала.
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 09:01
2 разных модуля на jQuery - как подключить? finder jQuery 4 23.03.2012 22:29
Как к объектам полученными jquery применить стандартные методы javascript? klauddl jQuery 4 14.09.2011 09:26
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 21:55
JQuery + FireFox NOOB jQuery 4 02.11.2009 18:16