在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滑块无法显示工具提示

回答

相关问题