Методы в плагине 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> |
Никто не поможет?
|
|
<!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>
|
Извините, а для что делает "return this.each" в текущем случае?
|
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) будут доступны в других методах? или придётся передавать их там тоже? |
Подскажите, зачем нужно использовать "return this.each(function() { ... }); "? Мне это не понятно и вызывает ступор :)
|
this.each перебирает/проходит по коллекции элементов, любой jquery объект это коллекция.
|
А обязательно ли это делать? Я до этого всегда делал без этого. Вроде всё работало. Прошу прощения, работаю с jQuery не много, мало опыта.
|
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 11:33. |