Расширение бутстрапа modal

Question

Для моего проекта я хотел бы расширить возможности модного окна twitter bootstrap.

Я хочу, чтобы мое модальное окно получило функциональность Java CardLayout. Для тех, кто не знает, CardLayout позволяет контейнеру (в нашем случае, модальному окну) принимать несколько карточек (в нашем случае div). Каждый ребенок получает индекс, а контейнер сначала отображает дочерний элемент с индексом «0». Интерфейс CardLayout содержит функцию «previous(), next(), first(), last()», которые изменяют отображаемую карту в соответствии с их индексом.

Это шаблон в HTML, который я хотел бы использовать для создания «карты модальность» с 4 «карты»:

<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 «extends»), поскольку в конце концов CardModal «IS A» Modal. - Создайте отдельный класс, который будет иметь дело только с ответом, чтобы передать эти предыдущие/следующие кнопки.

Есть ли разница в инициализации этих двух параметров? (Что разработчик должен был бы написать, чтобы на самом деле запустить требуемые объекты)

Я просто ищу «как бы вы это ответили» от более опытного разработчика. Таким образом, дополнительные баллы присуждаются за фактическое показ «почему это решение лучше, чем этот».

Answer 1

У JavaScript есть модель наследования на основе функции-прототипа; это отличается от «традиционных» моделей наследования на основе классов, которые вы увидите в Python/Java/и т. д. Это также, в абсолютном выражении, сложнее использовать и учиться (ИМХО). Вот почему фреймворки и компиляторы (например, CoffeeScript) имеют свои собственные встроенные системы наследования.

Недостатком этих специальных систем наследования JS является то, что они в общем несовместимы с другими системами наследования JS. В данном конкретном случае класс Modal, I can see from the source code, не является классом CoffeeScript. Поэтому я настоятельно рекомендую против, пытаясь расширить его с помощью CoffeeScript - таким образом, это безумие.

Я рекомендую вам пойти с опцией # 2 - построить функциональность для переключения между предыдущими/следующими отдельно. Вы должны разработать свой CardLayout как автономный Javascript/jQuery, который ожидает получить элемент <div class="card-container">, который содержит N<div class="card" > элементов, которые не имеют значения, где находится элемент card-container в DOM, вы можете создать его с помощью setupCardLayout($('.card-container')).

Тогда все, что вам нужно сделать, чтобы интегрировать его с Bootstrap Modal просто прослушивать событие, когда модальный показан

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