Подскажите как создать плагин JQuery

@Albert1991 · Регистрация: 31.03.2017

Нужно создать плагин JQuery для комментариев. Чтобы при наведении на комменте 2 была ссылка на коммент 1.
Суть на фото.
Жду помощи, заранее спасибо!

@Уф · 31.03.2017, 16:29

лол. пишешь свою вакабу?

Добавлено через 14 минут
лови
песочница

CSS

div {
  width:300px;
  height:100px;
  border: 1px solid black;
  border-radius: 5px;
  background: #ccc;
}
span.link {
  color: #0f0;
  font-weight: bold;
}
span.link:before {
  content: ">>";
}

Javascript

$('span.link').mouseover(function(e){
    var id = $(this).text();
  var blok = $('#'+id).clone();
  $(blok).attr('id','clone')
        .css({'position':'absolute','top':e.pageY,'left':e.pageX});
        console.log(e);
  $('body').prepend(blok);
}).mouseleave(function(){
  $('#clone').remove();
})

HTML5

<div id="m1">
KEK KEK KEK KEK KEK KEK KEK KEK KEK KEK KEK KEK KEK KEK KEK KEK 
</div>
<div id="m2">
AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA
<span class="link">m1</span>
</div>
<div id="m3">
AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA AZAZA
<span class="link">m1</span>
</div>

Добавлено через 53 секунды
надо чутка допилить чтобы лесенка выстраивалась из постов, а то пока у меня только один блок показывается

Добавлено через 57 минут
сделал лесенку, она норм раскатывается, только пока обратно не убирается по ступеньком если мышку отводишь, только вся
песочница

CSS

div {
  width:200px;
  height:50px;
  border: 1px solid black;
  border-radius: 5px;
  background: #ccc;
}
span.link {
  color: #0f0;
  font-weight: bold;
}
span.link:before {
  content: ">>";
}

Javascript

var zind = 1, rm;
$('body').on('mouseover','span.link',function(e){
    var id = $(this).text();
  var blok = $('#'+id).clone();
  $(blok).attr('id','clone_'+id).addClass('clone')
        .css({'position':'absolute',
                    'top':e.pageY,
              'left':e.pageX,
              'z-index':zind});
  zind++;
  if($('#clone_'+id).length==0) $('body').prepend(blok);
})
$('body').on('mouseleave', '.clone', function(){
  rm = setTimeout(function(){ $('.clone').remove(); },500);
}).on('mouseover', '.clone', function(){
  clearTimeout(rm);
});

HTML5

<div id="m1">
KEK KEK KEK KEK KEK
</div>
<div id="m2">
AZAZA AZAZA AZAZA AZAZA AZAZA
<span class="link">m1</span>
</div>
<div id="m3">
OLOLO OLOLO OLOLO OLOLO OLOLO
<span class="link">m2</span>
</div>
<div id="m4">
PIHSCH PIHSCH PIHSCH PIHSCH PIHSCH
<span class="link">m3</span>
</div>

@Albert1991 · 31.03.2017, 20:08 **[ТС]**

Уф, спасибо большое! Это задание дали на курсах, я не смог разобраться как именно лесенку из них сделать...
а именно как сослаться на предидущий коммент.

@alpex · 31.03.2017, 20:46

это же не плагин

@Albert1991 · 31.03.2017, 22:04 **[ТС]**

alpex, я этот код оберну в плагин

@Уф · 31.03.2017, 22:50

z-index можно сбрасывать на 1 при каждом наведении на оригинальный пост, она только в клонах расти должна, а то ща у меня бесконечно растет

@Albert1991 · 01.04.2017, 09:35 **[ТС]**

Уф, Уф, попробовал обернуть код в оболчку для плагина
//(function($){
// $.fn.AnswerView = function() {
тут код
}
})(JQuery)

Не хочет работать, не подскажешь почему???

@Уф · 03.04.2017, 07:19

ты его просто воткнул и все? внутри плагина код должен ссылаться на переменную this, тогда будет работать

Добавлено через 4 минуты
а еще у тебя первые две строки закомментированы
Простейший плагин:

Javascript

$.fn.hello = function() {
    this.css('background','#0f0');
    this.who = function(){ return this.attr('id'); }
    return this;
}

При инициализации раскрашивает блок в зеленый цвет, и добавляет функцию определения айди

Javascript

1 2	var test = $('#block').hello(); alert ( test.who() );

@Albert1991 0 / 0 / 0 Регистрация: 31.03.2017 Сообщений: 4
		1
	Подскажите как создать плагин JQuery 31.03.2017, 14:13. Просмотров 479. Ответов 7 Метки нет (Все метки) Нужно создать плагин JQuery для комментариев. Чтобы при наведении на комменте 2 была ссылка на коммент 1. Суть на фото. Жду помощи, заранее спасибо! 0 Миниатюры

@Albert1991 0 / 0 / 0 Регистрация: 31.03.2017 Сообщений: 4
	31.03.2017, 20:08 [ТС]	3
	Уф, спасибо большое! Это задание дали на курсах, я не смог разобраться как именно лесенку из них сделать... а именно как сослаться на предидущий коммент. 0

@alpex 602 / 577 / 103 Регистрация: 16.07.2012 Сообщений: 1,762
	31.03.2017, 20:46	4
	это же не плагин 0

@Albert1991 0 / 0 / 0 Регистрация: 31.03.2017 Сообщений: 4
	31.03.2017, 22:04 [ТС]	5
	alpex, я этот код оберну в плагин 0

@Уф 886 / 721 / 447 Регистрация: 13.07.2015 Сообщений: 2,241
	31.03.2017, 22:50	6
	z-index можно сбрасывать на 1 при каждом наведении на оригинальный пост, она только в клонах расти должна, а то ща у меня бесконечно растет 0

@Albert1991 0 / 0 / 0 Регистрация: 31.03.2017 Сообщений: 4
	01.04.2017, 09:35 [ТС]	7
	Уф, Уф, попробовал обернуть код в оболчку для плагина //(function($){ // $.fn.AnswerView = function() { тут код } })(JQuery) Не хочет работать, не подскажешь почему??? 0

Опции темы