(jQuery UI) Theme Switcher 사용하기

아래 사이트에는 24가지의 UI 테마가 있다.
http://jqueryui.com/themeroller/

방문자마다 원하는 테마를 설정해서 보게 하려면 아래 페이지에서 플러그인을 연결하면 된다.
http://jqueryui.com/docs/Theming/ThemeSwitcher

필요한 것은 jQuery Core와 Cookie 플러그인이다.
관련글: (jQuery) 연결하기

아래처럼 사용하면 쿠키 플러그인이 내장되어 있으니 따로 연결하지 않아도 된다.

<script> $(document).ready(function(){ $('#switcher').themeswitcher(); }); </script> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> <div id="switcher"></div>

때때로 적용이 안 되는 문제가 발생할 수 있다.

연속으로 테마를 바꿀 때는 적용이 잘 되지만,

링크를 통해 페이지를 갱신하거나 처음 테마를 적용할 때는 일부 객체에 테마 적용이 안 되는 현상이 있다.

해결 방법은 jQuery ready 메서드 내에 본문을 숨겼다가 보여주는 코드를 삽입하면 된다.

$('body').hide().show();

테마 변경 중에도 잘 적용시키려면 ThemeSwitcher 스크립트 내부의 updateCSS() 메서드 내에 위 코드를 넣어주면 된다.