jQuery UI 클래스 이름

Question

채용 된 CSS 명명 규칙이 jQuery UI가 제공하는 클래스 이름과 호환되지 않는 프로젝트에서 작업하고 있습니다. jQuery UI 소스에서 (위험한 소리가 들리지만) jQuery UI가 요소에 제공하는 클래스 이름을 변경하기위한 간단한 검색/바꾸기 이외의 다른 방법이 있습니까?

예를 들어, jQuery resizable은 일 때 클래스 .ui-resizable-handle과 함께 핸들을 필요로합니다.

Answer 1

제대로 이해했다면 "ui-"부분을 잘라내서 jQuery UI 클래스 이름을 camelize하려고합니다.

그렇다면, 당신은 같은 것을 할 수 있습니다 - 여기

$('*[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); 
     }); 
}); 

이 바이올린입니다 - http://jsfiddle.net/78GM5/3/

편집는 해당 스타일에 낙타 맡았다 클래스 이름을 매핑하려는 경우, 당신을 이것을 시도 할 수 있습니다. 다음을 사용하여 클래스 이름의 스타일을 가져옵니다. Can jQuery get all CSS styles associated with an element?

그리고 스타일로 작성이 코드를 사용 -

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; 
} 

위의 코드 조각이 멋진 스레드에서입니다.

$('*[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;    
     });    
    }); 

이것은 명백한 이유로 jsfiddle에서 작동하지 않습니다. 그러나 단지 생각 .. 여기

이의 바이올린입니다 - http://jsfiddle.net/78GM5/6/