jQuery यूआई संवाद बटन पोजिशनिंग

Question

मैं एक दूसरे से अलग से jQuery यूआई से बटन कैसे रख सकता हूं। बटन एक ही दिशा में गठबंधन कर रहे हैं। मैं एक बटन को बाएं से गठबंधन करना चाहता हूं जबकि दूसरी दाईं ओर। क्या यह संभव है?

Answer 1

ठीक है, Firebug के माध्यम से इस पर देख रहे हैं ...

संवाद नियंत्रण ताकि आप उस के लिए खोज सकते हैं, एक वर्ग ui-dialog-buttonpane कहा जाता है के साथ एक div पैदा करते हैं।

यदि आप एकाधिक बटन से निपट रहे हैं, तो आप शायद :first और :last विशेषताएँ चाहेंगे।

तो, $(".ui-dialog-buttonpane button:first) आपको पहला बटन प्राप्त करना चाहिए। और $(".ui-dialog-buttonpane button:last) आपको अंतिम बटन प्राप्त करना चाहिए।

वहां से आप प्रत्येक बटन को दाएं और बाएं (फ्लोट मान संशोधित करें) रखने के लिए सीएसएस/शैली को संशोधित कर सकते हैं।

वैसे भी, मैं इस तरह से इस तरह से संपर्क करूंगा।

Answer 2

आप अपनी स्टाइल को स्थानीयकृत करने के लिए अपने संवाद (http://docs.jquery.com/UI/Dialog#option-dialogClass) में कक्षा भी जोड़ सकते हैं।

Answer 3

मुझे एक ही समस्या मिली लेकिन मुझे आसान समाधान मिला कि जब हम परिभाषा jquery ui संवाद फ़ॉर्म बनाते हैं तो हम बटन के ऑर्डर को ठीक या बंद कर देते हैं।

Answer 4

का चयन करने के बाद, की कोशिश:
.prependTo(".ui-dialog-buttonpane");

Answer 5

इस तरह है कि मैं परिणाम को पूरा करने में सक्षम था है।

$('#dialog-UserDetail').dialog({ 
      autoOpen: false, 
      height: 318, 
      width: 531, 
      modal: true, 
      resize: false, 
      buttons: { 
       DelUser:{ 
        class: 'leftButton', 
        text: 'Delete User', 
        click : function(){ 
         alert('delete here'); 
        } 
       }, 
       "Update User": function() { 
         alert('update here'); 
      }, 
       Close: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

फिर शैलियों में जोड़ें! महत्वपूर्ण ध्वज, जिसकी आवश्यकता है क्योंकि कक्षा पहले आती है और jquery द्वारा ओवरराइट की जाती है।

<style> 
    .leftButton 
    { 
     margin-right: 170px !important; 
    } 
</style> 

Answer 6

मैंने पाया .ui-संवाद-buttonset वैसे भी कोई चौड़ाई के साथ नीचे गिर इसलिए स्थिति के लिए तल में दो bottons बाएँ और दाएँ कोने इस तरह सिर्फ सीएसएस कहा:

.ui-dialog-buttonset {width:100%} 
.ui-dialog-buttonset .ui-button:last-child {float:right !important;} 

पहली पंक्ति बटन सेट कंटेनर 100% चौड़ा बनाओ, दूसरा दाईं ओर पाए गए अंतिम बटन को धक्का देता है।

Answer 7

आपको पहले अपने मॉडल घोषणा में jQuery-ui.css में 100% तक .ui-संवाद-buttonset की चौड़ाई बदलने के लिए

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { width: 100%;} 

तो बटन के लिए, होगा, आप कुछ तरह स्पष्ट कर सकता है नीचे:

buttons: [ 
     { 
      text: "Close", 
      open: function(){ 
         $(this).css('float','left');}, 
        } 
     } 
      ] 

Answer 8

$('#dialog-UserDetail').dialog({ 
      autoOpen: false, 
      height: 318, 
      width: 531, 
      modal: true, 
      resize: false, 
      buttons: { 
       DelUser:{ 
        text : 'Delete User', 
        click : function(){ 
         alert('delete here'); 
        } 
       }, 
       space: { 
        text : '', 
        id : 'space', 
        width : '(the distance you want!)', 
       }, 
       "Update User": function() { 
         alert('update here'); 
      }, 
       Close: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
$("#space").visibility("hidden"); 

Answer 9

मैं निम्नलिखित समाधान के साथ समापन (कुक द्वारा उत्तर के आधार पर)।- कोई जावास्क्रिप्ट

एक निश्चित चौड़ाई (बटन हमेशा बाएं किनारे पर संरेखित होगा संवाद पर स्थापित करने के लिए कोई ज़रूरत नहीं

• शुद्ध HTML/CSS: यह एक (मेरे लिए) अन्य उत्तर से अधिक लाभ की संख्या है , संवाद उपयोगकर्ता आकार बदलता है, भले ही)
• सीएसएस

एचटीएमएल मैं प्रयोग किया जाता में महत्वपूर्ण ध्वज के लिए कोई ज़रूरत नहीं (थोड़ा कुक द्वारा जवाब से संशोधित):

$('#dialog-UserDetail').dialog({ 
     autoOpen: false, 
     width: 'auto', 
     modal: true, 
     buttons: { 
      DelUser:{ 
       class: 'leftButton', 
       text: 'Delete User', 
       click : function(){ 
        alert('delete here'); 
       } 
      }, 
      "Update User": function() { 
        alert('update here'); 
     }, 
      Close: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 

नतीजा यह है कि "leftButton" बटन हमेशा संवाद के बाएँ किनारे बंद 8px पर तय हो गई है, जबकि अन्य बटन सही रूप से उचित हैं

.leftButton 
{ 
    position: absolute; 
    left:8px; 
} 

:

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

Answer 10

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { 
    float: none !important; 
    text-align:right; 
} 

.ui-button-left { 
    float: left; 
} 

यह डिफ़ॉल्ट बटन को प्रभावित नहीं करता है, वे दाईं ओर दिखाई देंगे। साथ ही, आप बाईं ओर के कई बटन रख सकते हैं क्योंकि आप प्रत्येक बटन के लिए विशेष स्वरूपण के बिना चाहते हैं। बाएं बटन की कक्षा सेट करने के लिए, ऐसा करने के कई तरीके हैं।

संवाद परिभाषा के भाग के रूप:

$("#mydialog").dialog(
    {buttons: [ 
     {"class": "ui-button-left", "text": "Delete"}, 
     {"text": "Cancel"}, 
     {"text": "Save"} 
    ]}); 

या आप कुछ इस तरह कर सकते हैं:

$("#mydialog").dialog(
    {buttons: [ 
     {"id": "myDeleteButton", "text": "Delete"}, 
     {"text": "Cancel"}, 
     {"text": "Save"} 
    ]}); 

और बाद में शैली चल छोड़ दिया के रूप में 'myDeleteButton' ऑब्जेक्ट के लिए सीएसएस। यदि आप संवाद को पुनर्निर्माण किए बिना बटन को दिखाना या छिपाना चाहते हैं तो बटन आईडी सेट करना सहायक हो सकता है।

क्रोम, सफारी, एफएफ, IE11 में परीक्षण किया गया, jQuery यूआई 1.10

Answer 11

ठीक है, @The कुक के जवाब के रूप में, आप किसी अन्य के द्वारा शैली tag.Think में इस सीएसएस बदलने के लिए, way.you बटन के भीतर शैली जोड़ सकते हैं कर सकते हैं अब सीएसएस की जरूरत नहीं है। शुभकामनाएँ।

     "Ok":{         
          style:"margin-right:640px",         
          click: function() { 
           //Your Code 
          } 
         },