我想知道是否可以从函数返回一个 jQuery 小部件实例。从那以后我想出了一种完全不同的方式来做我想做的事,所以这只是为了满足我自己的好奇心。
假设我有两个小部件,一个从另一个继承。我也有一些代码可能有一个 childWidget,或者它可能有一个 parentWidget。但重要的是调用父窗口小部件上的方法——在本例中为 doSomething()。与其每次都编写 if 语句来确定是调用 childWidget('doSomething') 还是 parentWidget('doSomething'),我是否可以编写一次此代码,返回正确的小部件,然后调用 doSomething()?
一个非常基本的例子:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Little widget test</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
//create parentWidget with doSomething function
$.widget( "custom.parentWidget", {
options: {
widgetName: 'parent'
},
_create: function() {
this.element
// add a class for theming
.addClass( this.options.widgetName );
},
doSomething: function( event ) {
alert(this.options.widgetName);
}
});
//create child widget; just overrides the widgetName property
$.widget( "custom.childWidget", $.custom.parentWidget, {
options: {
widgetName: 'child'
}
});
//make an instance of each widget
$( "#my-widget1" ).parentWidget();
$( "#my-widget2" ).childWidget();
//function to get the widget instance
$.fn.getWidget = function() {
if($(this).is('.parent'))
return $(this).parentWidget();
return $(this).childWidget();
};
//this does not work
$( "#my-widget1" ).getWidget()('doSomething');
});
</script>
</head>
<body>
<div>
<div id="my-widget1">parent widget</div>
<div id="my-widget2">child widget</div>
</div>
</body>
</html>