av and dn class names appended to existing class name

[kingjiv]

I'm not sure whether or not you would consider this a bug, but I think changing it would be beneficial.

I prefer to avoid inline css. Instead I added a class to the prototype div which is used for the navigation buttons. However, when the button was active or pressed down, my css was being removed. I discovered that when the av or dn classes are added to the element, they are actually appended to the existing class name. For example, if I had a class of nav-prototype on the prototype div, when pressed, the class name became nav-prototypedn instead of the element now having two separate classes of nav-prototype and dn. With two separate classes, you could target each separately with css as opposed to the concatenation approach which essentially removes the previous class and adds some new class.

[jssor]

As ie 7 or earlier doesn't recognize multi class names. The main purpose is to be compatible with old browsers. For the experience by specifying single class for button like element, we benefit on good performance with all browsers.

The methodology in jssor to implement a button like element is,
Given an element with class name 'yourclassname', it will add 'dn' suffix on mousedown, 'av' on active and 'ds' on disabled.

Open 'skin\arrow-01.source.html', you will see typical css for arrow navigator,

        <style>
            /* jssor slider arrow navigator skin 01 css */
            /*
            .jssora01l              (normal)
            .jssora01r              (normal)
            .jssora01l:hover        (normal mouseover)
            .jssora01r:hover        (normal mouseover)
            .jssora01ldn            (mousedown)
            .jssora01rdn            (mousedown)
            */
            .jssora01l, .jssora01r, .jssora01ldn, .jssora01rdn
            {
                position: absolute;
                cursor: pointer;
                display: block;
                background: url(../img/a01.png) no-repeat;
                overflow:hidden;
            }
            .jssora01l { background-position: -8px -38px; }
            .jssora01r { background-position: -68px -38px; }
            .jssora01l:hover { background-position: -128px -38px; }
            .jssora01r:hover { background-position: -188px -38px; }
            .jssora01ldn { background-position: -8px -38px; }
            .jssora01rdn { background-position: -68px -38px; }
        </style>