jQuery UI डायलॉग - नज़दीकी आइकन गायब

Question

मैं एक कस्टम jQuery 1.10.3 विषय का उपयोग कर रहा हूं। मैंने थीम रोलर से सीधे डाउनलोड किया और मैंने जानबूझकर कुछ भी नहीं बदला है।

मैं एक संवाद बॉक्स बनाता हूं और मुझे एक खाली ग्रे वर्ग मिलता है जहां क्लोज आइकन होना चाहिए:

मैंने अपने पृष्ठ पर उत्पन्न कोड की तुलना की:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

डायलॉग डेमो पेज पर उत्पन्न कोड के लिए :

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

संपादित करें: कोड के विभिन्न भाग jQueryUI द्वारा उत्पन्न होते हैं , इसलिए नहीं कि मैं सिर्फ jqueryui js फ़ाइल को संपादित किए बिना स्पैन टैग नहीं जोड़ सकता हूं जो सामान्य कार्यक्षमता को प्राप्त करने के लिए एक बुरी / अनावश्यक पसंद की तरह लगता है।

यहाँ जावास्क्रिप्ट का उपयोग किया गया है जो कोड के उस हिस्से को उत्पन्न करता है:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

मैं नुकसान में हूं और मदद की जरूरत है। अग्रिम में धन्यवाद।

Comments

क्या आपने चेक किया है कि क्या आइकन के लिए इमेज फाइल आपके फाइल सिस्टम में मौजूद है?

— तिकेलो

हां, आइकन इमेज शीट मौजूद है और सही स्थान पर है।

— Xion Dark

Answer 1

मैं थोड़ी देर से इस एक के लिए देर हो रही है, लेकिन मैं अपने दिमाग को उड़ाने के लिए तैयार हूँ?

इसका कारण यह हो रहा है, क्योंकि आप बूटस्ट्रैप को कॉल कर रहे हैं, जब आप jquery-ui को कॉल कर रहे हैं।

सचमुच, दो को स्वैप करें ताकि इसके बजाय:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

यह हो जाता है

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

संपादित करें - 26/06/2015 - यह ब्याज महीनों को आकर्षित करता रहता है इसलिए मुझे लगा कि यह एक संपादन के लायक है। मैं वास्तव में इस जवाब के नीचे टिप्पणी में की पेशकश की noConflict समाधान वास्तव में पसंद है और एक अलग जवाब के रूप में उपयोगकर्ता सुंदर कूल द्वारा स्पष्ट किया। जब स्क्रिप्ट की अदला-बदली होती है तो कुछ ने बूटस्ट्रैप टूलटिप के साथ मुद्दों की सूचना दी है। हालाँकि, मैंने उस मुद्दे का अनुभव नहीं किया क्योंकि मैंने टूलटिप के बिना jquery UI डाउनलोड किया था क्योंकि मुझे बूटस्ट्रैप की ज़रूरत नहीं थी। इसलिए यह मुद्दा कभी मेरे लिए नहीं आया।

संपादित करें - 22/07/2015 - के jquery-uiसाथ भ्रमित मत करो jquery! जबकि बूटस्ट्रैप के जावास्क्रिप्ट को पहले लोड करने के लिए jQuery की आवश्यकता होती है, यह jQuery-UI पर निर्भर नहीं करता है। इसलिएjquery-ui.js बाद में लोड किया जा सकता है bootstrap.min.js, जबकि jquery.jsहमेशा बूटस्ट्रैप से पहले लोड करने की आवश्यकता होती है।

Comments

इससे मेरी समस्या ठीक हो गई। मैंने इस क्रम में संसाधनों को शामिल किया: 1) JQuery कोर 2) बूटस्ट्रैप 3) JQueryUI। आपकी सहायता के लिए धन्यवाद; देर आए दुरुस्त आए! PS - आपने मेरा दिमाग उड़ा दिया।

— Xion Dark

बाद में भी ... क्या आप समझा सकते हैं कि बूटस्ट्रैप ऑर्डर का इससे कोई लेना-देना क्यों है?

— एंडी

यदि आप ऑर्डर को बूट करते हैं बूटस्ट्रैप Jquery UI से पहले आते हैं तो बूटस्ट्रैप टूलटिप्स काम नहीं करेगा।

— वी

हालांकि यह वास्तव में एक अच्छा समाधान नहीं है, मैंने इसे अपग्रेड किया क्योंकि यह सत्यापित करने का एक त्वरित तरीका देता है कि यह समस्या है। मैं व्यक्तिगत रूप से अंत में राउल रिवरोस के समाधान का उपयोग करूंगा क्योंकि केवल दो लिपियों की अदला-बदली करने से बहुत सी अन्य, बड़ी समस्याएं पैदा होती हैं। BTW, जब मैंने इसे देखा तो मैं एक बुरा मन था।

— 22

यदि आप बूटस्ट्रैप और jQuery UI के क्रम को बदलना नहीं चाहते हैं, तो आप बटन को भी ठीक कर सकते हैं: $.fn.bootstrapBtn = $.fn.button.noConflict(); stackoverflow.com/a/23428433/402517

— l.poellabauer

Answer 2

यह शीर्ष उत्तर पर एक टिप्पणी है, लेकिन मुझे लगा कि यह इसके स्वयं के जवाब के लायक है क्योंकि इससे मुझे समस्या का उत्तर देने में मदद मिली।

यदि आप JQuery UI के बाद बूटस्ट्रैप को घोषित रखना चाहते हैं (मैंने किया था क्योंकि मैं बूटस्ट्रैप टूलटिप का उपयोग करना चाहता था), निम्नलिखित की घोषणा करते हुए (मैंने इसे बाद में घोषित किया $(document).ready) बटन को फिर से प्रदर्शित करने की अनुमति देगा ( https://stackoverflow.com/ से उत्तर) a / 23428433/4660870 )

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Comments

यह बहुत परेशान करने के बिना चीजों को करने का एक शानदार तरीका है। उसी के लिए +1।

— आलोक मिश्र

बटन कक्षाओं के साथ हस्तक्षेप

— स्टीफानो माटांगू

इस समाधान के साथ समस्या यह है कि जहां आप बूटस्ट्रैप बटन की कार्यक्षमता का उपयोग करना चाहते हैं वह कोड को तोड़ देगा, जैसे बटन ('लोडिंग')। यह सुनिश्चित करने के लिए कि मौजूदा बूटस्ट्रैप बटन कार्यक्षमता अभी भी काम करती है, बूटस्ट्रैप "बटन ()" फ़ंक्शन कॉल को "बूटस्ट्रैपबटन ()" के साथ सभी संदर्भों को बदलें। (हां, मुझे पता है कि कोड टिप्पणी इस तरह की है, लेकिन मुझे लगा कि यह स्पष्ट रूप से कहने लायक है।)

— कोर्नेल रीजियस

क्या आपका संपादक लापता अर्धविराम के बारे में शिकायत नहीं करता है?

— आर। श्रेयर्स

Answer 3

यह जिस तरह से jQuery के जहाजों में एक बग प्रतीत होता है। आप इसे Dialog Openघटना पर कुछ डोम हेरफेर के साथ मैन्युअल रूप से ठीक कर सकते हैं :

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});

Comments

भविष्य के पाठकों के लिए FYI करें, आप ui.dialog (लिंक) का विस्तार कर सकते हैं ताकि आपको हर कॉल में इस खुली कार्यक्षमता की नकल न करनी पड़े।

— जॉन मैकइंटायर

इसने काफी अच्छा काम किया। X सामान्य से थोड़ा सा आगे था, हालांकि ... निश्चित रूप से क्यों नहीं।

— ashlar64

महान समाधान! हालाँकि मेरे मामले में निष्कासन (...) अनावश्यक था और डायलॉग विंडो के बाईं ओर गलत X बटन पैदा कर रहा था। बस HTML () विधि को खोजने के लिए () विधि का पालन करते हुए काम किया। धन्यवाद।

— आमिर

Answer 4

यह 1.10 में टूटने की सूचना है

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

29 जनवरी, 2013 को सुबह 7:36 बजे फिलिप ने कहा: सीडीएन संस्करणों में, डायलॉग क्लोज बटन गायब है। केवल बटन का टैग है, स्पैन यूआई-आइकन मिसॉन्ग है।

मैंने पिछले संस्करण को डाउनलोड किया और बंद बटन के लिए X बैक अप दिखाता है।

Comments

मैं १.१०.३ का उपयोग कर रहा हूं, लेकिन कम से कम मुझे अब कम पागल लगता है। मैंने अभी के लिए इसे अनदेखा करना चुना है। धन्यवाद।

— Xion डार्क

मैं पुष्टि कर सकता हूं कि यह अभी भी 1.10.3 में एक मुद्दा है

— Frug

१.१०.४ में अब भी वही है

— डब्लूओ

१.१२.१ में एक ही अंक

— १D:५० पर टेट्राडेव

Answer 5

मुझे तीन सुधार मिले:

1. आप पहले बूटस्ट्रैप को लोड कर सकते हैं। और वे jquery-ui लोड करते हैं। लेकिन यह अच्छा विचार नहीं है। क्योंकि आपको कंसोल में त्रुटियाँ दिखाई देंगी।

2. यह:

   var bootstrapButton = $.fn.button.noConflict();
   $.fn.bootstrapBtn = bootstrapButton;

   मदद करता है। लेकिन अन्य बटन भयानक दिखते हैं। और अब हमारे पास बूटस्ट्रैप बटन नहीं हैं।

3. मैं बस बूटस्ट्रैप शैलियों का उपयोग करना चाहता हूं और यह भी चाहता हूं कि आइकन के साथ करीब बटन होना चाहिए। मैंने निम्नलिखित कार्य किया है:

   फिक्स के बाद कितना नजदीकी बटन दिखता है

   .ui-dialog-titlebar-close {
       padding:0 !important;
   }
   
   .ui-dialog-titlebar-close:after {
       content: '';
       width: 20px;
       height: 20px;
       display: inline-block;
       /* Change path to image*/
       background-image: url(themes/base/images/ui-icons_777777_256x240.png);
       background-position: -96px -128px;
       background-repeat: no-repeat;
   }

Comments

उत्कृष्ट! यदि आपके पास छवि फ़ाइल या कोई विशिष्ट विषय स्थापित नहीं है, तो आप इसे यहाँ प्राप्त कर सकते हैं: jqueryui.com/themeroller । विषय डाउनलोड करें और उन घटकों का चयन करें जिनकी आपको आवश्यकता है (इस मामले में, संवाद)। फिर डाउनलोड करें, निकालें, थीम या छवि फ़ोल्डर खोलें और उस छवि फ़ाइल को कॉपी करें जो आपके प्रोजेक्ट में आपकी थीम से मेल खाती है। फिर अपने उत्तर में याओनी द्वारा प्रदान की गई सीएसएस में संदर्भ को बदलें।

— गमबोआ

आपकी बात 3 ने मेरे लिए समस्या हल कर दी। मुझे सिर्फ बटन, जो मैं चाहता था, बनाने के लिए चौड़ाई, ऊंचाई और पृष्ठभूमि-स्थिति में मामूली समायोजन करना होगा। धन्यवाद।

— विमलन जया गणेश

Answer 6

मेरे पास एक ही सटीक मुद्दा था, हो सकता है कि आपने पहले ही इसे चबा लिया हो, लेकिन इसे केवल "चित्र" फ़ोल्डर को उसी स्थान पर रखकर हल किया गया, जैसे कि jquery-ui.css

Comments

वास्तव में यह प्रतिक्रिया है जिसने मेरे लिए समस्या को हल किया, या कम से कम इसे स्पष्ट किया। मेरे पास एक परीक्षण पृष्ठ था जो ऑनलाइन (यानी, code.jquery.com / ... ) jquery-ui.css की प्रतिलिपि का उल्लेख कर रहा था और उस मामले में "एक्स" दिखा। हालांकि मेरे वास्तविक प्रोजेक्ट पेज में, जिसमें एक स्थानीय सीएसएस फ़ोल्डर में .css फ़ाइल थी, "X" नहीं दिखा रहा था। "छवियों" फ़ोल्डर को मेरे स्थानीय सीएसएस फ़ोल्डर में कॉपी करना, साथ में मेरी .css फ़ाइल, समस्या को ठीक करना।

— डेव मार्ले

Answer 7

मैं उसी समस्या के साथ फंस गया और पढ़ने के बाद और ऊपर दिए गए सभी सुझावों को आज़माकर मैंने बस इस चित्र को मैन्युअल रूप से बदलने की कोशिश की (जिसे आप इसे यहाँ पा सकते हैं ) इसे डाउनलोड करने के बाद CSS में और अपने ऐप और voilá पर मौजूद चित्र फ़ोल्डर में सहेजा गया, समस्या सुलझ गयी!

यहाँ सीएसएस है:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}

Answer 8

मैं jQuery UI 1.8.17 का उपयोग कर रहा हूं और मेरे पास भी यही मुद्दा है, साथ ही मुझे अतिरिक्त सीएसएस स्टाइलशीट पृष्ठ पर चीजों पर लागू किया जा रहा है, जिसमें टाइटलबार रंग भी शामिल है। इसलिए किसी भी अन्य मुद्दों से बचने के लिए, मैंने नीचे दिए गए कोड का उपयोग करके सटीक ui तत्वों को लक्षित किया:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

तब मैंने संवाद के गुणों में एक करीब बटन जोड़ा: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

किसी कारण से मुझे दोनों वस्तुओं को लक्षित करना पड़ा, लेकिन यह काम करता है!

Answer 9

मुझे पता है कि यह प्रश्न पुराना है, लेकिन मेरे पास सिर्फ jquery-ui v1.12.0 के साथ यह मुद्दा था।

लघु उत्तर सुनिश्चित करें कि आप एक फ़ोल्डर बुलाया है Imagesमें एक ही जगह आप jquery-ui.min.css। छवियों फ़ोल्डर में jquery-ui का ताज़ा डाउनलोड पाया गया चित्र होना चाहिए

लंबा जवाब

मेरा मुद्दा यह है कि मैं अपने सभी सीएसएस फाइलों को एक ही फाइल में मर्ज करने के लिए gulp का उपयोग कर रहा हूं। जब मैं ऐसा करता हूं, तो मैं स्थान बदल रहा हूं jquery-ui.min.css। संवाद के लिए सीएसएस कोड Imagesउसी निर्देशिका में नामक एक फ़ोल्डर की अपेक्षा करता है और इस फ़ोल्डर के अंदर यह डिफ़ॉल्ट आइकन की अपेक्षा करता है। चूंकि gulp छवियों को नए गंतव्य में कॉपी नहीं कर रहा था इसलिए यह x आइकन नहीं दिखा रहा था।

Answer 10

एक संदर्भ के रूप में, यह है कि मैंने @ जॉन-मैकिन्ट्रे के सुझाव के अनुसार खुली विधि को कैसे बढ़ाया:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

Answer 11

  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Answer 12

यदि आप js फ़ंक्शन के अंदर डायलॉग () कॉल कर रहे हैं, तो आप नीचे दिए गए बूटस्ट्रैप बटन संघर्ष कोड का उपयोग कर सकते हैं

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>

Answer 13

एक बुद्धिमान व्यक्ति ने एक बार मेरी मदद की।

जहां jquery-ui.cssस्थित है उस फ़ोल्डर में , "चित्र" नाम का एक फ़ोल्डर बनाएं और उसमें नीचे की फाइलों को कॉपी करें:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

और क्लोज आइकन दिखाई देता है।

Answer 14

बस लापता में जोड़ें:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

Comments

मैं नहीं कर सकता। मैं html के उस हिस्से को नहीं बनाता, jquery करता है। मैंने इस बिंदु को स्पष्ट करने के लिए अपने प्रश्न में और जानकारी जोड़ी।

— जिओन डार्क

Answer 15

मैं इस मुद्दे के रूप में अच्छी तरह से कर रहा हूँ। यहाँ वह कोड है जो क्लोज बटन के लिए डाला जा रहा है:

जब मैं शैली बंद कर देता हूं = "प्रदर्शन: कोई नहीं:" बटन पर, तो बंद बटन दिखाई देता है। तो किसी कारण से कि प्रदर्शन: कोई नहीं; सेट हो रहा है, और मुझे नहीं लगता कि इसे कैसे नियंत्रित किया जाए। तो इसे संबोधित करने का एक और तरीका केवल प्रदर्शन को ओवरराइड करना हो सकता है: कोई नहीं। हालांकि ऐसा करने के लिए मत देखो।

मैं ध्यान देता हूं कि काइलमिट द्वारा पोस्ट किया गया उत्तर काम करता है, लेकिन एक अलग दिखने वाला एक्स बटन बनाता है।

मैं यह भी ध्यान देता हूं कि यह समस्या मेरे पृष्ठों पर सभी संवादों को प्रभावित नहीं करती है, लेकिन उनमें से कुछ पर। कुछ संवाद उम्मीद के मुताबिक काम करते हैं; अन्य का कोई शीर्षक नहीं है (अर्थात, शीर्षक वाला रिक्त स्थान खाली है) जबकि नज़दीकी बटन मौजूद है।

मैं सोच रहा हूं कि कुछ गंभीर रूप से गलत है और यह 1.10.x के लिए समय नहीं हो सकता है।

लेकिन आगे के काम के बाद, मुझे पता चला कि कुछ मामलों में शीर्षक ठीक से सेट नहीं हो रहे थे, और इसे ठीक करने के बाद, एक्स क्लोज बटन फिर से दिखाई दिया जैसा कि होना चाहिए।

मैं इस तरह से शीर्षक सेट करता था:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

वह आईडी मेरे कोड में मौजूद नहीं है, लेकिन जाहिरा तौर पर एसी-पॉपअप और यूआई-डायलॉग-शीर्षक से jquery द्वारा बनाई गई है। एक कीचड़ की तरह। लेकिन जैसा कि मैंने कहा कि अब काम नहीं करता है, और मुझे इसके बजाय निम्नलिखित का उपयोग करना होगा:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

ऐसा करने के बाद, लापता बटन का मुद्दा बेहतर प्रतीत होता है, हालांकि मुझे यकीन नहीं है कि वे निश्चित रूप से संबंधित हैं।

Answer 16

Jquery-ui के बाद भी बूटस्ट्रैप लोड करना, मैं इसका उपयोग करने में सक्षम था:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}