jQueryUi $.widget
工厂创建可用于两种方式的类:$("mySelector").myWidget(myOptions)
;和$.myNamespace.myWidget(myOptions, mySelector)
。
第一种方式不支持小部件的名称空间,因此我更喜欢使用第二种版本。我的问题是,当mySelector
与任何html元素(即$(mySelector).length == 0
)都不匹配时,支持名称空间的版本会引发异常。有什么漂亮的方法可以避免此问题?我正在开发一个内部框架,并且不希望有不必要的if
条件。
作为参考,我已经阅读(并且我认为我理解):
http://api.jqueryui.com/1.10/jQuery.widget/
http://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/
最佳答案
这两个呼叫并不完全相同。第一个将遍历选择器的每个元素并应用小部件,但第二个则不会。
看到:
$.ui.draggable('', 'div')
div {
width: 100px;
height: 100px;
border: solid black;
}
.ui-draggable {
border: solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div>
</div>
<div>
</div>
要使其等效,您需要使用$ .each,这会将其应用于选择器中的所有元素,并且也消除了错误。
例如:
$('div').each(function(){
$.ui.draggable('', this)
});
$('.empty').each(function(){
$.ui.draggable('', this)
});
div
{
width: 100px;
height: 100px;
border: solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div>
</div>
<div>
</div>