Knockout-popover：KnockoutJS用のシンプルなバインディングTwitterブートストラップPopover

Twitter Bootstrapからpopover'ovを実装するためのKnockoutJSのシンプルなカスタムバインディングに注目します。



デモ

シングルユースケース

<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>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ポップオーバーグループ

 <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>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サポートオプション

プラグインは、ポップオーバーページで説明されているすべてのオプションをサポートします

参照資料

githubのソース