1

我正在为图像编写一个自定义的 jQuery 小部件。在它的“构造函数”（_create-method）中，图像被包装到一个 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/

4

1 回答 1

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
});
于 2013-09-22T14:03:26.907 回答