自定義jQuery的滾動條jQuery的工具提示

裏面我使用nanoscroller.js和tiptip.js，雖然我的問題我不知道具體的庫管那麼多了（但他們可能）。自定義jQuery的滾動條jQuery的工具提示

我有一個工作工具提示，我有一個工作滾動條。單獨使用時。

我的目標是在工具提示中有一個工作的自定義滾動條。

HTML：

<a class="tooltip">Open tooltip</a> 

<div class="tooltip-html" style="display:none;"> 
    <div id="main-content" class="nano"> 
     <div class="Content"> 
      <div class="blue"> 
      </div> 
     </div> 
    </div> 
</div>

JS：

var tip_html = $('.tooltip-html').html(); 
$('.tooltip').tipTip({activation: 'click', maxWidth: "230px", defaultPosition: "bottom", keepAlive: true, content: tip_html }); 
$("#main-content.nano").nanoScroller();

我注意到了有關上述第一件事：藉助該佈置nanoscroller只適用於第一套HTML的，不工具提示中的集合。

所以我那麼應用的滾動條第一抓住HTML並將其添加到工具提示之前，這個應用的滾動條的提示，但它不是功能。

嘗試了很多不同的方法在這裏（應用滾動條來匹配每一個ID，不同的順序時，要呼叫的等），我肯定被卡住。任何幫助表示讚賞，謝謝！

來源

2012-04-23 mstef

，而無需使用任何這些庫，我的猜測是什麼tiptip所做的是創建DOM節點的副本，而nanoScroller節省一些參考節點，以應用它。

這兩種行爲相結合，可能會導致您所看到的情況：$（＃mail-content.nano）將始終指向原始HTML，並且如果在添加滾動條後複製HTML，則滾動條仍然可能試圖滾動原始節點。

因此，您可能希望在創建tipTip後嘗試添加nanoScroller。像這樣（未經）：

var tip_html = $('.tooltip-html').html(); 
$('.tooltip').tipTip({ 
    activation: 'click', 
    maxWidth: "230px", 
    defaultPosition: "bottom", 
    keepAlive: true, 
    content: tip_html, 
    enter: function() { 
     $(this).find("div.nano").nanoScroller(); 
    } 
});

本品採用tipTip的enter屬性添加的提示打開當這樣執行的功能，然後添加nanoScroller新的DOM元素。

來源

2012-04-23 11:24:44 mpdaugherty

上面的'enter：'函數可能需要稍微調整才能選擇正確的元素;正如我所說的，我沒有使用任何一個庫，而且這是未經測試的。 – mpdaugherty 2012-04-23 11:27:06

這肯定是造成這個問題的原因，讓nanoScroller指向正確的元素仍然是一個問題。希望我能通過這件作品。嘗試了很多變種的.find（），以及在生成工具提示後更改原始html的類，並使用父div來定位它，都失敗了。謝謝 – mstef 2012-04-23 16:01:44

自定義jQuery的滾動條jQuery的工具提示

回答

相關問題