如何滑动Selectize.js下拉菜单?

哈里森4

我正在使用很棒的Selectize.js插件,并且尝试使用jQuery打开下拉菜单时添加一个简单的幻灯片动画。而且我还将位置更改为静态。

http://jsfiddle.net/TAuEH/1/

我改变了这个:

/**
* Shows the autocomplete dropdown containing
* the available options.
*/
open: function() {
  var self = this;

  if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  self.focus(true);
  self.isOpen = true;
  self.refreshClasses();
  self.$dropdown.css({visibility: 'hidden', display: 'block'});
  self.positionDropdown();
  self.$dropdown.css({visibility: 'visible'});
  self.trigger('dropdown_open', this.$dropdown);
},

/**
* Closes the autocomplete dropdown menu.
*/
close: function() {
  var self = this;

  if (!self.isOpen) return;
  self.$dropdown.hide();
  self.setActiveOption(null);
  self.isOpen = false;
  self.refreshClasses();
  self.trigger('dropdown_close', self.$dropdown);
},

这样:

/**
* Shows the autocomplete dropdown containing
* the available options.
*/
open: function() {
  var self = this;

  if (self.isLocked || self.isOpen || (self.settings.mode === 'multi' && self.isFull())) return;
  self.focus(true);
  self.isOpen = true;
  self.refreshClasses();
  self.$dropdown.slideDown();
  self.positionDropdown();
  self.trigger('dropdown_open', this.$dropdown);
},

/**
* Closes the autocomplete dropdown menu.
*/
close: function() {
  var self = this;

  if (!self.isOpen) return;
  self.$dropdown.slideUp();
  self.setActiveOption(null);
  self.isOpen = false;
  self.refreshClasses();
  self.trigger('dropdown_close', self.$dropdown);
},

好了,正如您所看到的,恐怕它无法正确打开,并且在您关闭它时也不会执行幻灯片动画……任何人都有更好的主意吗?

任何建议,技巧或帮助将不胜感激,如果您需要更多信息,我将编辑该帖子。

欧文·多米宁(Irvin Dominin)

如果没有对插件代码的任何变化,你可以尝试使用事件onDropdownOpenonDropdownClose并强制动画。

这有点hacky,但是可以用。

代码:

$(document).ready(function () {
    $('#sel').selectize({
        create: false,
        sortField: 'text',
        onDropdownOpen: function () {
            $(".selectize-dropdown").hide().slideToggle();
        },
        onDropdownClose: function () {
            $(".selectize-dropdown").show().slideToggle();
        }
    });
});

演示:http//jsfiddle.net/IrvinDominin/cHxcZ/

编辑

在以前的版本中,当您尝试再次按下输入以将其关闭时,存在一个问题,使用解决stop

参考:

在元素上调用.stop()时,当前正在运行的动画(如果有)立即停止。例如,如果在调用.stop()时使用.slideUp()隐藏了某个元素,则该元素现在仍会显示,但只是其先前高度的一小部分。不调用回调函数。

如果在同一元素上调用了多个动画方法,则以后的动画将放置在该元素的效果队列中。在第一个动画完成之前,这些动画将不会开始。调用.stop()时,队列中的下一个动画立即开始。如果clearQueue参数的值为true,则队列中的其余动画将被删除并且永远不会运行。

代码:

$(document).ready(function () {
    $('#sel').selectize({
        create: false,
        sortField: 'text',
        onDropdownOpen: function ($dropdown) {
            $dropdown.stop().hide().slideToggle();
        },
        onDropdownClose: function ($dropdown) {
            $dropdown.stop().show().slideToggle();
        }
    });
});

演示:http//jsfiddle.net/IrvinDominin/cHxcZ/1/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何隐藏微调下拉菜单

来自分类Dev

如何滑动Selectize.js下拉菜单?

来自分类Dev

如何正确排列下拉菜单?

来自分类Dev

如何禁用角度选择下拉菜单

来自分类Dev

如何从枚举创建下拉菜单?

来自分类Dev

如何使下拉菜单延迟关闭

来自分类Dev

如何放置Bootstrap 3的下拉菜单

来自分类Dev

如何创建动态下拉菜单?

来自分类Dev

如何使用PHP / JS计算下拉菜单的值?

来自分类Dev

如何减少下拉菜单的宽度?

来自分类Dev

如何制作3级下拉菜单?

来自分类Dev

如何使Rails多选下拉菜单工作

来自分类Dev

如何居中基于CSS的下拉菜单?

来自分类Dev

如何创建单选ActionProvider下拉菜单?

来自分类Dev

如何使下拉菜单可滚动

来自分类Dev

如何使div进入Bootstrap下拉菜单

来自分类Dev

如何使<ul>进入下拉菜单?

来自分类Dev

如何摆脱下拉菜单中的下拉菜单选项/空白空间-角JS?

来自分类Dev

如何使用下拉菜单发送排序

来自分类Dev

如何创建kivy下拉菜单?

来自分类Dev

下拉菜单如何交替打开?

来自分类Dev

密谋:如何组织下拉菜单?

来自分类Dev

如何使下拉菜单从左到右看

来自分类Dev

如何对齐下拉菜单?

来自分类Dev

单击时如何停止下拉菜单子向上滑动

来自分类Dev

移动中selectize.js下拉菜单溢出的困难

来自分类Dev

如何摆脱下拉菜单中的下拉菜单选项/空白空间-角JS?

来自分类Dev

如何制作下拉菜单

来自分类Dev

如何使用 JS 创建响应式下拉菜单?