Question

我正在为图像编写自定义jQuery小部件。在它的“构造函数”（_create - 方法）中，图像被包装到一个div框中：

$.widget("custom.bazinga", {
    _create: function () {
        var container = $('<div/>');
        $(this.element).wrap(container);
    }
});

如何返回<div>元素而不是图像？（用于链接这样的函数：）

$('#foo')
    .bazinga()
    .height(200);

到目前为止，高度应用于图像，而不是div框（这就是我真正想要的）。

这里有一个jsFiddle：http://jsfiddle.net/PGcXF/1/

Answer 1

jQuery UI Internals阻止您接收与调用对象不同的任何内容。这是由于使用$ .widget方法时的限制，因为它不可能影响动态创建的“bazinga”方法的返回值。

一种可能的解决方案是将该行为实现到jquery-ui小部件核心中，我不建议这样做（丢失升级可能性，可能不太容易）。

也许更好/更简单的解决方案是链接“parent（）”调用以访问新生成的jquery元素：

$('#foo')
    .bazinga()
    .parent()
    .height(200);

此外，尝试将所有与小部件相关的功能移动到小部件中......

$.widget("custom.bazinga", {
    _create: function () {
        this.element.wrap($('<div/>'));
        this.container = this.element.parent();

        // Set height of parent object
        this.container.height(this.options.height);

    }
});

// Set default options
$.custom.bazinga.prototype.options.height = 100;

...并使用选项配置小部件

$('#foo').bazinga({
    height: 200
});

jQuery自定义小部件：返回不同的对象进行链接？

1 个答案: