EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: sky-t on August 02, 2020, 12:33:42 PM

Title: Panel Header Pulsation Animation Background
Post by: sky-t on August 02, 2020, 12:33:42 PM

Hi there,

i want to add a class to panel header to make the header blinking like that

Code:

        .headerClsPulseRed {
            animation-name: backgroundcolor-pulsate;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

after adding (and blinking header) i also want to remove the blinking header.

How can i achieve this??

Title: Re: Panel Header Pulsation Animation Background
Post by: jarry on August 03, 2020, 02:00:10 AM

You can set the 'headerCls' property value to add custom class to the panel header.

Code:

$('#p').panel({
  headerCls: 'headerClsPulseRed'
})

Title: Re: Panel Header Pulsation Animation Background
Post by: sky-t on August 04, 2020, 11:29:59 PM

Hi jarry,

thank you for your answer.

When using your solution the header is pulsating - but the panel can't be moved anymore when set the headerCls.

Also i need to remove this pulsating class. When use

Code:

                window.top.$('#window_' + windowId).panel({
                    headerCls: ''
                });

the class is already there.

So what can we do to avoid this?

Thanks

Title: Re: Panel Header Pulsation Animation Background
Post by: jarry on August 05, 2020, 02:06:18 AM

Retrieve the panel header first, and then add or remove class for it.

Code:

var h = $('#p').panel('header');
h.addClass('headerClsPulseRed');
h.removeClass('headerClsPulseRed');

Title: Re: Panel Header Pulsation Animation Background
Post by: sky-t on August 05, 2020, 05:30:06 AM

WOW jarry,

this works AWESOME!!!!

Thank you so much!!!!