jQuery-UI: Classe de suppression de boîte de dialogue

Question

J'ai une boîte de dialogue, créée avec le code javascript et le code HTML généré ci-dessous. Je voudrais supprimer la classe "ui-button-text-only" pour les boutons et pour le conteneur ajouter "style = font-size: 0.9em;"

Pourriez-vous m'aider?

Merci,

HTML:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> 
     <span class="ui-button-text">Save</span> 
    </button> 
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> 
     <span class="ui-button-text">Cancel</span> 
    </button> 
    <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"> 
     <span class="ui-button-text">Delete</span> 
    </button> 
</div> 

Javascript:

<div id="dialogProduct" title="MyTitle"></div> 
<script type="text/javascript"> 
function CreateDialogProduct() { 
    $("#dialogProduct").dialog({ 
     bgiframe: true, autoOpen: false, minHeight: 350, maxHeight: 450, height: 350, 
     minWidth: 450, maxWidth: 550, width: 450, 
     modal: true, 
     buttons: { 
      Save: function() { 
       $.ajax({ 
        type: "POST", 
        url: "/Product/SaveOrUpdate", 
        data: {...}, 
        success: function(data) {...}, 
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
        } 
       }) 
      }, 
      Cancel: function() {...}, 
      Delete: function() { 
       $.ajax({ 
        type: "POST", 
        url: "/Product/Delete", 
        data: {...}, 
        success: function(data) {}, 
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
        } 
       }) 
      } 
     }, 
     beforeclose: function(event, ui) { 
     } 
    }); 
}  
jQuery(document).ready(function() { 
    CreateDialogProduct(); 
}); 
</script> 

Answer 1

$('button').removeClass("ui-button-text-only"); 
$('button:parent').css('font-size', '0.9em'); 

//or if you want to do it in a single line: 
$('button').removeClass("ui-button-text-only").parent().css('font-size', '0.9em'); 

---

Répondre au commentaire: Si vous avez une classe CSS comme:

.small{ 
    font-size:0.9em; 
} 

dans un fichier CSS inclus, vous pouvez effectuer les opérations suivantes à la place:

$('button').removeClass("ui-button-text-only").parent().addClass('small');