Comment activer un bouton de dialogue jquery ui dans une case à cocher?

Question

Donc, je suis nouveau à Jquery et Jquery UI. J'ai ma boîte de dialogue qui fonctionne mais une chose que je cherche est de savoir comment changer l'un des boutons dans la boîte de dialogue dans une case à cocher.

Mon scénario: Un utilisateur affichera des informations, comme des nouvelles et autres. Mais je veux leur donner la possibilité de ne pas le publier pour le moment. Un brouillon, si vous voulez. Donc, la case à cocher serait juste à côté du bouton "ok" et "cancel".

J'ai essayé de créer un tableau avant la fonction de dialogue et de le placer là mais je n'arrive pas à trouver un moyen de déclarer un bouton comme une case à cocher.

Merci d'avance pour votre aide,

Edit: Voici un code que je l'ai essayé. Mon problème est maintenant que j'essaye de styliser le volet de bouton, il disparaît.

var dialog = $('<div title="Create News Post">' + 
        '<form method="POST" action="index.php?controller=posts&action=add">' + 
         '<div id="tabs" class="form">' + 
          '<ul>' + 
           '<li><a href="#tabs-1">English</a></li>' + 
           '<li><a href="#tabs-2">French</a></li>' + 
          '</ul>' + 
          '<div id="tabs-1">' + 
           '<label class="first">' + 
            '<span>English Title:</span>' + 
            '<input type="text" name="en_title" />' + 
           '</label>' + 
           '<label>' + 
            '<span>English Text:</span>' + 
            '<textarea name="en_text">' + 
            '</textarea>' + 
           '</label>' + 
          '</div>' + 
          '<div id="tabs-2">' + 
           '<label class="first">' + 
            '<span>French Title:</span>' + 
            '<input type="text" name="fr_title" />' + 
           '</label>' + 
           '<label>' + 
            '<span>French Text:</span>' + 
            '<textarea name="fr_text">' + 
            '</textarea>' + 
           '</label>' + 
          '</div>' + 
         '</div>' + 
         '<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">' + 
          '<div class="ui-dialog-buttonset">' + 
           '<input type="checkbox" id="isDraft" /><label for="isDraft">Publish?</label>' + 
           '<button id="btnSave" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' + 
            '<span class="ui-button-text">Save</span>' + 
           '</button>' + 
           '<button id="btnCancel" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">' + 
            '<span class="ui-button-text">Cancel</span>' + 
           '</button>' + 
          '</div>' + 
         '</div>' + 
        '</form>' + 
       '</div>' 
      ) 
      .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600}); 

Answer 1

1) Vous pouvez ajouter les boutons et case à cocher dans le code HTML qui crée la boîte de dialogue et non la propriété de dialogue d'utilisation qui génère des boutons pour vous. Une fois que vous créez la boîte de dialogue vous pouvez définir les gestionnaires en utilisant l'objet de dialogue dans le sélecteur:

dialog = $('<div>' + 
      '...' + 
      '<input type="submit" id="btnCancel" value="Ok" />' + 
      '<button id="btnCancel">Cancel</button>' + 
      '<input type="checkbox" id="chkIsDraft" name="chkIsDraft" value="Is Draft" />' + 
      '</div>') 
      .dialog(autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false}); 

$('#btnCancel', dialog).click(function(){ 
//... 
}); 

dialog.dialog('open'); 

EDIT: Sans lecture de code jQuery UI, il semble qu'un div avec un attribut class comme « ui-dialog- buttonpane 'sera supprimé du dialogue html. Donc, si vous choisissez cette approche , vous devez éviter de réutiliser les classes de dialogue de l'interface utilisateur jQuery.

2) Autre approche pourrait être ajouter un troisième bouton en utilisant la propriété de dialogue et remplacer le troisième bouton html pour votre case à cocher:

//Again use the dialog object as the scope for the selector. 
$('.ui-dialog-buttonpane button:eq(1)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>'); 

EDIT: L'objet retourné par dialogue correctement fait référence à la Élément DOM en utilisant dans la création du dialogue au lieu de toutes les machines pour faire fonctionner le dialogue. C'est de cette façon que vous devrez utiliser dialog.parent() comme champ d'application du sélecteur ci-dessus.

3) Une troisième option: utiliser un bouton régulier qui fournit le même cocher/décocher sémantique une case à cocher (je veux dire visuellement, ouvrer certains CSS), lorsque ce bouton est cliqué assurez-vous juste un champ caché dans le Le balisage de boîte de dialogue (Im pensant dans un formulaire que vous publierez après avoir appuyé sur OK) est mis à jour pour refléter l'état de vérification.

$("<div>...</div>").dialog({ 
    modal: true /.. 
    }, 
    buttons: { 
     //... 
     'IsDraft': function() { 
      $(this).toggleClass('checked') 
      $("input[name='is_draft']",$(this).parent('form')).val($(this).hasClass('checked')); 
     } 
    } 
}); 

EXEMPLE (BASE DANS VOTRE CODE):

var dialog = $('<div title="Create News Post">' + 
        '<form method="POST" action="index.php?controller=posts&action=add">' + 
         '<div id="tabs" class="form">' + 
          '<ul>' + 
           '<li><a href="#tabs-1">English</a></li>' + 
           '<li><a href="#tabs-2">French</a></li>' + 
          '</ul>' + 
          '<div id="tabs-1">' + 
           '<label class="first">' + 
            '<span>English Title:</span>' + 
            '<input type="text" name="en_title" />' + 
           '</label>' + 
           '<label>' + 
            '<span>English Text:</span>' + 
            '<textarea name="en_text">' + 
            '</textarea>' + 
           '</label>' + 
          '</div>' + 
          '<div id="tabs-2">' + 
           '<label class="first">' + 
            '<span>French Title:</span>' + 
            '<input type="text" name="fr_title" />' + 
           '</label>' + 
           '<label>' + 
            '<span>French Text:</span>' + 
            '<textarea name="fr_text">' + 
            '</textarea>' + 
           '</label>' + 
          '</div>' + 
         '</div>' + 
        '</form>' + 
       '</div>' 
      ) 
      .dialog({autoOpen: false,closeOnEscape: true,draggable:false,modal:true,resizable: false,width: 600,height:400, 
       buttons: { 
        IsDraft: function(){alert('draft');}, 
        Save: function(){alert('saving');}, 
        Cancel: function(){alert('cancel');} 
       } 
      }); 
     //lets do a replacement to get a checkbox in the button pane.  
     $('.ui-dialog-buttonset button:eq(0)',dialog.parent()).replaceWith('<input type="checkbox" id="chkIsDraft" name="chkIsDraft">Is Draft</input>'); 
     dialog.dialog('open'); 

Answer 2

Peut-être que ça vous aidera: regarder le JQuery UI button. Cela peut fonctionner comme une case à cocher. Vous pouvez créer un bouton séparé dans la boîte de dialogue pour vos besoins.