1

好的，我正在使用两个插件，一个有助于制作精美的选择框下拉菜单 - 工作正常。插件：jQuery 选择框插件

然后我有一个，所以我可以在元素上进行自定义滚动，这也很好。插件：jScrollPane

但是我不能让他们一起工作 - 一个带有自定义滚动的下拉菜单。

你可以在这里看到工作示例：http: //jsfiddle.net/8VX4d/23/

第一个框是没有滚动的框（正确），第二个是滚动正常工作的工作框，下面的一个是我试图让自定义滚动工作但不能正常工作的下拉菜单。

不确定它是否与在我应用自定义滚动之前必须准备好选择框实例有关，我不确定如何检查它是否是？

正如您在 jsFiddle 上看到的那样，我正在使用 onDomReady 并通过以下方式绑定它们：

//$(".pretty_sb").selectbox();
$('.cat_list').jScrollPane();
$(".pretty_sb").selectbox();
$('.sbOptions').jScrollPane();
//$('.sbHolder').jScrollPane();

编辑：

这似乎可行，但由于某种原因，它限制了它为下拉菜单显示的高度：

$(".pretty_sb").selectbox({
    onOpen: function (inst) {
        $('.sbOptions').jScrollPane({
            verticalDragMinHeight: 40
        });
    }
});
//$('.sbOptions').jScrollPane();
$('.cat_list').jScrollPane();

编辑#2：我min-height为sbOptions班级设置了一套，这就是 jScrollPane 似乎出于某种原因而采用的高度！？

4

3 回答 3

2

最佳解决方案

真正的解决方案在于 css，您必须为 SelectBox 菜单指定 max-height 和 height:auto ，以便 jScrollPane 正常工作。以上所有解决方案都需要您每次打开下拉菜单或在 onOpen 方法中设置 menu() 的固定高度时重新初始化和销毁​​滚动窗格，但是如果菜单选项较少怎么办，您会在菜单中看到空白。下面是需要 jScrollPane 只初始化一次并且不需要 Reinitialize 的理想解决方案。（它是一个干净和优化的代码）

CSS

/* ul 上的这个类是 jscrollpane 正常工作所必需的，否则它的高度会不断减小 */

.sbOptions{
max-height:200px !important;
height:auto !important;
}

JS

$(".pretty_sb").selectbox();
$('.sbOptions').jScrollPane();

在 FF/Chrome/IE 中测试了这个解决方案

于 2014-03-08T07:44:56.720 回答
1

测试和工作！

jquery.jscrollpane.js由于以下原因，我发现插件存在错误：

第一个原因：

执行以下操作时...

$(function(){

   $('.pretty_sb').selectbox();
   $('.sbOptions').jScrollPane();

});

第一行将(..).selectbox()自定义 htmlselect并在其中创建以下内容DOM：

<ul id="sbOptions_82218379" class="sbOptions" style="display: none; (..)>

然后第二行将在脚本执行过程中在标签(..).jScrollPane()内创建以下子元素：ul

<div class="jspContainer" style="width: 155px; height: 454px;">

还有里面的以下子元素jspContainer：

<div class="jspPane" style="padding: 5px 0px 0px; top: 0px; left: 0px; width: 155px;">(..)</div>

此时jspPaneelement 包含的 html 元素select一目了然。

最后尝试获取元素的scrollHeight （友好的称为height）以jspPane创建滚动条。似乎一切都会奏效，但不是。

怎么了？

对插件unminified版本进行一些调试（从官方网站获得：http: //jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js）jquery.jscrollpane.js

您将在 上看到，line 177代码正试图通过使用如下简单的方法来获取scrollHeight的：panejavascript

contentHeight = pane[0].scrollHeight;

这将在将来用于创建，scrollbar但是当试图获取父元素的这个CSS属性时，display: none这将导致0.

因此，line 182脚本将确定该区域不可滚动(isScrollableV = false)，因此不会出现滚动条。

如果你不想相信。尝试scrollHeight自己获取（我做了一个简短的例子，只是或comment旁边孩子uncomment的display: none;财产：http : //jsfiddle.net/oscarj24/3Ycp7/）。divCSS

第二个原因：

这真的很有趣，但检查line 112插件jquery.jscrollpane.js，你会看到以下评论：

// TODO: Deal with where width/ height is 0 as it probably means the element is hidden and we should 
// come back to it later and check once it is unhidden...

似乎作者没有处理元素是否hidden存在，因此它将返回or0使该区域不可滚动（作为第一个原因描述）。heightwidth

但是，为什么这个代码片段有效？

$('.pretty_sb').selectbox({
    onOpen: function (inst) {
        $('.sbOptions').jScrollPane();
    }
});

因为当打开 时combobox，内容hidden不再（onOpen监听器使伎俩，您可以检查DOM并查看display: nonefromul标记已消失） 并且允许jquery.jscrollpane.js插件获得它想要的内容并进一步向元素添加另一个CSS类（jspScrollable），ul这意味着该区域是可滚动的，并且在新的滚动条上一切正常。

解决方案：

  • 我真的不推荐这个解决方案，但也许你可以自己编辑插件的unminified版本 。jquery.jscrollpane.js但是你将对侵犯作者许可和其他人负责（只是说请不要对我粗鲁）。这样，您将调用 just $(selector).jScrollPane();，仅此而已。

  • 按照作者comment所说的去做并评估元素是否hidden存在，但这对于您的情况来说真的很难完成，因为如果“关闭”并且需要一个侦听器，则ul标记将是（类似于您最后一种实现此功能的方法) .hiddencomboboxevent

  • 我认为符合您要求的解决方案是继续使用您的最后一种方法（使用onOpen带有一些“更正”的侦听器的方法，就像我稍后/下面所说的那样）。但我一点也不喜欢它，因为你每完成一次就(..).jScrollPane()一次又一次地重复这个动作。click另外，我认为没有其他方法可以解决这个问题。

现场演示：http: //jsfiddle.net/oscarj24/8VX4d/33/

jQuery代码：

/* Define a default global variable with some value for scrollable area height. */
var DEFAULT_SBHEIGHT = 150;

$(function(){

    $('.cat_list').jScrollPane();

    $('.pretty_sb').selectbox({
        onOpen: function (inst) {
            $('.sbOptions')
            .height(DEFAULT_SBHEIGHT)
            .jScrollPane();
        }
    });

});

只是要知道，有很多可能的“脚本执行”情况，但我只是试图深入分析这种情况。

希望这可以帮助。

于 2014-01-03T01:56:29.860 回答
1

解决方案 0 - 重新初始化和销毁

工作小提琴：http: //jsfiddle.net/8VX4d/39/

$('.pretty_sb').selectbox({
    onOpen: function (inst) {
        var api = $('.sbOptions').data('jsp');
        api.reinitialise({
            autoReinitialise: true,
            autoReinitialiseDelay: 10,
        });
    },
    onClose: function (inst) {
        var api = $('.sbOptions').data('jsp');
        api.destroy();
        $('.sbOptions').jScrollPane();
    }
});
$('.sbOptions').jScrollPane();

测试：

  • 铬 v 31.0.1650.63 m
  • 火狐 26.0
  • IE10

解决方案 1 - 延迟重新初始化

工作小提琴：http: //jsfiddle.net/8VX4d/36/

以下将强制重新初始化校正高度的滚动窗格。但是，这需要大量开销。最终目标是手动重新初始化，如jScrollPane-动态内容演示页面中所述。

$('.pretty_sb').selectbox({
    onOpen: function (inst) {
        $('.sbOptions').jScrollPane({
            autoReinitialise: true,
            autoReinitialiseDelay: 10,
        });
    }
});

解决方案 2 - 显式设置高度

工作小提琴：http: //jsfiddle.net/8VX4d/29/

以下似乎产生了预期的结果。我从这篇博客文章中得到了在应用 jScrollPane 之前强制高度的想法。

$(".pretty_sb").selectbox({
    onOpen: function (inst) {
        $('.sbOptions').height(300).jScrollPane();
    }
});
于 2014-01-03T01:22:38.677 回答