X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Написание плагина к jQuery
locky-yotu
locky-yotu
Topic Starter сообщение 10.11.2010, 19:49; Ответить: locky-yotu
Сообщение #1


Привет! Нужна консультация по созданию плагина к jQuery. Для начала небольшой абстрактный пример:

Сам плагин (jquery.alertIt.js)
[PHP](function($) {

var defaults = {
text: 'default text'
};

$.fn.alertIt = function(params){

var options = $.extend({}, defaults, options, params);

$(this).click(function(){

alert(options.text);
return false;

});

return this;
};
})(jQuery);[/PHP]

Вызов плагина
<script type="text/javascript" src="jquery.alertIt.js"></script>

$(document).ready(function(){
$('.sampleTarget').alertIt({
text: 'HA - HA'
});
});

<div class="sampleTarget">Click me!</div>


То есть в данном случае появится alert с текстом "HA - HA". Теперь перейду к сути вопроса: что, если нужно получить доступ к свойствам того элемента, к которому был применен плагин?
То есть в моем примере я хочу вывести в alert, скажем, innerHTML этого div'а: "Click me!". Конструкция типа:
[PHP]$(document).ready(function(){
$('.sampleTarget').alertIt({
text: $(this).html()
});
});[/PHP]
не работает, т.к. в ней под $(this) понимается не div, по которому кликнули, а... Вот я так и не пойму, что именно.

Еще раз, вопрос: как при вызове плагина получить доступ к свойствам элемента, к которому он (плагин) был применен?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 10.11.2010, 21:18; Ответить: ZhukV
Сообщение #2


В этом посте я описал, как можна использовать плагины:
http://www.html.by/showthread.php?t=10863
Здесь пример плагина алерт-а:
http://www.html.by/showthread.php?t=11053

А тя в примере:
В явы (особенно jQuery) имеется несколько вариантов получение ИД элемента (именно для работы с ним!!!):
text = $("#text").html();
//OR
id = $("#text");
text = id.html();

Думаю тз этого примера понятно.
Как раз при создании плагинов нужно поддерживатся второго варианта, так как ключевой слово $(this), может дать негативное последствие.
При создании плагина, а именно прототипа на jQuery (fn) ты уже получаеш дескритор контейнера, который находится на в $(this) а в просто: this

-------------------------------------------------------------
На все 100% не уверен, но вроде бы так.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 10.11.2010, 21:30; Ответить: Letmetouchyou
Сообщение #3


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
$.fn.alertIt = function(inc){

if($(this).length == 0) return false;

var options = {

'sometext' : ''

};

var $$ = options;

$.extend($$,inc);

$(this).click(function(){

alert($$.sometext + ' :'+$(this).html());

});

}



</script>

<div class="sampleTarget">Click me!</div>

<script type='text/javascript'>
$('div.sampleTarget').alertIt();
</script>


<div class="sampleTarget">next clickable-me div =)</div>


<script type='text/javascript'>
$('div.sampleTarget').alertIt({
sometext:'inner html'
});
</script>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 10.11.2010, 21:36; Ответить: Letmetouchyou
Сообщение #4


(locky-yotun @ 10.11.2010, 21:49) *
$(document).ready(function(){****$('.sampleTarget').alertIt({********text:*$(this).html()****});});*
});*


ето попахивате "говнокодом", в то смысле, что задача решаеться не с той стороны =)
зачем пердавать класснейм, если прям в плагине можешь его выдрать?

в перменной this, в данном случае, хранится ссылка на window.


(locky-yotun @ 10.11.2010, 21:49) *
Еще раз, вопрос: как при вызове плагина получить доступ к свойствам элемента, к которому он (плагин) был применен?


В плагине бери их)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 10.11.2010, 21:39; Ответить: Letmetouchyou
Сообщение #5


В принципе можно и так

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
$.fn.alertIt = function(inc){

if($(this).length == 0) return false;

var options = {


'parameter' : ''

};

var $$ = options;

$.extend($$,inc);

$(this).click(function(){

alert(eval($$.parameter));

});

}



</script>

<div class="sampleTarget">Click me!</div>

<script type='text/javascript'>
$('div.sampleTarget').alertIt({
parameter:'$(this).html()'
});
</script>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 10.11.2010, 22:21; Ответить: ZhukV
Сообщение #6


(Letmetouchyou @ 10.11.2010, 23:36) *
в перменной this, в данном случае, хранится ссылка на window.

Как раз и в переменной this будет хранится выборка элементов.
$('.sampleTarget').alertIt(/*this*/);

Выборка прошла по контейнеру с классом sampleTarget
Вот элементарный пример:
$('.sampleTarget').each(function(){
  this.hide();
})

Перебираем все контейнеры с классом sampleTarget и скрываем их. В переменоой this как раз хранится текущий контейнер а не виндов.
А вот еще (на основе плагина):
$.fn.hide2 = function(){
  return this.each(function(){
    this.hide()
  })
}

Тоже самое, вот только есть передана цепочка вызова. В переменной this будет хранится контейнер, по которму ишла выборка. И опять this передался дальше (если далее пошла цепочка).
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Letmetouchyou
Letmetouchyou
сообщение 10.11.2010, 22:26; Ответить: Letmetouchyou
Сообщение #7


ZhukV, прежде чем говрит, пропробуй ето на прикатике.
то что ты шас написал - ето "jquery для новичков" ))

вопрос заключался в другом:

как Плагину jqery передать параметр элемента, именно передать, а не взять параметр в самом плагине.

вот пример

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
$.fn.alertIt = function(inc){

if($(this).length == 0) return false;

var options = {

'sometext' : ''

};

var $$ = options;

$.extend($$,inc);

$(this).click(function(){

alert($$.sometext);

});

}



</script>



<div class="sampleTarget">next clickable-me div =)</div>


<script type='text/javascript'>
$('div.sampleTarget').alertIt({
sometext:this
});
</script>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZhukV
ZhukV
сообщение 10.11.2010, 22:32; Ответить: ZhukV
Сообщение #8


Letmetouchyou, сорри, не порчитал поста выше.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
locky-yotu
locky-yotu
Topic Starter сообщение 10.11.2010, 23:12; Ответить: locky-yotu
Сообщение #9


Letmetouchyou, респектую) Осмысливать буду, видимо, уже завтра, потому что сегодня была зарплата и уже не до плагинов))

ZhukV, спасибо за рвение, но на мой вопрос ты все же не ответил)

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1246 24.11.2023, 14:46
автор: alexey
Открытая тема (нет новых ответов) Написание софта, разработка сайтов, моб. приложений и игр
3 BurzhuyXXi 2427 10.11.2023, 19:51
автор: BurzhuyXXi
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44946 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Написание и размещение отзывов
Заказываем отзывы
6 Blacktext 2188 3.3.2023, 17:52
автор: kontenta
Открытая тема (нет новых ответов) Написание софта, разработка сайтов, моб. приложений и игр
4 BurzhuyXXi 2304 25.2.2023, 14:35
автор: BurzhuyXXi


 



RSS Текстовая версия Сейчас: 25.4.2024, 20:25
Дизайн