3

我刚刚开始使用 JavaScript 中的 OOP。我想创建一个自定义“面板”。这是我到目前为止所拥有的：

function ShinyPanel(css, attributes)
{
    this.container = $(document.createElement("div")).addClass("shinyPanel");

    this.titleBar = $(document.createElement("div")).addClass("shinyPanelTitleBar").appendTo(this.container);
    this.topShine = $(document.createElement("div")).addClass("shinyPanelTopShine").appendTo(this.container);
    this.leftShine = $(document.createElement("div")).addClass("shinyPanelLeftShine").appendTo(this.container);
    this.content = $(document.createElement("div")).addClass("shinyPanelContent").appendTo(this.container);

    if (!css) css = {};
    if (!attributes) attributes = {};

    this.css = css;
    $(this.container).css(this.css);

    this.title = attributes["title"];
    $(this.titleBar).html(this.title);
}

现在我可以实例化这个对象并通过这样的方式将它附加到正文中：

var panel = new ShinyPanel({position:"absolute", top:"25%", width:"300px", height:"200px"}, {title:"Test"});
$("body").append(panel.container);

我的问题是，有没有办法让对象本身成为一个 div，从而消除对“容器”div 的需要？然后我就可以打电话了$("body").append(panel);。

将容器 div 放在那里对我来说并不是那么麻烦，它更适合我......想要学习正确的做事方式。

我试过this = document.createElement("div");了，但我得到了一个错误：invalid assignment left-hand side。

4

4 回答 4

3

您所描述的基本上是 UI 框架能够完成的工作。

查看小部件工厂文档以开始使用：

http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

于 2012-07-02T20:32:01.343 回答
2

我建议有一种ShinyPanel方法来处理这个问题。告诉，不要问。

function ShinyPanel(css, attributes) {
...
   this.appendTo = function (to) {
      $(to).append(this.container);
   }
于 2012-07-02T18:37:31.653 回答
0

您可以this.container直接从您的构造函数返回，假设您不打算使用您添加到其中的任何其他属性。

为此，我认为您必须将其更改为工厂方法，而不是构造函数（即不再使用new- 尽管它还有更多功能）。

于 2012-07-02T18:37:39.777 回答
0

当您想要做的只是将它附加到正文时，而不是返回一个对象，您可以只用面板返回一个字符串。

像这样的东西：

function shinyPanel(css, attributes) {
    ... all the stuff you did before
    return this.container
}

此外，如果您想在您的该shinyPanel功能中实现一些速度，您可以尝试添加标记字符串，然后只使用append一次。

还可以查看使用数组作为返回字符串的持有者，然后.join('')在返回时使用。

更多信息： http: //www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

于 2012-07-02T18:42:36.443 回答