2012-12-10 22 views
8

में बटन क्लास जोड़े नहीं गए हैं, मैंने अपने एप्लिकेशन में यूआई बूटस्ट्रैप विषय जोड़ा है और इसमें से अधिकांश बहुत अच्छी तरह से काम करते हैं, लेकिन मुझे लगता है कि मेरे UI संवाद बटन डेमो की तरह सही ढंग से प्रस्तुत करने के लिए प्रतीत नहीं होते हैं । ऐसा लगता है कि jQuery यूआई बटनों को कक्षाओं में नहीं जोड़ रहा है ताकि बटन स्टाइल हो जाए।jQuery क्लास बूटस्ट्रैप संवाद

Chrome डेवलपर का उपयोग करते हुए बटन के रूप में प्रस्तुत करना चाहिए:

<button type="button" 
    class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
    role="button" 
    aria-disabled="false"> 
     <span class="ui-button-text">Ok</span> 
</button> 

लेकिन जब मैं अपने संवाद बनाने के लिए:

$('#dialog').dialog({ 
    title: 'My Text', 
    close: function (event, ui) { 
     myfunction(); 
    }, 
    bgiframe: false, 
    width: 860, 
    height: 500, 
    resizable: true, 
    modal: true, 
    buttons: { 
     Cancel: function() { 
     $(this).dialog("close"); 
     } 
    } 
}); 

ui संवाद बटन के रूप में तो प्रस्तुत करना:

<button type="button">Cancel</button> 

नहीं कक्षाओं को जोड़ा जा रहा है और मुझे कुछ भी नहीं मिला जो मुझे बताता है अगर मुझे अन्य तरीकों को निष्पादित करने की आवश्यकता है या क्या सौदा है

धन्यवाद।

वी

संपादित करें: माफ करना मैं संस्करणों मैं उपयोग कर रहा हूँ संदर्भित करने के लिए भूल गया:

बूटस्ट्रैप: 2.2.2 jQuery: 1.8.3 jQuery यूआई: 1.9.2

+0

मुझे यकीन नहीं है कि यह संभव है या नहीं। क्या आपको JQuery संवाद का उपयोग करने की आवश्यकता है? इस लिंक को जांचें: http://forums.asp.net/t/1761495.aspx/1?can+we+use+jquery+ui+with+twitter+bootstrap+ –

+0

आपको यह भी उपयोगी मिल सकता है: http://addyosmani.github.com/jquery-ui-bootstrap/ –

+0

हां यह मैं उपयोग कर रहा हूं। यह शीर्षक और प्रश्न की पहली पंक्ति में उल्लेख किया गया है :-) –

उत्तर

17

ठीक है मैंने इसे स्वयं हल किया।

यह बस मेरी जावास्क्रिप्ट फ़ाइलों का क्रम था।

इससे पहले कि आप

jquery.ui लोड एक बार मैं ui द्वारा मूल रूप से लागू किया यह सब बटन कक्षाओं किया सही ढंग से दिखाई दिया bootstrap.js लोड करने के लिए सुनिश्चित करें।

योगदान करने के लिए सभी को धन्यवाद।

वी

+0

धन्यवाद बहुत अच्छा काम है लेकिन बूटस्ट्रैप टूलटिप jquery ui टूलटिप –

+0

में बदल गया है हाँ यह 2012 –

+1

से है, तीन साल बाद आपने मेरी सुबह का क्रोध – Faber75

0

आपको इसे अपने जेएस/एचटीएमएल फ़ाइल $ ('बटन') में जोड़ने की आवश्यकता हो सकती है। बटन(); ताकि प्रत्येक बटन को आपकी थीम के अनुसार प्रस्तुत किया जाना चाहिए।

+0

धन्यवाद। मैंने पहले से ही कोशिश की थी। बिल्कुल कोई प्रभाव नहीं। –

13

इसका कारण यह है बूटस्ट्रैप के बटन() jQuery के यूआई के बटन() समारोह के साथ समारोह विरोध करता है। अधिक जानकारी के लिए इस बग देखें: https://github.com/twitter/bootstrap/issues/6094

आप लोड करने के लिए bootstrap.js jQueryUI के बाद, तो आप इस का उपयोग कर सकते रास्ते से बाहर बूटस्ट्रैप के बटन() फ़ंक्शन ले जाना चाहते हैं:

var btn = $.fn.button.noConflict(); // reverts $.fn.button to jqueryui btn 
$.fn.btn = btn; // assigns bootstrap button functionality to $.fn.btn 

वैकल्पिक रूप से, आप कर सकते हैं jqueryui संवाद के बजाय बूटस्ट्रैप मोडल का प्रयोग करें।

+1

मैं इतनी उलझन में था कि क्यों मेरे jQuery यूआई बटन थोड़ी देर के लिए अलग दिखते थे ... इसके लिए धन्यवाद! मुझे केवल अस्थायी रूप से इसकी आवश्यकता है जब तक कि मैं अपने आवेदन में jQuery UI निर्भरता को हटा नहीं सकता और बूटस्ट्रैप पर पूरी तरह से स्विच कर सकता हूं! –

+1

धन्यवाद ग्रेड काम –

+0

बूटस्ट्रैप.जेएस और काम के बाद जोड़ा गया –

संबंधित मुद्दे