2

可以使用$(":ui-dialog")或选择 jQuery-ui 对话框$(".ui-dialog")，但返回的相应集合的元素不等价。例如

$(":ui-dialog").each(function() {
    if ($(this).dialog("option", "modal")) {
        console.log("dialog is modal");
    } else {
        console.log("dialog is non-modal");
    }
});

按预期工作，而

$(".ui-dialog").each(function() {
    if ($(this).dialog("option", "modal")) {
        console.log("dialog is modal");
    } else {
        console.log("dialog is non-modal");
    }
});

在第一次调用 dialog 方法时失败并显示错误消息。选择器之间有什么区别？

4

3 回答 3

0

来自http://www.erichynds.com/blog/tips-for-developing-jquery-ui-widgets

方法三：小部件伪选择器

在#jquery IRC 频道中，yayQuery 成名的 Adam Sontag 注意到小部件工厂的一个未记录的特性：为所有小部件自动生成伪选择器。有了这个，查询特定类型的所有小部件的 DOM 非常简单：

// gimme all dialogs
$(":ui-dialog");

上面的选择器返回创建每个实例的 DOM 元素的对象。无需维护自己的缓存或将 DOM 元素存储在每个小部件中。使用这个伪选择器关闭所有其他打开的对话框实例很简单：

// ui.dialog.js

open: function(){

    // close all open dialogs, excluding this instance
    $(":ui-dialog").not(this.element).each(function(){
        var $this = $(this);
        if($this.dialog("isOpen")){
            $this.dialog("close");
        }
    });

    // rest of open code here
}

我已经在此页面的控制台中测试了两个选择器：http: //jqueryui.com/resources/demos/dialog/default.html

$('.ui-dialog')
[
<div class=​"ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" tabindex=​"-1" role=​"dialog" aria-describedby=​"dialog" aria-labelledby=​"ui-id-1" style=​"position:​ absolute;​ height:​ auto;​ width:​ 300px;​ top:​ 341.5px;​ left:​ 711px;​ display:​ block;​">​
    <div class=​"ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">​…​&lt;/div>​
    <div id=​"dialog" class=​"ui-dialog-content ui-widget-content" style=​"width:​ auto;​ min-height:​ 107px;​ max-height:​ none;​ height:​ auto;​">​…​&lt;/div>​
    <div class=​"ui-resizable-handle ui-resizable-n" style=​"z-index:​ 90;​">​&lt;/div>​
    <div class=​"ui-resizable-handle ui-resizable-e" style=​"z-index:​ 90;​">​&lt;/div>​
    <div class=​"ui-resizable-handle ui-resizable-s" style=​"z-index:​ 90;​">​&lt;/div>​
    <div class=​"ui-resizable-handle ui-resizable-w" style=​"z-index:​ 90;​">​&lt;/div>​
    <div class=​"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style=​"z-index:​ 90;​">​&lt;/div>​
    <div class=​"ui-resizable-handle ui-resizable-sw" style=​"z-index:​ 90;​">​&lt;/div>​
    <div class=​"ui-resizable-handle ui-resizable-ne" style=​"z-index:​ 90;​">​&lt;/div>​
    <div class=​"ui-resizable-handle ui-resizable-nw" style=​"z-index:​ 90;​">​&lt;/div>​
</div>​
]

-

$(':ui-dialog')
[
<div id=​"dialog" class=​"ui-dialog-content ui-widget-content" style=​"width:​ auto;​ min-height:​ 107px;​ max-height:​ none;​ height:​ auto;​">​
    <p>​…​&lt;/p>​
</div>​
]

因此 .ui-dialog 选择整个对话框元素，而 :ui-widget 仅选择允许您调用对话框方法的对话框小部件。

于 2013-10-17T09:49:52.833 回答
0

选择$(':ui-dialog')器是一个自定义的 jQuery UI 选择器：

// create selector for plugin
$.expr[ ":" ][ fullName ] = function( elem ) {
    return !!$.data( elem, name );
};

它遍历选定的元素并返回带有附加插件定义数据的元素（在这种情况下为对话框）对象。

所以第一个 each 将返回一个 jQuery UI 对话框对象，第二个是一个简单的 jQuery 对象，没有与 jQuery UI 对话框的引用，因此会通过直接访问其属性/方法来引发错误。

演示：http: //jsfiddle.net/IrvinDominin/jUUhB/

PS：谢谢你今天之前我不知道的问题:-)

于 2013-10-17T09:53:53.923 回答
0

它是小部件伪选择器

不同之处在于.ui-dialog返回带有类的元素，ui-dialog但对话框小部件未在这些元素上初始化，这些是由对话框小部件在另一个元素上初始化时创建的。

其中 as:ui-dialog返回实际初始化对话框小部件的元素。

前任：

<div class="dialog">1</div>
<div class="dialog">2</div>
<div class="dialog">3</div>
$('.dialog').dialog({
    autoOpen: false
});

在上述情况下

.dialog并:ui-dialog返回上述 3 个 div 元素，其中 as:ui-dialog返回一些由对话框小部件创建的元素

演示：小提琴

于 2013-10-17T09:56:01.590 回答