2011-12-20 20 views
1

我试图使用tinyscrollbar插件http://baijs.nl/tinyscrollbar/tinyScroll未启用

这样的:

$('#nvl2 .content').html('<div class="scrollbar">'+ 
             '<div class="track">'+ 
              '<div class="thumb"><div class="end"></div></div>'+ 
             '</div>'+ 
            '</div>'+ 
            '<div class="viewport">'+ 
             '<div class="overview">' +$('#nvl2 .content').html()+'</div>'+ 
            '</div></div>' ).attr('id','sc2'); 

       $('#sc2').tinyscrollbar(); 

这是在#NVL2加载新的内容,但tinyscroll不是Ajax调用之前右称为启用,萤火虫不跳任何错误

CSS:

/**************/ 
/* Tiny Scrollbar */ 
#nvl1 { } 
#nvl1 .viewport { ¡overflow: hidden; position: relative; width:100% } 
#nvl1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; } 
#nvl1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; } 
#nvl1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; } 
#nvl1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; } 
#nvl1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; } 
#nvl1 .disable { display: none; } 

/**************/ 
/* Tiny Scrollbar */ 
#nvl2{ } 
#nvl2 .viewport { ¡overflow: hidden; position: relative; width:100% } 
#nvl2 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; } 
#nvl2 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; } 
#nvl2 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; } 
#nvl2 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; } 
#nvl2 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; } 
#nvl2 .disable { display: none; } 

这是一次Ajax调用完成内容的样本

<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;"> 
    <div class="content" style="display: block;"> 
     <div class="scrollbar"> 
      <div class="track"> 
       <div class="thumb"> 
        <div class="end"> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="viewport"> 
      <div class="overview"> 
       <span class="close"></span> 
       <div class="contentHeader"> 
        <div class="contentHeaderImg"> 
         <img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png"> 
        </div> 
        <h2>Red Level Glove</h2> 
        <h4>The boutique hotel within the hotel</h4> 
       </div> 
       <div class="contentImg"> 
        <img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg"> 
       </div> 
       <div class="contentTxt"> 
        <p> 
         Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne. 
        </p> 
        <p> 
         The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities. 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="extra" style="width: 418px;"> 
    </div> 
</div> 

而AJAX调用之前和tinyscrollbar初始化exectuted:

<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;"> 
     <div class="content" style="display: block;"> 
        <span class="close"></span> 
        <div class="contentHeader"> 
         <div class="contentHeaderImg"> 
          <img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png"> 
         </div> 
         <h2>Red Level Glove</h2> 
         <h4>The boutique hotel within the hotel</h4> 
        </div> 
        <div class="contentImg"> 
         <img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg"> 
        </div> 
        <div class="contentTxt"> 
         <p> 
          Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne. 
         </p> 
         <p> 
          The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities. 
         </p> 
        </div> 
       </div> 

     <div class="extra" style="width: 418px;"> 
     </div> 
    </div> 

,并可以在这里进行测试:http://toniweb.us/gm什么是什么想法我错过了?

+0

你试过它没有明确设置微小的滚动的HTML?如果你在AJAX函数完成后调用'$('#nvl2')。tinyscrollbar();',js应该为你生成。 – Rondel

+0

嘿!谢谢!但那些div不生成和滚动条没有启用(基本上我不能apreciate任何改变) –

回答

2

你是怎么通过

...).attr('sc2'); 
在你的代码

是什么意思? 带有一个参数的函数.attr()是属性值的getter。你想为元素设置ID吗?如果这是你的主意话,最好的办法是给这个ID插入到这个网站码:当执行自带tinyScrollbar初始化排队

<div id="sc2" class="scrollbar"> 

在您的网页:

$('#sc2').tinyscrollbar(); 

没有与id的元素'sc2',这就是为什么滚动条没有显示出来,并且在萤火虫中没有错误。

+0

男人你是对的,我编辑的代码,但结果是非常相似.. –

0

尝试使用tinyscrollbar_update()方法。当我必须更改ajax请求上的内容时,我遇到了问题。它对我很好。完整的文档在http://baijs.nl/tinyscrollbar/