1

私のプロジェクトでは、twitterブートストラップモーダルウィンドウ機能を拡張したいと思います。

モーダルウィンドウでJavaCardLayoutの機能を取得したいと思います。知らない人のために、CardLayoutは、コンテナ（この場合はモーダルウィンドウ）が複数のカードの子（この場合はdiv）を受け入れることを可能にします。各子はインデックスを取得し、コンテナは最初にインデックス「0」の子を表示します。CardLayoutインターフェイスには、「previous（）、next（）、first（）、last（）」としての関数が含まれており、インデックスに従って表示されるカードを変更します。

これは、4つの「カード」で「カードモーダル」を生成するために使用したいHTMLのテンプレートです。

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

<div class="modal hide" id="myModal">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <div class="modal-card" card-index="0">
            This is the initial state
        </div>
        <div class="modal-card" card-index="1">
            This is the Step 1
        </div>
        <div class="modal-card" card-index="2">
            This is the Step 2
        </div>
        <div class="modal-card" card-index="3">
            This is the final State
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" card-change="previous">Previous</a>
        <a href="#" class="btn" card-change="next">Next</a>
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

私はJSにまったく慣れていないので、できるだけ一般的で再利用可能なものにするための演習としてしたいと思います。理想的な状況は、プロジェクトのJSフォルダーにcard-modal.jsファイルを入れて、いつでもそれらの1つを作成できるようにすることです。

私は2つの方向の間で躊躇しています：-結局のところCardModal "IS A" Modalなので、Modalクラスを拡張します（coffeescript "extends"キーワードを使用）。-前/次のボタンに与える応答のみを処理する別のクラスを作成します。

これら2つのオプションの初期化に違いはありますか？（必要なオブジェクトを実際に開始するには、開発者は何を書く必要がありますか）

より経験豊富な開発者からの「どのように答えますか」を探しています。そのため、実際に「このソリューションがこれよりも優れている理由」を示すために追加のポイントが付与されます。

4

1 に答える 1

1

JavaScriptには、関数プロトタイプベースの継承モデルがあります。これは、Python / Java/etcで見られる「従来の」クラスベースの継承モデルとは異なります。また、絶対的には、使用と学習が困難です（IMHO）。そのため、フレームワークとコンパイラ（CoffeeScriptなど）には独自のクラス継承システムが組み込まれています。

これらのアドホックJSクラス継承システムの欠点は、一般に、他のJS継承システムと相互互換性がないことです。この特定の例では、ソースコードからわかるように、ModalクラスはCoffeeScriptクラスではありません。そのため、CoffeeScriptで拡張しようとしないことを強くお勧めします。そうすれば、狂気になります。

オプション＃2を使用することをお勧めします。prev/nextを個別に切り替える機能を構築します。CardLayoutは、スタンドアロンのJavascript / jQueryとして開発する必要があります。これは、要素がDOMのどこにあるかに関係なく、で作成できるような<div class="card-container">要素を含む要素が与えられることを期待しています。N <div class="card" >card-containersetupCardLayout($('.card-container'))

次に、Bootstrap Modalと統合するために必要なのは、モーダルが表示されたときにイベントをリッスンすることだけです。

$('#id-of-modal').on 'shown', ()->
    setupCardLayout($(this))
于 2012-06-15T22:15:12.907 に答える