jQuery UI Class Names

Question

I'm working on a project where the CSS naming conventions employed aren't compatible with the class names that jQuery UI provides. Is there any way beyond a simple search/replace in the jQuery UI source (which sounds dangerous) to change the class names that jQuery UI provides for its elements?

For example, jQuery resizable requires handles with the class .ui-resizable-handle, when it should be .resizeHandle.

Could you use jquery to change the class as soon as it get's applied, like: $("#elementId").removeClass().addClass("myClass"); — Matt Coady, Jul 23 '14 at 16:24
Well, yeah, I could, but it would screw up jQuery UI's internal stuff, which relies on its classes being present. So I would have to tell jUI about the change somehow, but that's what the OP is about. — Elliot Bonneville, Jul 23 '14 at 16:25

score 0 · Answer 1 · edited May 23 '17 at 11:57

If I understand correctly, you're trying to camelize the jQuery UI class names truncating the "ui-" part.

If so, you can do something like this -

 $('*[class^=ui-]').toggleClass(function (index, classNamesToChange) {
     $.each(classNamesToChange.split(' '), function(index, classNameToChange){
         return classNameToChange[3].toLowerCase() + 
               classNameToChange.replace(/-([a-z])/g, function (a, b) {
                    return b.toUpperCase();
         }).slice(3);
      });
 });

Here is the fiddle - http://jsfiddle.net/78GM5/3/

EDIT If you would like to map the camel cased class names to corresponding styles, you can try this. Get the style for the class name using the following.

 function css(a) {
    var sheets = document.styleSheets, o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {                    
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}

function css2json(css) {
    var s = {};
    if (!css) return s;
    if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
            if ((css[i]).toLowerCase) {
                s[(css[i]).toLowerCase()] = (css[css[i]]);
            }
        }
    } else if (typeof css == "string") {
        css = css.split("; ");
        for (var i in css) {
            var l = css[i].split(": ");
            s[l[0].toLowerCase()] = (l[1]);
        }
    }
    return s;
}

The above piece of code is from this awesome thread - Can jQuery get all CSS styles associated with an element?

And then use this code to write it into a style.

  $('*[class^=ui-]').toggleClass(function (index, classNamesToChange) {
        $.each(classNamesToChange.split(' '), function(index, classNameToChange){
            var originalClassName = classNameToChange;
            var classNameToReturn = classNameToChange[3].toLowerCase() + classNameToChange.replace(/-([a-z])/g, function (a, b) {
                return b.toUpperCase();
            }).slice(3); 

            $('style').append('.' + classNameToReturn + JSON.stringify(css($('.' + originalClassName))) );

            return classNameToReturn;               
        });            
    });

This won't work in jsfiddle for obvious reasons. But just a thought..

Here is the fiddle for this - http://jsfiddle.net/78GM5/6/

Unfortunately, that's not what I'm trying to do. I need to change not only the class names present in the DOM, but also the class names that jUI relies on internally. Changing just the class names results in this: http://jsfiddle.net/78GM5/5/ (note that the draggable is broken when you actually click the anchor) — Elliot Bonneville, Jul 23 '14 at 16:58
Well.. Good luck trying not to do Search and Replace! :) I cannot think of any other way you'd camelize the class names in a CSS file (unless there is a cool CSS file camelizer / parser that I didn't know about) — Aswin Ramakrishnan, Jul 23 '14 at 17:02

jQuery UI Class Names

1 Answers1