jQuery 대화 주제와 스타일

StackOverflow https://stackoverflow.com/questions/702510

문제

jQuery 대화 상자의 제목 표시 줄의 배경색을 어떻게 변경합니까?

나는 Themeroller를 보았지만 그것은 나를 위해 효과가없는 것 같습니다.

감사

도움이 되었습니까?

해결책

나는이 방법을한다 (헤더의 "UI-State-Error"스타일 추가) :

<script type="text/javascript">
            $(function () {
                $("#msg").dialog({
                    open: function () {
                        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
                    }

                });

            });
        </script>

다른 팁

UI-Dialog-Titlebar CSS 클래스를 수정하여 변경할 수 있지만 사용하는 것이 좋습니다. Themeroller 도구.

또한보십시오:

대화 상자에는 각 요소와 관련된 클래스가 있습니다.

Firebug를 사용하여 요소를 검사하고 CSS를 사용하여 스타일을 지정하십시오. 예를 들어, 제목 표시 줄에는 "UI-Dialog-Titlebar"클래스가 있습니다.

(이것은 당신이 jQuery UI 대화 상자를 사용하고 있다고 가정합니다)

사용 dialogClass 재산. jQuery 대화 상자의 CSS에 적용 할 수 있습니다. 아래는 헤더 및 컨텐츠 블록을 서식합니다.

<head>
<style>
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase}
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff}
</style>
<script>
        $('#jq_dialog').dialog({
            title: 'Detalhes do produto',
            modal: true,
            resizable: false,
            width: 500,
            maxHeight: 400,
            closeText: 'fechar',
            draggable: true,
            show: 'fade',
            hide: 'fade',
            dialogClass: 'main-dialog-class'
        });
</script>
</head>
<body>
<div id="jq_dialog">Hello StackOverflow!</div>
</body>

이전 예제는 잘 작동하지만 오류 테마의 빨간색 만 사용합니다.

CSS에서 헤더 이미지를 변경하는 간단한 솔루션 :

CSS :

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;      
}

자바 스크립트 :

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
        $(this).parents(".ui-dialog:first").find(".ui-widget-header")
            .removeClass("ui-widget-header").addClass("ui-widget-header-custom");
    }
});

이전 예와는 달리 다음을 제거했습니다. 

removeClass("ui-widget-header")

다음에 클래스를 추가하는 대신 :

find(".ui-dialog-titlebar")

이 예제는 링크없이 대화 상자 헤더와 함께 작동합니다.

때로는 CSS 파일을 편집 할 수 없습니다. 그래서 당신은 이것을 시도 할 수 있습니다 :

dialog = $('<div/>').dialog({
  title: 'Dialog with css for title bar',
  open: function() {
    $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E');
  } 
});
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top