सीएसएस को jQuery के डायलॉग बटन पर लागू करें

Question 1

इसलिए मेरे पास वर्तमान में दो बटन के साथ एक jQuery संवाद है: सहेजें और बंद करें। मैं नीचे दिए गए कोड का उपयोग करके संवाद बनाता हूं:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

हालाँकि, इस कोड का उपयोग करने पर दोनों बटन एक ही रंग के होते हैं। मैं अपने रद्द करें बटन को अपने सेव से अलग रंग का होना चाहूंगा। क्या jQuery विकल्पों में निर्मित कुछ का उपयोग करके ऐसा करने का एक तरीका है? मुझे प्रलेखन से बहुत मदद नहीं मिली।

ध्यान दें कि मेरे द्वारा बनाया जा रहा रद्द करें बटन एक पूर्व-परिभाषित प्रकार है, लेकिन 'सहेजें' मैं खुद को परिभाषित कर रहा हूं। सुनिश्चित नहीं हैं कि इस मुद्दे पर कोई असर पड़ेगा।

किसी भी सहायता की सराहना की जाएगी। धन्यवाद।

अद्यतन: आम सहमति थी कि यहाँ यात्रा करने के लिए दो सड़कें थीं:

HTML की तरह एक Firefox प्लगइन का उपयोग कर निरीक्षण फ़ायरबग , और सीएसएस वर्गों कि jQuery बटन को लागू कर रहा है ध्यान दें, और उन्हें अधिभावी पर एक चाकू ले। नोट: मेरे HTML में, दोनों ही बटनों का उपयोग एक ही सीएसएस कक्षाओं और किसी विशिष्ट आईडी का नहीं किया गया था, इसलिए यह विकल्प समाप्त हो गया।
उस बटन को पकड़ने के लिए खुले डायलॉग पर एक jQuery चयनकर्ता का उपयोग करें जो मैं चाहता था, और फिर उसमें सीएसएस वर्ग जोड़ें।

मैं दूसरे विकल्प के साथ गया, और jQuery खोज () विधि का उपयोग किया क्योंकि मुझे लगता है कि यह उपयोग करने से अधिक उपयुक्त है: पहला या: पहला-बच्चा b / c बटन जिसे मैं बदलना चाहता था जरूरी नहीं कि पहला बटन सूचीबद्ध था मार्कअप। खोज का उपयोग करके, मैं बस बटन का नाम निर्दिष्ट कर सकता हूं, और सीएसएस को इस तरह जोड़ सकता हूं। मेरे द्वारा समाप्त किया गया कोड नीचे है:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Question 2

मैं अपने जवाब को एक ऐसे ही सवाल पर दोहरा रहा हूं क्योंकि किसी ने भी यहां नहीं दिया है और यह बहुत साफ-सुथरा है।

वैकल्पिक buttonsसंपत्ति सिंटैक्स का उपयोग करें :

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

Question 3

आप अतिरिक्त स्टाइल लागू करने के लिए खुले ईवेंट हैंडलर का उपयोग कर सकते हैं:

 open: function(event) {
     $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
 }

Question 4

मुझे लगता है कि आप इसे संभाल सकते हैं दो तरीके हैं:

दो बटनों के बीच अंतर (वर्ग, आईडी, आदि में) होने पर फायरबग जैसी किसी चीज़ का उपयोग करके जांचें।
जैसे कुछ का उपयोग करें: पहला-बच्चा उदाहरण के लिए पहला बटन और शैली चुनें जो एक अलग है

जब मैं अपने एक डायलॉग के लिए फ़ायरबग के स्रोत को देखता हूं, तो यह कुछ इस तरह से होता है:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <button class="ui-state-default ui-corner-all ui-state-focus" type="button">Send</button>
    <button class="ui-state-default ui-corner-all" type="button">Cancel</button>
</div>

इसलिए मैं उदाहरण के लिए भेजें बटन को कुछ शैलियों को .ui-state-focus (शायद कुछ अतिरिक्त चयनकर्ताओं के साथ जोड़कर सुनिश्चित करता हूं कि मैं jquery की शैलियों को ओवरराइड करता हूं) को संबोधित कर सकता हूं ।

वैसे, आईओएस इस मामले में दूसरे विकल्प के लिए जाता है ताकि फ़ोकस में बदलाव होने पर समस्याओं से बचा जा सके ...

Question 5

आपको "class" के लिए "className" शब्द को बदलना चाहिए

buttons: [ 
    { 
        text: "Cancel",
        class: 'ui-state-default2', 
        click: function() { 
            $(this).dialog("close"); 
        } 
    }
],

Question 6

शायद ऐसा कुछ हो?

$('.ui-state-default:first').addClass('classForCancelButton');

Question 7

उस div को चुनें जिसमें रोल डायलॉग है फिर उसमें उपयुक्त बटन प्राप्त करें और CSS सेट करें।

$("div[role=dialog] button:contains('Save')").css("color", "green");
$("div[role=dialog] button:contains('Cancel')").css("color", "red");

Question 8

विशिष्ट शैलियों को परिभाषित करने के लिए एक सरल उत्तर भी है जो केवल उस विशिष्ट बटन पर लागू होने जा रहे हैं और संवाद की घोषणा करते समय आपके पास Jquery घोषित तत्व शैली हो सकती है:

id: "button-delete",
text: "Delete",
style: "display: none;",
click: function () {}

यह करने के बाद कि HTML क्या दिखाता है:

ऐसा करने से आप इसे सेट कर सकते हैं, लेकिन बाद में jquery का उपयोग करके इसे बदलना आसान नहीं है।

Question 9

क्यों न केवल उत्पन्न मार्कअप का निरीक्षण किया जाए, कक्षा को पसंद के बटन पर ध्यान दें और इसे स्वयं स्टाइल करें?

Question 10

मेरा सुझाव है कि आप HTML पर एक नज़र डालें जो कोड को बाहर निकालता है और देखता है कि क्या बटन के एक (या दोनों) विशिष्ट रूप से पहचानने का एक तरीका है (संभवतः आईडी या नाम के गुण), तो उस आइटम का चयन करने के लिए jQuery का उपयोग करें और एक को लागू करें css वर्ग को।

Question 11

यदि अभी भी नोटिंग आपके लिए काम कर रही है, तो अपनी पृष्ठ शैली शीट पर निम्नलिखित शैलियों को जोड़ें

.ui-widget-content .ui-state-default {
  border: 0px solid #d3d3d3;
  background: #00ACD6 50% 50% repeat-x;
  font-weight: normal;
  color: #fff;
}

यह संवाद बटन की पृष्ठभूमि का रंग बदल देगा।