在XPage中使用BootStrap滑塊無法顯示工具提示

我正嘗試在我的XPages應用中使用Bootstrap Sliders項目。它似乎工作正常，但工具提示從未顯示，當我加載它在XPage上。它在同一個.nsf文件中工作正常。下面是HTML代碼是在https://www.netexperts.com/sliders.nsf/testHtml.html和它的作品...在XPage中使用BootStrap滑塊無法顯示工具提示

<html lang="en"> 
<head> 
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/css/bootstrap-theme.min.css"> 
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/jquery/jquery.min.js"></script> 
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/js/bootstrap.min.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript" src="/Sliders.nsf/slider/bootstrap-slider.js"></script> 
<link rel="stylesheet" type="text/css" href="/Sliders.nsf/slider/bootstrap-slider.min.css"> 

</head> 

<body> 
<BR><BR><BR> 

<input id="ex8" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" data-slider-tooltip="always"//> 
<script type='text/javascript'> 
     $(document).ready(function() { 

      $('#ex8').slider({ 
       formatter: function(value) { 
       //console.log(value); 
        return 'Current value: ' + value; 
       } 

      });}); 
    </script> 
</body> 

</html>

下面是XPage上的代碼，它顯示滑塊，但從來沒有顯示工具提示...我能想到的唯一的事情就是道場正在阻礙，但無法弄清楚如何調試呢？這是在https://www.netexperts.com/sliders.nsf/testSlider2.xsp。請注意，沒有工具提示...

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
    <xp:this.resources> 

     <xp:script 
      src="slider/bootstrap-slider.js" 
      clientSide="true"> 
     </xp:script> 

     <xp:styleSheet href="slider/bootstrap-slider.min.css"></xp:styleSheet> 
     <xp:styleSheet href="/sliderCustom.css"></xp:styleSheet> 
    </xp:this.resources> 
    <div class="container"> 

     <xp:br></xp:br> 
     <xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br><xp:br></xp:br> 

     <div class='slider-example'> 
      <h3>Example 1:</h3> 
      <p>Basic example with custom formatter.</p> 

    <input 
     id="ex8" 

     data-slider-id='ex1Slider' 
     type="text" 
     data-slider-min="0" 
     data-slider-max="20" 
     data-slider-step="1" 
     data-slider-value="14" 
     data-slider-tooltip="always" 
      /> 
      </div> 
      </div> 

    <script type='text/javascript'> 
     $(document).ready(function() { 

      $('#ex8').slider({ 
       formatter: function(value) { 
       //console.log(value); 
        return 'Current value: ' + value; 
       } 

      });}); 
    </script> 
</xp:view>

任何人都有線索？使用這些未經提示是不是很方便？

感謝，

霍華德

來源

2016-09-22 Howard

的問題是從XSP-mixin.css一類...它被稱爲.tooltip有頂：-10000px，使HID工具提示。

修正是將以下內容添加到css文件。

/*fix to override the xsp css that screws up the slider */ 

.slider .tooltip { 
    top: 0px !important; 

}

現在很好用！霍華德

來源

2016-09-23 17:42:08 Howard

好吧，這是有道理的！我應該已經意識到，如果滑塊是一半工作的JS必須一直加載好:)確保你接受你的答案關閉這個問題作爲回答 –

這是最有可能是與該JavaScript文件加載在這個「AMD合併訂單「加載衝突/問題。我還不瞭解問題的內部工作原理，但我意識到一些解決方法。

下面是約翰尼·歐德堡博客文章，描述有關問題，以引導插件： https://xpagesandmore.blogspot.com.au/2016/04/bootstrap-plugins-in-xpages-part-v.html

這裏是由碼頭克拉嫩堡的xsnippet說明如何加載javascript文件由AMD裝載機的影響。 https://openntf.org/XSnippets.nsf/snippet.xsp?id=hack-to-use-jquery-amd-widgets-and-dojo-together

以下是確保斯文哈塞爾巴赫一個例子你的腳本道場之前加載 http://hasselba.ch/blog/?p=1181

下面是斯文一個先進的解決方案，其中可以控制「下落」你所有的JavaScript文件如的他們是否應該道場之前加載，禁用AMD，在頁面加載負荷等 http://hasselba.ch/blog/?p=2070

我最好的猜測是，xsnippet將是你最容易實現，但我不是100％肯定，如果它的工作原理（因爲與JavaScript我總覺得我猜測！），但請讓我們知道如果它/不工作。

這個替換您this.resources腳本：

<xp:this.resources> 

    <!-- temporary redefine define.amd object (Dojo AMD loader) --> 
    <xp:script clientSide="true" type="text/javascript"> 
    <xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents> 
    </xp:script> 

    <!-- load jquery AMD enabled widgets --> 
    <xp:script src="slider/bootstrap-slider.js" clientSide="true"></xp:script> 

    <!-- restore define.amd object (Dojo AMD loader) --> 
    <xp:script clientSide="true"> 
    <xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents> 
    </xp:script> 

</xp:this.resources>

來源

2016-09-23 00:09:55

我已經通過修改js文件來解決AMD問題，以防止AMD。所以，這不是問題。但是，我會嘗試使用Sven的方法在dojo之前加載它。 – Howard

根據Sven的方法首次加載bootstrap-slider.js不起作用。它根本沒有被裝載。 – Howard

在XPage中使用BootStrap滑塊無法顯示工具提示

回答

相關問題