Question

对于我的项目，我想扩展一下twitter bootstrap模态窗口功能。

我希望我的模态窗口能够获得Java CardLayout的功能。对于那些不知道的人，CardLayout允许一个容器（在我们的例子中是模态窗口）接受多个卡片儿童（在我们的例子中，是div）。每个孩子都获得一个索引，容器最初显示索引为＆＃39; 0＆＃39;的孩子。 CardLayout接口包含＆＃34; previous（），next（），first（），last（）＆＃34;这将根据他们的索引更改显示的卡片。

这是HTML的模板，我想用它来生成一个＆＃34;卡模式＆＃34;用4＆＃34;卡＆＃34; ：

<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的新手，我希望尽可能地将其作为通用和可重用的练习。理想的情况是有一个card-modal.js文件，我可以在我的项目JS文件夹中折腾，以便能够随时创建其中一个。

我在两个方向之间犹豫不决： - 扩展Modal类（使用coffeescript＆＃34; extends＆＃34;关键字）因为毕竟是CardModal＆＃34; IS A＆＃34;模态。 - 创建一个单独的类，它只处理响应以提供给前一个/下一个按钮。

这两个选项的初始化有什么不同吗？（开发人员必须编写什么来实际启动所需的对象）

我只是在寻找一个＆＃34;你会如何回答＆＃34;来自经验丰富的开发人员。因此，实际展示的额外积分将被授予＆＃34;为什么这个解决方案比这个更好？＆＃34;。

Answer 1

JavaScript有一个基于函数原型的继承模型;这与您在Python / Java / etc中看到的“传统的”基于类的继承模型不同。从绝对意义上讲，它也更难以使用和学习（恕我直言）。这就是框架和编译器（如CoffeeScript）拥有自己的内置类继承系统的原因。

这些特殊的JS类继承系统的缺点是它们通常不与其他JS继承系统交叉兼容。在此特定实例中，Modal类I can see from the source code不是CoffeeScript类。因此，我强烈建议反对试图用CoffeeScript扩展它 - 这就是疯狂。

我建议你选择＃2选项 - 构建功能以分别切换prev / next。您应该将您的CardLayout开发为独立的Javascript / jQuery，期望获得<div class="card-container">元素，其中包含N <div class="card" >元素，无论card-container元素位于何处您可以使用setupCardLayout($('.card-container'))创建DOM。

然后你需要做的就是将它与Bootstrap Modal集成，只需要监听模态显示时的事件

$('#id-of-modal').on 'shown', ()->
    setupCardLayout($(this))

扩展bootstrap模式

1 个答案: