jQuery UI小部件鼠标事件获取Widget状态?
问题描述:
随着jQuery UI的小部件工厂模式(1.8),我无法找到控件对象本身,而在鼠标事件:jQuery UI小部件鼠标事件获取Widget状态?
$.widget('foo.myWidget', {
_create: function() {
var $container = this.element.wrap('<div class="ui-widget" />').parent(); // Create a widget container
$container.append('<div class="myWidgetControl" />'); // Add some clickable thing
$container.find('.myWidgetControl').on('mouseup.myWidget', this._handleClick); // Watch the mouse event
},
options: { // Widget factory options object
secretKey: 'foobar'
},
_handleClick: function(e) {
// User clicked on ".myWidgetControl"
// this == DOM element .myWidgetControl
// e == the jQuery event object
// I need to get options.secretKey; how do I find it?!?
}
});
在上面的例子中,我该如何获得“秘密密钥”选项参数?鉴于该页面上可能有多个此小部件实例,如何获取用户点击的控件元素的正确实例?
的“小部件”的方法added in 1.8看起来可能是一个解决方案,但它需要知道什么元素,用户最初应用widget中:
$("#myDiv").myWidget("widget");
在这种情况下,你如何找到了什么用户最初设置为这个小部件的实例的选择器(示例中为“#myDiv”)?
答
发现在this blog post溶液(离开这个问题打开看看是否有更好的方法,虽然):
由于小部件开发,我知道的容器元素是什么;因此,请使用jQuery Data cache来保存对小部件的引用,以便稍后查找它:
_create: function() {
/* existing code */
var $container = this.element.wrap('<div class="ui-widget" />').parent();
$container.data('widget', this); // Save for later
},
_handleClick: function(e) {
var $container = $(this).parentsUntil('.ui-widget').parent(); // Traverse the tree to find the root element I saved the data for
var widget = $container.data('widget');
alert(widget.options.secretKey); // Success! (Don't actually display your secretKey in an alert...)
}