2011-09-28 12 views
6

私はtwitterのブートストラップで私のサイトにpopover javascriptを実装しようとしましたが、できませんでした。もし誰かが私のコードで私を助けることができたら、私は多くのことに感謝します。事前に感謝します。twitterの "popover"の問題bootstrap css/javascript library

<head> 
... 
    <script src="scripts/jquery.min.js"></script> 
    <script src="scripts/html5.js"></script> 
    <script src="scripts/bootstrap-tabs.js"></script> 
    <script src="scripts/bootstrap-alerts.js"></script> 
    <script src="scripts/bootstrap-popover.js"></script> 
    <script src="scripts/bootstrap-twipsy.js"></script> 
    <script src="scripts/bootstrap-modal.js"></script> 
    <script src="1.3.0/bootstrap-scrollspy.js"></script> --> 

    <link rel="stylesheet" href="bootstrap.css" /> 

... 
</head> 
<body> 
... 

           <div class="tab-content"> 
            <div class="active" id="dwcenter_iso"> 
             <table class="zebra-striped"> 
              <thead> 
               <tr> 
                <th>Arquivo</th> 
                <th>Tamanho</th> 
                <th>Data</th> 
                <th>md5</th> 
               </tr> 
              </thead> 
              <tbody> 
               <tr> 
                <td><a href="download.php">nimbus-opensource-backup-1.1.iso</a> <span class="label success">new</span></td> 
                <td>332M</td> 
                <td>16/09/11</td> 

<!-- HERE GOES --> 
               <td><a href="#" class="btn danger" rel="popover" title="md5 Check Sum" data-content="343453453453453rfef34">ver</a> 
                 <script> 
                   $(function() { 
                  $('a[rel=popover]') 
                  .popover({ 
                   html: true 
                  }) 
                  .click(function(e) { 
                   e.preventDefault() 
                  }) 
                 }) 
                 </script> 
                </td> 
               </tr> 
               <tr> 
                <td>nimbus-opensource-backup-1.0.iso <span class="label important">deprecated</span></td> 
                <td>332M</td> 
                <td>10/08/11</td> 
                <td>ver</td> 
               </tr> 
               <tr> 
                <td>nimbus-opensource-backup-0.9beta.iso <span class="label important">deprecated</span></td> 
                <td>380MB</td> 
                <td>25/09/10</td> 
                <td>ver</td> 
               </tr> 

              </tbody> 
             </table> 
            </div> 


... 
</body> 

私は "html:true"とブートストラップのドキュメント例 "offset:10"を試しました。 赤い危険ボタンが表示されますが、何も起こりません(ポップオーバーが機能しません)。

これ以外にも、ボタンの代わりにテーブルのTD要素にどのように実装できますか?

答えて

4

変更の周りのポップオーバーとして、これらの2つのスクリプトはtwipsyの拡張であり、最初にロードする必要があります...

<script src="scripts/bootstrap-twipsy.js"></script> 
<script src="scripts/bootstrap-popover.js"></script> 

あなたはtrueにHTMLを設定する必要はありません、ここで変更できるオプションを持つ鉱山ですご希望の場合

$(function(){$(".btn") 
        .popover({ 
         offset: 5, 
         placement: 'left' 
        }); 
       }); 
+0

これは円滑に機能しました。しかし、オフセット属性は正確に何をしますか? – Pabluez

+1

@Pabluezここでは、ポップオーバーのすべてのオプションを見ることができます:http://twitter.github.com/bootstrap/javascript.html#popover – wes

+0

最近、twipsy.jsの代わりに「tooltip.js」を含める必要があります。 –

関連する問題