jquery UI डायलॉग: टाइटल बार के बिना इनिशियलाइज़ कैसे करें?

Question

क्या टाइटल बार के बिना jQuery UI डायलॉग खोलना संभव है?

Answer 1

मुझे लगता है कि विकल्प का उपयोग करने के लिए सबसे अच्छा समाधान है dialogClass।

Jquery UI डॉक्स से एक अर्क:

init के दौरान: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

या यदि आप init के बाद चाहते हैं। :

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

इसलिए मैंने विकल्प डायलॉग क्लैस = 'नॉटीटेस्टफ' और इस तरह के सीएसएस के साथ कुछ संवाद बनाए:

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

बहुत आसान !! लेकिन मुझे यह सोचने में 1 दिन लगा कि मेरी पिछली आईडी-> क्लास ड्रिलिंग विधि काम क्यों नहीं कर रही थी। वास्तव में जब आप .dialog()विधि को कॉल करते हैं तो आप जिस div को बदलते हैं वह एक अन्य div (वास्तविक डायलॉग डिव) और संभवतः डिव का एक 'भाई' बन जाता है titlebar, इसलिए पूर्व से शुरू होने वाले उत्तरार्ध को खोजने की कोशिश करना बहुत मुश्किल है।

Comments

+1 योनातन का समाधान विशेष संवाद के लिए काम नहीं करता है। आपका है।

— सीतारन

मैं मिज़र से सहमत हूँ। इस तथ्य के कारण यह सबसे अच्छा समाधान है कि यह आपको उन संवाद बॉक्सों के लिए विशिष्ट होने की अनुमति देता है जिनमें केवल वह वर्ग होता है जिसे आपने परिभाषित किया था।

— कार्लोस पिंटो

इस विधि का एकमात्र नकारात्मक पहलू यह है कि क्रोम ऐसे डायलॉग के लिए वर्टिकल स्क्रॉल बार जोड़ता है जब इसे मोडल के रूप में कॉन्फ़िगर किया जाता है, क्योंकि किसी तरह jQuery गलत तरीके से इसकी यूआई-विजेट-ओवरले ऊंचाई की गणना करना शुरू कर देता है ... मैं गहरा खुदाई नहीं करता था, और didn

— हैकी

DialClass को jquery v 1.12 में पदावनत किया गया है और यह डायलॉग ऑब्जेक्ट को उद्देश्य के रूप में प्रभावित नहीं करता है।

— मिनी फ्रिज

संवाद विकल्प को यूआई-डायलॉग संपत्ति का उपयोग करके वर्गों के विकल्प के पक्ष में चित्रित किया गया है।

— संदीप सरोहा

Answer 2

मैंने टाइटल बार को गतिशील रूप से हटाने के लिए एक फिक्स किया।

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

यह संवाद बॉक्स के प्रस्तुत होने के बाद वर्ग 'यूआई-डायलॉग-टाइटलबार' के साथ सभी तत्वों को हटा देगा।

Comments

... और सीएसएस विकल्प उनमें से किसी को भी पहले दिखाने का मौका निकालता है। मुझे यकीन नहीं है कि मुझे आपके विकल्प में कोई लाभ दिखाई दे रहा है। वास्तव में, आपका विकल्प वह है जो मैंने किया था, केवल एक अतिरिक्त कदम जोड़कर। CSS-Route पर जाना और तेज़ होगा।

— सैम्पसन

वैसे मेरा विकल्प केवल इस एक डायलॉग के लिए टाइटल बार को हटा देगा। यदि मैंने आपके विकल्प का उपयोग किया है, तो मैं अपने सभी संवादों के लिए शीर्षक पट्टी को हटा दूंगा। मैं भविष्य में देख सकता हूं कि मुझे शीर्षक बार की आवश्यकता होगी।

— Loony2nz

तो आप अपने तत्व को css-rule में शामिल करें #example .ui-dialog-titlebar...:। यह किसी भी तरह से काम करेगा; लेकिन जावास्क्रिप्ट अंततः सीएसएस सेट करने जा रहा है, इसलिए मुझे इसे शुरू करने के लिए सीएसएस में नहीं करने का लाभ नहीं दिखता है। यह वास्तव में बहुत फर्क नहीं करता है - जो कुछ भी आप के साथ सबसे अधिक आरामदायक हैं :)

— सैम्पसन

क्या यह सिर्फ मेरे लिए है या #example में डायलॉग शीर्षक पर गुंजाइश नहीं है?

— रियो

@Rice Flour Cookies: .hide () के बाद .dialog () आना है क्योंकि .dialog () वह है जो पेज में डायलॉग के लिए मार्कअप को इंजेक्ट करता है। कॉल करने से पहले पृष्ठ में अभी तक कोई संवाद तत्व नहीं है।

— जेरेमी विएबे

Answer 3

मेरा मानना ​​है कि आप इसे CSS से छिपा सकते हैं:

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

वैकल्पिक रूप से, आप इसे dialogClassविकल्प के साथ विशिष्ट संवादों पर लागू कर सकते हैं :

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

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

डायलॉग को " थीमिंग " देखें। ऊपर सुझाव बनाता है के उपयोग करने dialogClassका विकल्प है, जो पर प्रतीत होता है बाहर यह की तरह एक नई पद्धति के पक्ष में।

Comments

हां मुझे लगता है कि यह काम करेगा, लेकिन यह एक वैश्विक विकल्प है। मैं सोच रहा था कि क्या विकल्प के साथ ऐसा करने का कोई तरीका है। मुझे लगता है कि मैं दिखाए जाने से पहले शीर्षक div को हटाने के लिए कुछ प्री रेंडरिंग jquery'ness कर सकता हूं।

— Loony2nz

नहीं, मैं नहीं मानता कि इसे हटाने का कोई विकल्प है। डिफ़ॉल्ट रूप से यह क्लोज-बटन है, इसलिए एक अर्थ में यह लगभग खराब-डिज़ाइन है।

— सैम्पसन

जब लोग सीएसएस के बारे में बहुत बात करते हैं, तो वे मजाक करते हैं, वे नहीं

— बोबोबोबो

इसके अलावा, आप शायद इसे हटा न दें क्योंकि आप इसके बाद संवाद को आगे नहीं बढ़ा सकते। शायद बेहतर है कि इसमें कोई पाठ न डालें और इसे आराम दें ताकि यह अंधेरा और पतला हो

— बॉबोबोबो

यदि आपके पास कुछ अन्य घटना है जो संवाद की करीबी विधि को ट्रिगर करती है, तो ऐसे मामले हो सकते हैं जहां आपको शीर्षक पट्टी पर करीब बटन की आवश्यकता नहीं है।

— कार्लोस पिंटो

Answer 4

मैं अपने प्रोजेक्ट्स में इसका इस्तेमाल करता हूं

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

Comments

इससे भी बेहतर: टाइटलबार हटाएं लेकिन क्लोज बटन नहीं। इसकी कार्यक्षमता बनाए रखें। $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });

— एड्रियन पी।

$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();इस लाइन के लिए मेरी राय +1 में सबसे अच्छा जवाब है

— Jaylen

या आप सिर्फ पिछले भाई-बहन की तलाश कर सकते हैं, जिसका शीर्षक बार है: .ui-dialog-titlebar: $("#myDialog").prev().hide()या $("#myDialog").prev(".ui-dialog-titlebar").hide()।

— एंड्रयू

वोट अप करें क्योंकि मेरे पास दो div हैं, और मैं सिर्फ एक को छिपाना चाहता था।

— मार्कस बेकर

Answer 5

यह मेरे लिए काम किया:

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

Comments

यह हेडर को सभी संवादों में छिपा देगा । मेरा सुझाव नीचे (अगला उत्तर) यह केवल वर्तमान में खुलने वाले संवाद के लिए होगा।

— ingredient_15939

नीस ... इसका मतलब है कि मुझे आधार सीएसएस क्लास की वजह से हर संवाद को छिपाना नहीं है ... इसका मतलब यह भी है कि मुझे अपना डायलॉग अलग से सेट करना होगा और फिर शीर्षक को हटाना होगा।

— गावसोप्पा ०

Answer 6

प्रयोग करके देखें

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

यह सभी संवाद शीर्षकों को छिपा देगा

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

Answer 7

वास्तव में ऐसा करने का एक और तरीका है, widgetसीधे संवाद का उपयोग करना :

आप इस प्रकार डायलॉग विजेट प्राप्त कर सकते हैं

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

और फिर करते हैं

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

titlebarउस संवाद के भीतर ही छिपाने के लिए

और कोड की एक पंक्ति में (मुझे चैनिंग पसंद है):

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

इस तरह संवाद में एक अतिरिक्त वर्ग जोड़ने की जरूरत नहीं है, बस सीधे उस पर जाएं। मेरे लिए ठीक काम करता है।

Answer 8

मुझे यह अधिक कुशल लगता है, और अधिक पठनीय, खुली घटना का उपयोग करने के लिए , और वहां से शीर्षक पट्टी को छुपाने के लिए। मुझे पेज-ग्लोबल क्लास नाम खोजों का उपयोग करना पसंद नहीं है।

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

सरल।

Comments

यह वह विधि है जिसके साथ मैं गया था, लेकिन बनाएँ का उपयोग किया: फ़ंक्शन ताकि यह हमेशा छिपा रहे, न कि केवल जब संवाद दिखाया जाए। मैंने इसे .hide () के बजाय .hide () में बदल दिया ताकि यह सुनिश्चित हो सके कि यह पूरी तरह से डायलॉग से चला गया है।

— क्रिस पोर्टर

Answer 9

डायलॉग को इनिशियलाइज़ करने पर आप टाइटलबार को डायल करने के बाद टाइटलबार को छुपाने के लिए jquery का उपयोग कर सकते हैं।

init के दौरान:

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

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

इस पद्धति का उपयोग करके, आपको अपनी css फ़ाइल को बदलने की आवश्यकता नहीं है, और यह गतिशील भी है।

Comments

हाँ, यह मिज़ार का समाधान था - 6 महीने पहले आपका पोस्ट किया गया।

— Kirk Woll

मैं सहमत हूं, लेकिन फिर आपको एक सीएसएस प्रविष्टि भी जोड़ना होगा जो समाधान को जटिल करता है। मेरा सुझाव केवल jQuery का उपयोग कर समस्या का ख्याल रखता है।

— अरुण वासुदेवन नायर

Answer 10

मुझे 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
});

Answer 11

यदि आपके पास एक से अधिक संवाद हैं, तो आप इसका उपयोग कर सकते हैं:

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

Answer 12

यह इसे करने का सबसे आसान तरीका है और यह केवल एक विशिष्ट संवाद में टाइटलबार को हटा देगा;

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

Answer 13

डायलॉग टाइटलबार को छुपाते समय मुझे जो एक चीज पता चली वह यह है कि, भले ही डिस्प्ले कोई भी हो, स्क्रीन रीडर अभी भी इसे उठाता है और इसे पढ़ेगा। यदि आपने पहले से ही अपना टाइटल बार जोड़ा है, तो यह दोनों को पढ़ेगा, जिससे भ्रम पैदा होगा।

मैंने जो किया, उसे DOM के उपयोग से हटा दिया गया $(selector).remove()। अब स्क्रीन रीडर (और हर एक) इसे नहीं देखेंगे क्योंकि यह अब मौजूद नहीं है।

Answer 14

इसे इस्तेमाल करे

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

dividइसी के द्वारा प्रतिस्थापित करेंid

Answer 15

इस अगले रूप ने मुझे समस्या को ठीक कर दिया।

$('#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>

Answer 16

मुझे लगता है कि ऐसा करने का सबसे साफ तरीका एक नया myDialog विजेट बनाना होगा, जिसमें डायलॉग विजेट का शीर्षक बार कोड शामिल होगा। टाइटल बार कोड को सीधा करना रोमांचक लगता है।

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

Answer 17

इसने मेरे लिए डायलॉग बॉक्स टाइटल बार को छिपाने का काम किया:

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

Answer 18

यह कैसे किया जा सकता है।

थीम फ़ोल्डर पर जाएं -> आधार -> ओपन jquery.ui.dialog.css

खोज

निम्नलिखित

यदि आप titleBar प्रदर्शित नहीं करना चाहते हैं, तो बस प्रदर्शन सेट करें: कोई भी नहीं जैसा कि मैंने निम्नलिखित में किया था।

.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})

Comments

यह काम करता है और यह समझने में मददगार है कि यह किया जा सकता है, लेकिन अगर आपके पास एकाधिक .dialogs()और केवल 1 या तो इन सेटिंग्स की आवश्यकता है, तो इस तरह से विश्व स्तर पर सेटिंग्स को लागू करने की तुलना में वैकल्पिक मार्ग हैं।

— शेफ_कोड

Answer 19

मेरे लिए, मैं अभी भी फिर से बड़े आकार के कोनों का उपयोग करना चाहता था, बस इतना नहीं चाहता था कि विकर्ण रेखाएं देखें। मैंनें इस्तेमाल किया

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

बस मुझे एहसास हुआ कि मैं गलत सवाल पर टिप्पणी कर रहा था। मेरे नाम तक जीना :(

Answer 20

क्या आपने jQuery UI डॉक्स से समाधान की कोशिश की है? https://api.jqueryui.com/dialog/#method-open

जैसा कि आप कहते हैं कि आप इस तरह कर सकते हैं ...

सीएसएस में:

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

जेएस में:

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

Answer 21

आप ऊपर वर्णित टेचीनी के साथ क्लोज आइकन के साथ बार को हटा सकते हैं और फिर अपने आप से एक करीबी आइकन जोड़ सकते हैं।

सीएसएस:

.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 को जोड़ें

जे एस:

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

Answer 22

अपने jquery-ui.js (मेरे मामले में jquery-ui-1.10.3.custom.js) पर जाएं और इसके लिए खोजें ।_createTitlebar (); और यह टिप्पणी करें।

अब आपका कोई भी डायलॉग हेडर के साथ दिखाई देगा। यदि आप शीर्ष लेख को अनुकूलित करना चाहते हैं तो _createTitlebar () पर जाएं; और कोड को अंदर संपादित करें।

द्वारा

Comments

इस तरह के संशोधन करने से भयानक अपग्रेड दर्द होता है।

— usr