在XPages中使用引导滑块无法显示工具提示_Xpages

在XPages中使用引导滑块无法显示工具提示

xpages

在XPages中使用引导滑块无法显示工具提示,xpages,Xpages,我试图在我的XPages应用程序中使用引导滑块项目。它似乎工作正常，但当我将其加载到XPage上时，工具提示从未显示。它可以在同一个.nsf中的html文件中正常工作。下面是位于的html代码，它可以工作 <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.extlib/responsive/bootstrap3/css/bootstrap.min

我试图在我的XPages应用程序中使用引导滑块项目。它似乎工作正常，但当我将其加载到XPage上时，工具提示从未显示。它可以在同一个.nsf中的html文件中正常工作。下面是位于的html代码，它可以工作

<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>






$（文档）.ready（函数（）{
$（'#ex8'）。滑块({
格式化程序：函数（值）{
//console.log（值）；
返回“当前值：”+值；
}
});});

下面是XPage代码，它显示了滑块，但从未显示工具提示。。。我能想到的唯一一件事是Dojo正在碍事，但却不知道如何调试它？这是在。请注意，没有工具提示

<?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>


例1：
自定义格式化程序的基本示例
$（文档）.ready（函数（）{
$（'#ex8'）。滑块({
格式化程序：函数（值）{
//console.log（值）；
返回“当前值：”+值；
}
});});

有人有线索吗？在没有工具提示的情况下使用这些工具对用户不是很友好

谢谢

Howard

这很可能与Javascript文件的加载顺序以及“AMD”加载冲突/问题有关。我还不了解问题的内部运作，但我知道一些解决办法

以下是Johnny Oldenburger的一篇博客文章，描述了与引导插件相关的问题：

下面是Ferry Kranenburg的xsnippet，它解释了如何加载不受AMD加载程序影响的javascript文件。

下面是一个来自svenhasselbach的示例，它确保在dojo之前加载脚本

这里有一个由Sven提供的高级解决方案，您可以控制所有javascript文件的“行踪”，例如，它们是否应该在dojo之前加载、禁用AMD、页面加载时加载等。

我最好的猜测是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>

这很可能与Javascript文件的加载顺序以及“AMD”加载冲突/问题有关。我还不了解问题的内部运作，但我知道一些解决办法

以下是Johnny Oldenburger的一篇博客文章，描述了与引导插件相关的问题：

下面是Ferry Kranenburg的xsnippet，它解释了如何加载不受AMD加载程序影响的javascript文件。

下面是一个来自svenhasselbach的示例，它确保在dojo之前加载脚本

这里有一个由Sven提供的高级解决方案，您可以控制所有javascript文件的“行踪”，例如，它们是否应该在dojo之前加载、禁用AMD、页面加载时加载等。

将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>

问题是xsp mixin.css中的一个类。。。它被称为。工具提示，顶部为：-10000px，因此隐藏了工具提示

修复方法是将以下内容添加到css文件中

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

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

}

现在效果很好！Howard

问题是xsp mixin.css中的一个类。。。它被称为。工具提示，顶部为：-10000px，因此隐藏了工具提示

修复方法是将以下内容添加到css文件中

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

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

}

现在效果很好！Howard

我已经通过修改js文件来防止AMD，从而修复了AMD问题。所以，这不是问题所在。但是，我将尝试在使用Sven的方法加载dojo之前加载它。按照Sven的方法首先加载bootstrap-slider.js不起作用。它根本没有被加载。我已经通过修改js文件来修复AMD问题，以防止AMD。所以，这不是问题所在。但是，我将尝试在使用Sven的方法加载dojo之前加载它。按照Sven的方法首先加载bootstrap-slider.js不起作用。它根本没有加载。好的，这是有道理的！我应该意识到，如果滑块工作了一半，js肯定加载得很好：）请确保您接受您的答案，并以回答的方式结束此问题OK，这很有意义！我应该意识到，如果滑块工作了一半，js肯定加载得很好：）请确保您接受您的答案，并按回答结束此问题