- PVSM.RU - https://www.pvsm.ru -

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

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

Демо [1]

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

<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'а [2]

Ссылки

Исходники на github [3]

Автор: AKhalilov

Источник [4]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/55870

Ссылки в тексте:

[1] Демо: http://sstude.com/knockout-popover/?from=habr

[2] странице popover'а: http://getbootstrap.com/javascript/#popovers-usage

[3] Исходники на github: https://github.com/s-stude/knockout-popover

[4] Источник: http://habrahabr.ru/post/213847/