2013-01-23 160 views
2

所以我想知道......我使用Twitter的引導對我的項目,我做了一個小的通知酥料餅/ Clickover(http://www.leecarmichael.com/bootstrapx-clickover/examples.html)功能。我想知道我怎麼能管理,使之與在它的自定義滾動條的靜態高度...引導酥料餅/ Clickover

我創建這個酥料餅/ clickover的基本概念是:

$(function() { 
    $("[rel='tooltip']").tooltip({container: 'body'}); 
}); 
$("#notices").clickover({ 
    content:data, 
    html:true, 
    container:'body' 
    ,onShown: function() {$("#notices").tooltip("destroy");}, 
    onHidden: function() {$("#notices").tooltip({container:'.navbar'});}, 
    template: '\ 
     <div class="popover notices">\ 
      <div class="arrow"></div>\ 
      <div class="popover-inner">\ 
       <div class="popover-header">\ 
        <h3 class="popover-title"></h3>\ 
        <h3 class="popover-settings"><a href="/notifications.php?act=settings">Settings</a></h3>\ 
       </div>\ 
       <div class="popover-content">\ 
        <p></p>\ 
       </div>\ 
       <h3 class="popover-footer"><center><a href="/notifications.php">See All</a></center></h3>\ 
      </div>\ 
     </div>' 

}); 

隨着HTML

<div id='userbar' class='btn-group input-prepend input-append'> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button class='btn'></button> 
    <button id='notices' class='btn' rel='tooltip' data-placement='bottom' data-original-title='Notifications'> <i class='icon-exclamation-sign icon-large'> <span class='badge badge-important'>102</span></i></button> 
</div> 

所以我在JSFiddle上發了一篇文章。我並沒有包括從引導的網站引導指令,但我已經張貼在JavaScript部分的代碼,因爲提示是有點修改。所以可能很多行代碼,但我主要的代碼是在最後...

的鏈接是:http://jsfiddle.net/6GRHa/3/

與酥料餅的按鈕是「感嘆號」

而像我說我想申請它一個自定義高度和一個可滾動的酒吧在那裏爲更多的內容...預先感謝您...

回答

7
.popover-content { 
    max-height: 300px; 
    overflow-y: auto; 
} 
+0

謝謝:)非常曾任職 – Devian

2

只需添加一些CSS給彈出固定高度和滾動條:

.popover-inner { 
    height: 250px; 
    overflow:scroll; 
} 

的小提琴是在這裏: http://jsfiddle.net/6GRHa/4/

+0

謝謝:)非常曾爲 – Devian