내 html에 jQuery UI 테마를 적용하는 방법은 무엇입니까?

대화 상자, 단추 등과 같은 다양한 위젯에 jQuery UI를 사용합니다. 오류/경고 알림 및 강조 스타일과 같은 다른 웹 페이지 요소에 대한 테마를 계속 사용하고 싶습니다. 그래서 나는 그들이, 예를 들어, 주변의 CSS에 대한 경고 통지를 사용하는 것을 볼 수 themeroller 페이지에 갔다 : 난 그냥이 또는하지를 복사 함 등 래퍼 DIV, 배경 아이콘 스팬이있다내 html에 jQuery UI 테마를 적용하는 방법은 무엇입니까?

<div class="ui-widget"> 
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
     <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
     <strong>Alert:</strong> Sample ui-state-error style.</p> 
    </div> 
</div>

jQuery UI javascript가 나를 위해 어떤 것을 만들 수 있습니까? 비 위젯 HTML에 테마를 적용하는 적절한 방법은 무엇입니까?

출처

2011-09-21 at.

단순히 자신의 HTML에 적용하십시오. Javascript가 필요하지 않습니다 (호버 상태 제외).

jQueryUI의 위젯을 사용하는 경우 자바 스크립트는 해당 클래스로 해당 HTML을 모두 만듭니다.

호버 (hover) 상태가 필요한 경우 ui-state-hover 클래스를 토글해야합니다. 이를 위해 당신이 자바 스크립트가 필요합니다

$('.ui-state-error').hover(function(){ 
    $(this).toggleClass('ui-state-hover'); 
});

출처

2011-09-21 23:51:20

내 자신의 HTML에 무엇을 적용할까요? wrapper div 클래스는 ui-widget 클래스이고 ui-state-error 및 ui-corner-all 클래스는 무엇입니까? –

@at. - 맞아. 그냥 HTML 조각을 복사하고 그대로 사용하십시오. –

할 수 있습니다 기본적으로 만 사용 themeroller 사이트에서 사전 정의 된 요소 : 버튼, 아이콘, 제목 표시 줄 등을 날짜 선택기, 대화 상자 같은 모든 JQuery와 위젯, highlight/error - 여러분이 보시는 모든 elemenst는 http://jqueryui.com/themeroller/#themeGallery입니다.

이것을 보관하려면 html 태그에 적합한 html과 적절한 클래스를 복사해야하며 브라우저는 포함 된 themeroller.css의 스타일을 html 태그에 적용해야합니다.

그러나 이는 레이아웃에 약간의 제한이 있음을 의미합니다. 올바른 css 클래스 (.ui-state-default, .ui-state-hover, .ui-state-disabled, 아이콘 등)를 html에 적용하면 다른 themeroller가 아닌 요소를 포함 할 수 있습니다. themeswitcher를 사용할 수 있습니다 - 해당 클래스의 전체 목록은 http://jqueryui.com/docs/Theming/API을 참조하십시오.

출처

2011-09-22 03:13:37 iHaveacomputer

이 링크는 깨졌습니다. –

죄송합니다. 나는 2 년 전에 이것을 게시했을 때 일하고 있었다. – iHaveacomputer

내 html에 jQuery UI 테마를 적용하는 방법은 무엇입니까?

답변

관련 문제