กล่องโต้ตอบ jquery UI: วิธีการเริ่มต้นโดยไม่มีแถบชื่อ?

เป็นไปได้หรือไม่ที่จะเปิด jQuery UI Dialog โดยไม่มีแถบหัวเรื่อง?

dialogClassผมคิดว่าทางออกที่ดีที่สุดคือการใช้ตัวเลือก

สารสกัดจากเอกสาร jquery UI:

ในช่วง init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

หรือถ้าคุณต้องการหลังจาก init :

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

ดังนั้นฉันจึงสร้างกล่องโต้ตอบด้วย option dialogClass = 'noTitleStuff' และ css เช่นนั้น:

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

ง่ายเกินไป !! แต่ฉันใช้เวลา 1 วันคิดว่าทำไมวิธีการเจาะระดับ id-> ระดับก่อนหน้าของฉันไม่ทำงาน ในความเป็นจริงเมื่อคุณเรียก.dialog()เมธอด div ที่คุณเปลี่ยนกลายเป็นลูกของ div อื่น (div ไดอะล็อกจริง) และอาจเป็น 'พี่ชาย' ของtitlebardiv ดังนั้นจึงเป็นเรื่องยากมากที่จะลองค้นหาอันหลังที่เริ่มจากอดีต

ฉันพบวิธีแก้ไขสำหรับการลบแถบหัวเรื่องแบบไดนามิก

$("#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โดยตรง:

คุณสามารถรับ Dialog 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(); }

ง่าย

คุณสามารถใช้ jquery เพื่อซ่อนแถบหัวเรื่องหลังจากใช้ dialogClass เมื่อเริ่มต้นการโต้ตอบ

ในช่วง init:

$('.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" );

นี่คือวิธีที่สามารถทำได้

ไปที่โฟลเดอร์ชุดรูปแบบ -> ฐาน -> เปิด jquery.ui.dialog.css

หา

ดังต่อไปนี้

หากคุณไม่ต้องการแสดง titleBar ให้ตั้งค่า display: none ตามที่ฉันทำในรายการต่อไปนี้

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

Samilarly สำหรับชื่อเช่นกัน

.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 และเพิ่มและตั้งค่า css ผ่าน jquery

นี่คือไวยากรณ์สำหรับสิ่งนี้

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

สำหรับฉันฉันยังต้องการใช้มุมที่ปรับขนาดได้ใหม่ แต่ไม่ต้องการเห็นเส้นทแยงมุม ฉันใช้

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

เพิ่งรู้ว่าฉันกำลังแสดงความคิดเห็นในคำถามที่ผิด ใช้ชีวิตตามชื่อของฉัน :(

คุณลองวิธีแก้ปัญหาจาก jQuery UI docs แล้วหรือยัง? https://api.jqueryui.com/dialog/#method-open

อย่างที่บอกว่าคุณสามารถทำสิ่งนี้ได้ ...

ใน CSS:

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

ใน JS:

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

คุณสามารถลบบาร์ที่มีไอคอนปิดพร้อมกับ techinques ที่อธิบายไว้ข้างต้นแล้วเพิ่มไอคอนปิดด้วยตัวคุณเอง

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

// ผนวก div นี้กับ div ที่ถือเนื้อหาของคุณ

JS:

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

ไปที่ jquery-ui.js ของคุณ (ในกรณีของฉัน jquery-ui-1.10.3.custom.js) และค้นหา this._createTitlebar (); และแสดงความคิดเห็น

ตอนนี้กล่องโต้ตอบของคุณทุกคนจะปรากฏขึ้นพร้อมกับส่วนหัว หากคุณต้องการปรับแต่งส่วนหัวเพียงไปที่ _createTitlebar (); และแก้ไขรหัสภายใน

โดย