Как повесить 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>
|
В прототипе есть метод:
со строки 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, как поймать - не пойму |
_0_,
55 строка начните с нижнего подчёркивания и будет вам счастье _spin:function(step, event ) |
Счастья не будет, перекрытие метода прототипа, а в нем условие правильного срабатывания события, хотелось бы ПРАВИЛЬНО подключиться, с оглядкой на будущее. Можно также повесить обработчик на INPUT, но это будет опять не правильно.
|
Сам себе отвечаю
Сам себе отвечаю, метод 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>
|
| Часовой пояс GMT +3, время: 00:22. |