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 に答える
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 に答える