Как стать автором
Обновить

Knockout-popover: простой байндинг Twitter Bootstrap Popover для KnockoutJS

Время на прочтение1 мин
Количество просмотров6K
Предлагаю вашему вниманию простой custom binding для KnockoutJS для реализации popover'ов из Twitter Bootstrap.

Демо

Единичный случай использования

<span data-bind="popover: true" class="ko-popover"
    data-popover-placement="bottom"
    data-popover-title="knockout-popover"
    data-popover-content="Awesome knockout-popover plugin">
        knockout-popover (hover over me :)
</span>


Вариант использования popoverOptions

<span class="ko-popover"
    data-bind="popover: true, popoverOptions: { title: 'JS driven title' }"
    data-popover-placement="bottom"
    data-popover-content="Awesome knockout-popover plugin">
       popoverOptions will override 'data-' attribute values
</span>

Группа popover'ов

<p data-bind="popover: false, popoverOptions: { elem: '.ko-popover'}">
        This is example of how to enable
    <span class="ko-popover"
        data-popover-title="knockout-popover: multiple popovers"
        data-popover-content="Multiple popovers by single knockoutjs binding">
            knockout-popovers
    </span> for all
    <span class="ko-popover ko-popover-info"
        data-popover-placement="right"
        data-popover-title="So, do you like it?"
        data-popover-content="knockout-popover with custom CSS class">
            child elements
    </span>, that have the defined class.
</p>

Поддержка Options

Плагин поддерживает все опции, описанные на странице popover'а

Ссылки

Исходники на github
Теги:
Хабы:
Всего голосов 9: ↑7 и ↓2+5
Комментарии2

Публикации

Работа

Ближайшие события