Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Написание плагина jQuery (https://javascript.ru/forum/jquery/40279-napisanie-plagina-jquery.html)

lancer 30.07.2013 22:52

Цитата:

Сообщение от xmlns
Посмотрел интернет на эту тему - на всех сайтах одна и та же статья, слизанная друг у друга.

Бер Бибо, Иегуда Кац. Подробное руководство по продвинутому JavaScript. Один из лучших учебников по jQuery, написание плагина разобрано от и до. Наверняка где-то есть в PDF, 2-е издание вроде последнее.

рони 31.07.2013 01:21

xmlns,
1. да так делают
2. .data()

HTML-атрибуты data-* для хранения параметров и получения их в js

xmlns 31.07.2013 01:41

Главу из книжки прочел, но про даты там ничего. А это завтра прочитаю, сейчас уже лень.
Да, с data вроде сохраняются настройки.
Но вот опять палка в колеса: на странице есть два элемента: #authorizationForm и #registrationForm.
Делаю следующее:
$('#authorizationForm').formValidation(
            {
                tooltipPosition: "left",
                fields: {email: 'email'},
                other: [['input[name=password]','','','left']]
            });

$('#registrationForm').formValidation();

Согласно отладочной печати сначала инициализируется элемент '#authorizationForm, а за ним следом #registrationForm. Он, как видно, без параметров.
Как я делаю сохранение настроек:
$(this).data('settings', settings);

Как их считываю:
var qq = $(this).data('settings'); alert(qq.other);

Вместо того, чтобы у элемента #authorizationForm эти настройки восстановились - они снова становятся исходными. Методом пристального вглядывания обнаружилось, что эти настройки непонятно почему затираются при инициализации второго элемента (#registrationForm). А он, как я говорил, идет без настроек. Собственно, а как сделать чтобы работало?

PS ...В нормальных языках программирования для подобных вещей используют ООП...

xmlns 31.07.2013 12:58

Нашел решение:
var formId = this.attr('id');
$(formId).data('settings', settings);

var qq = $(formId).data('settings');


А вот если элемент (пусть называется #elem), к которому прицеплен плагин удаляется со страницы (метод remove()), а затем вставляется через php обратно с тем же ИД, в тоже место страницы - функция data() уже не возвращает сохраненные настройки для этого элемента. Она возвращает undefined.
Я так понимаю, эта функция по каким-то своим неведомым меткам определяет тот ли это элемент или другой. А как заставить его считать, что это именно тот элемент?

рони 31.07.2013 13:14

xmlns,
никак -- новый элемент почему он должен знать что-то про свойства старого? либо при удалении или замене перезаписывать свойства либо хранить например в родителе элемента.

рони 31.07.2013 13:15

делать привязку через делегирование -- метод on в квери.

xmlns 31.07.2013 14:31

Жаль, я думал, что если у элемента идентификатор прежний, значит должно все сохраниться.

axmed2004 30.11.2014 16:15

помогите решить проблему с плагином
 
Здравствуйте. Сделал плагин анимированного сворачивания/разворачивания текстовых блоков. Все бы хорошо, но при наличии нескольких таких блоков параметр max-height берется с последнего блока, и если некоторые из предыдущих будут больше то раскрываются не полностью, а если меньше то анимация происходит с небольшой задержкой

(function($) {
  $.fn.openhide=function(options){
	var settings=$.extend({
		'maxH':200,
		'time':500,
		'removeButton':0,
		'hoverClass':false,
	},options)

	this.each(function(i){
		hg=$(this).height()
		if(hg>options.maxH){
			$(this).css({
				'max-height':options.maxH+'px',
				'overflow-y':'hidden'
			}).wrap("<div class='wrapper'></div>")
			$(this).parents(".wrapper").append("<span class='opener'>Раскрыть</span>")
			
			$(this).parents(".wrapper").find(".opener").click(function(){
				opener=$(this)
				div=opener.parents(".wrapper").find("div")
				op=div.hasClass("opened")
				div.animate({
					'max-height':(op?options.maxH:hg)+'px'
				},options.time,function(){
					if(options.removeButton)
						opener.remove()
					else{
						if(op){
							div.removeClass("opened")
							opener.text("Раскрыть")
						}
						else{
							div.addClass("opened")
							opener.text("Свернуть")
						}
					}
				})
			})
			.mouseover(function(){
				if(options.hoverClass)
					$(this).addClass(options.hoverClass)
			})
			.mouseout(function(){
				if(options.hoverClass)
					$(this).removeClass(options.hoverClass)
			})
		}
		
	})
  }
})(jQuery)


опция removeButton - удаление кнопки после разворачивания

рони 30.11.2014 16:31

axmed2004,
делайте замыкание параметра hg или вычисляйте истинный размер при клике ... да var незабывайте


Часовой пояс GMT +3, время: 10:44.