Animation in combo and datetime picker.

[A-K]

Hey, I would like to add animation(like fade or slide effects) to the combobox/combotree/combogrid when the panel is opened and closed and the same to the panel of the
datetime picker. I have searched the forums and the documentations but could not find any help for this.

Please any help would be very appreciated!

Alon.

[stworthy]

Please override the $.fn.combo.method.showPanel method to achieve this functionality.

Code:

(function($){
  var showPanel = $.fn.combo.methods.showPanel;
  $.fn.combo.methods.showPanel = function(jq){
    return jq.each(function(){
      var opts = $(this).combo('options');
      var p = $(this).combo('panel');
      $.extend(p.panel('options'), {
        onBeforeOpen: function(){
          $(this).panel('panel').css('z-index', $.fn.menu.defaults.zIndex++);
          show($(this), opts.animate, opts.speed);
          return false;
        },
        onBeforeClose: function(){
          hide($(this), opts.animate, opts.speed);
          return false;
        }
      });
      showPanel.call($.fn.combo.methods, $(this));
      function show(p, type, speed){
        type = type || 'show';
        speed = speed || 0;
        var p = p.panel('panel');
        switch(type){
          case 'show':
            p.show(speed);
            break;
          case 'slide':
            p.slideDown(speed);
            break;
          case 'fade':
            p.fadeIn(speed);
            break;
        }
      }
      function hide(p, type, speed){
        type = type || 'show';
        speed = speed || 0;
        var p = p.panel('panel');
        switch(type){
          case 'show':
            p.hide(speed);
            break;
          case 'slide':
            p.slideUp(speed);
            break;
          case 'fade':
            p.fadeOut(speed);
            break;
        }
      }
    })
  }
})(jQuery);

Set 'animate' and 'speed' properties for your combo components to define animate effects.

Code:

<input class="easyui-datebox" data-options="animate:'fade',speed:600,...">
<input class="easyui-combbox" data-options="animate:'slide',speed:600,...">

[A-K]

Thanks for the quick answer!
Another question, Is it possible to create the effect like the datebox in win 7? I mean
when you press on the month it zooms out nicely before it shows all the days in that month and also zooms in when you select a month.

https://imageshack.com/i/ez81edf2p

Thanks, Alon.