jquery UI 대화상자: 제목 표시줄 없이 초기화하는 방법은 무엇입니까?

jquery UI 대화상자: 제목 표시줄 없이 초기화하는 방법은 무엇입니까?

제목 표시줄 없이 jQuery UI 대화 상자를 열 수 있습니까?

가장 좋은 해결책은 옵션을 사용하는 것이라고 생각합니다.dialogClass.

jquery UI 문서에서 발췌:

중 : 화중기초 :$('.selector').dialog({ dialogClass: 'noTitleStuff' });

또는 그 후에 당신이 원한다면.:

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

그래서 나는 옵션 대화상자 Class='noTitleStuff'와 같은 CSS로 대화상자를 만들었습니다.

.noTitleStuff .ui-dialog-titlebar {display:none}

너무 단순해!! 하지만 나는 왜 내 이전의 id->클래스 드릴링 방법이 작동하지 않는지 생각하는 데 하루가 걸렸습니다.사실 당신이 전화할 때.dialog()div ( 대화의 자식이 이신'()▁the▁a▁div가▁method)형▁of▁the▁you것다▁(▁'니입▁a▁div의 '형제'가 될 수 있습니다.titlebar디브, 그래서 전자에서 시작하여 후자를 찾는 것은 매우 어렵습니다.

제목 표시줄을 동적으로 제거하는 방법을 찾았습니다.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

대화 상자가 렌더링된 후 클래스가 'ui-dialog-titlebar'인 모든 요소가 제거됩니다.

나는 당신이 CSS로 그것을 숨길 수 있다고 믿습니다:

.ui-dialog-titlebar {
    display: none;
}

또는 를 사용하여 특정 대화상자에 적용할 수 있습니다.dialogClass옵션:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});

.no-titlebar .ui-dialog-titlebar {
    display: none;
}

대화 상자의 "테마"를 확인하십시오.위의 제안은 다음을 사용합니다.dialogClass새로운 방법을 선호하는 것으로 보이는 옵션입니다.

프로젝트에 사용합니다.

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

이것은 저에게 효과가 있었습니다.

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

사용해 보십시오.

$("#mydialog").closest(".ui-dialog-titlebar").hide();

모든 대화 상자 제목을 숨깁니다.

$(".ui-dialog-titlebar").hide();

사실 대화 상자를 사용하는 다른 방법이 있습니다.widget직접:

따라서 대화 상자 위젯을 가져올 수 있습니다.

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

그리고 나서 하라.

$dlgWidget.find(".ui-dialog-titlebar").hide();

숨기다, 숨기다, 숨기다, 숨기다,titlebar 에서만.

코드 한 줄로 (나는 체인을 좋아합니다):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

이 방법으로 대화 상자에 클래스를 추가할 필요가 없습니다. 직접 진행하기만 하면 됩니다.저는 괜찮습니다.

열린 이벤트를 사용하고 제목 표시줄을 숨기는 것이 더 효율적이고 읽기 쉽다고 생각합니다.페이지 전역 클래스 이름 검색을 사용하는 것을 좋아하지 않습니다.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

간단하죠.

대화 상자를 초기화할 때 dialogClass를 사용한 후 jquery를 사용하여 제목 표시줄을 숨길 수 있습니다.

초기화 중 :

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

이 방법을 사용하면 CSS 파일을 변경할 필요가 없으며, 이것도 동적입니다.

저는 jQuery 위젯을 무시하는 것을 좋아합니다.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

이제 제목 표시줄을 표시할지 여부를 설정할 수 있습니다.

   $('#mydialog').dialog({
      headerVisible: false // or true
});

대화 상자가 여러 개인 경우 다음을 사용할 수 있습니다.

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

이 방법은 가장 쉬운 방법이며 특정 대화 상자에서 제목 표시줄만 제거합니다.

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

대화 상자 제목 표시줄을 숨길 때 한 가지 알게 된 것은 디스플레이가 없는 경우에도 화면 판독기가 해당 제목 표시줄을 선택하여 읽을 수 있다는 것입니다.사용자의 제목 표시줄을 이미 추가한 경우 두 개를 모두 읽어서 혼동이 발생합니다.

한은 제가한에 DOM서제거다를 사용하여 되었습니다.$(selector).remove()이제 화면 판독기(및 다른 모든 사용자)는 더 이상 존재하지 않으므로 볼 수 없습니다.

사용해 보세요.

$("#ui-dialog-title-divid").parent().hide();

체교다를 divid하는 응하여에 .id

이 다음 양식으로 문제를 해결했습니다.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});

#basicModal {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

제 생각에 가장 깨끗한 방법은 제목 바코드를 뺀 대화 상자 위젯으로 구성된 새로운 myDialog 위젯을 만드는 것입니다.제목 바코드를 삭제하는 것은 간단합니다.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

대화 상자 제목 표시줄을 숨길 수 있습니다.

$(".ui-dialog-titlebar" ).css("display", "none" );

이것이 그것이 가능하게 하는 방법입니다.

테마 폴더로 이동--> base--> jquery.ui.dialog.css를 엽니다.

찾기

팔로잉

제목Bar를 표시하지 않으려면 다음과 같이 display:none을 설정하면 됩니다.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

제목도 마찬가지입니다.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

이제 닫기 버튼을 사용하여 설정하지 않거나 설정할 수 있습니다.

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

저는 많은 검색을 했지만 아무 것도 하지 않았습니다. 그리고 나서 저는 이 아이디어를 생각해 냈습니다.그러나 이것은 전체 응용 프로그램에 대화 상자의 제목 표시줄인 닫기 단추가 없는 것에 영향을 미치지만 jquery를 사용하고 jquery를 통해 css를 추가하고 설정함으로써 이 문제를 극복할 수 있습니다.

여기 이것에 대한 구문이 있습니다.

$(".specificclass").css({display:normal})

저는 여전히 크기 조정이 가능한 모서리를 사용하고 싶었기 때문에 대각선을 봅니다.사용한

$(".ui-resizable-handle").css("opacity","0");

방금 제가 잘못된 질문에 대해 언급하고 있다는 것을 깨달았습니다.내 이름에 걸맞는 삶 :(

jQuery UI 문서의 솔루션을 사용해 보셨습니까?https://api.jqueryui.com/dialog/ #http-open

이렇게 할 수 있다고 하니깐...

CSS에서:

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

JS에서:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

이것은 나에게 효과가 있었습니다.

 open: function(event, ui) {
            $(".ui-dialog-titlebar", $(this).parent())
              .hide();

가득한

$speedbump.dialog({
  dialogClass: 'speedbump-container',
  autoOpen: false,
  closeOnEscape: false,
  modal: true,
  resizable: false,
  draggable: false,
  create: function () {        
      $speedbump
        .closest('.ui-dialog')
        .attr('id', 'speedbump-container');
  },
  open: function(event, ui) {
    $(".ui-dialog-titlebar", $(this).parent())
      .hide();
}

위에서 설명한 기법으로 닫기 아이콘이 있는 막대를 제거한 다음 직접 닫기 아이콘을 추가할 수 있습니다.

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

//이 디브를 당신의 콘텐츠를 보유하고 있는 디브에게 전달합니다.

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

jquery-ui.js(나의 경우 jquery-ui-1.10.3.custom.js)로 이동하여 검색합니다._createTitlebar(); 를 작성하고 주석을 달습니다.

이제 모든 대화 상자가 머리글과 함께 나타납니다.헤더를 사용자 지정하려면 _create로 이동하십시오.제목 표시줄(); 내부 코드를 편집합니다.

타고

언급URL : https://stackoverflow.com/questions/1023072/jquery-ui-dialog-how-to-initialize-without-a-title-bar