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

от автора

Предлагаю вашему вниманию простой 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

ссылка на оригинал статьи http://habrahabr.ru/post/213847/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *