Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.09.2013, 20:03
_0_ _0_ вне форума
Аспирант
Отправить личное сообщение для _0_ Посмотреть профиль Найти все сообщения от _0_
 
Регистрация: 10.05.2013
Сообщений: 56

Как повесить JQuery обработчик внутри виджета?
Хочу усложнить виджеты JQuery ui, не могу повесить функцию на нестандартный обработчик.

У виджета ui.spinner, есть событие spin, не соображу как отловить его из потомка.


<!doctype html>
<html>
<head>
<title>test widgets</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<style>
body {
	font-size: 62.5%;
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
table {
	font-size: 1em;
}
.demo-description {
	clear: both;
	padding: 12px;
	font-size: 1.3em;
	line-height: 1.4em;
}
.ui-draggable, .ui-droppable {
	background-position: top;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>

ui.spinner <input type='text' id='spinner1' /><br>
ui.new_spinner <input type='text' id='spinner2' /><br>

<script language=javascript>

$(function(){
	
	$.widget('ui.new_spinner',$.ui.spinner,{
		
		_create:function(){
			$.ui.spinner.prototype._create.call(this);
			this._on(this._events);
			
			this.bind('spin',function(){alert('this.bind')}); // не работает
			this.element.bind('spin',function(){alert('this.element.bind')}); // не работает
			
		},
		_events:{
			spin:'on_spin',
			change:'on_spin',
			click:'onclick'
		},
		on_spin:function(value){ // не работает
			console.log( 'ui.new_spinner' + this.element[0].value );
		},
		spin:function(){ // тоже не работает
			alert('this.spin');
		},
		onclick:function(){
			console.log('this.onclick');
		}
	})
	
});

$(function(){
	$('#spinner1').spinner({spin:function(){console.log('ui.spinner '+this.value /* this=HTMLInput */)}});
	$('#spinner2').new_spinner();	
})
</script>




</body>
</html>

Последний раз редактировалось _0_, 03.09.2013 в 20:15. Причина: случайно сохранил
Ответить с цитированием
  #2 (permalink)  
Старый 03.09.2013, 20:09
_0_ _0_ вне форума
Аспирант
Отправить личное сообщение для _0_ Посмотреть профиль Найти все сообщения от _0_
 
Регистрация: 10.05.2013
Сообщений: 56

В прототипе есть метод:

со строки 1282 файла jquery-ui-1.10.3.custom.js
_spin: function( step, event ) {
		var value = this.value() || 0;

		if ( !this.counter ) {
			this.counter = 1;
		}

		value = this._adjustValue( value + step * this._increment( this.counter ) );

		if ( !this.spinning || this._trigger( "spin", event, { value: value } ) !== false) {
			this._value( value );
			this.counter++;
		}
	},


видно, что вызывается триггер spin, как поймать - не пойму
Ответить с цитированием
  #3 (permalink)  
Старый 04.09.2013, 00:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,216

_0_,
55 строка начните с нижнего подчёркивания и будет вам счастье
_spin:function(step, event )
Ответить с цитированием
  #4 (permalink)  
Старый 04.09.2013, 05:58
_0_ _0_ вне форума
Аспирант
Отправить личное сообщение для _0_ Посмотреть профиль Найти все сообщения от _0_
 
Регистрация: 10.05.2013
Сообщений: 56

Счастья не будет, перекрытие метода прототипа, а в нем условие правильного срабатывания события, хотелось бы ПРАВИЛЬНО подключиться, с оглядкой на будущее. Можно также повесить обработчик на INPUT, но это будет опять не правильно.
Ответить с цитированием
  #5 (permalink)  
Старый 04.09.2013, 19:38
_0_ _0_ вне форума
Аспирант
Отправить личное сообщение для _0_ Посмотреть профиль Найти все сообщения от _0_
 
Регистрация: 10.05.2013
Сообщений: 56

Сам себе отвечаю
Сам себе отвечаю, метод widget._trigger() оказался довольно простым, он просто вызывает калбэк из options, достаточно его немного переопределить, но хочется сохранить возможность подключатся "снаружи", поэтому получилось довольно громоздко.


<!doctype html>
<html>
<head>
<title>test widgets</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<style>
body {
	font-size: 62.5%;
	font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
table {
	font-size: 1em;
}
.demo-description {
	clear: both;
	padding: 12px;
	font-size: 1.3em;
	line-height: 1.4em;
}
.ui-draggable, .ui-droppable {
	background-position: top;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>

ui.new_spinner <input type='text' id='spinner2' /><br>

<script language=javascript>

$(function(){
	
	$.widget('ui.new_spinner',$.ui.spinner,{
		
		_create:function(){
			
			$.ui.spinner.prototype._create.call(this);	
			
			// замыкание
			var _this=this;
			var element=this.element[0];
			var external_spin=this.options.spin;
			
			this.options.spin=function(event,data){
				_this.self_onspin(event,data);
				if ( $.isFunction(external_spin) ) external_spin.apply( element, [event].concat(data) );
			}
			

			
		},
		
		self_onspin:function( event ,data ){
			console.log('self_onspin '+data.value );
		},
		
	})
	
});

$(function(){
	
	$('#spinner2').new_spinner({spin:function(event,data){console.log('external_spin '+data.value)}});
	
})
</script>
</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как изменить размер всех видео (iframe) разом через jQuery? dhorh Элементы интерфейса 2 29.12.2012 18:41
jQuery - не срабатывает обработчик в change() senglory jQuery 1 28.12.2012 02:04
2 разных модуля на jQuery - как подключить? finder jQuery 4 23.03.2012 21:29
Можно ли в jQuery селектор вставлять перменные и как? jsuse jQuery 2 04.12.2011 00:27
Как получит ссылку на элемент внутри которого запустили JS код? aRpi Events/DOM/Window 20 02.10.2011 13:36