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>

09-25 17:04
查看更多