Différences

Ci-dessous, les différences entre deux révisions de la page.

--- slam4:php:phalcon:jquery:bootstrap [2015/03/30 11:20] – [2.11- Modals] jcheron
+++ slam4:php:phalcon:jquery:bootstrap [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 470: / Ligne 470: @@
 |< 100% >|
 ^Classe |[[http://api.kobject.net/phalcon-jquery/class_ajax_1_1bootstrap_1_1html_1_1_html_splitbutton.html|HtmlSplitbutton]] |
-^Hérite
+^Hérite de |[[http://api.kobject.net/phalcon-jquery/class_ajax_1_1bootstrap_1_1html_1_1_html_dropdown.html|HtmlDropdown]] |
-de |[[http://api.kobject.net/phalcon-jquery/class_ajax_1_1bootstrap_1_1html_1_1_html_dropdown.html|HtmlDropdown]] |
 === Exemple ===
@@ Ligne 943: / Ligne 942: @@
 	}
 </sxh>
+La méthode **renderContent** charge une vue, mais ne change pas le contrôleur actif.\\
 La vue correspondante :
-<sxh html;title:views/modalForm>
+<sxh html;title:views/modalForm.volt>
 <form>
   <div class="form-group">
@@ Ligne 961: / Ligne 962: @@
 {{:slam4:php:phalcon:jquery:modalphpload.png?nolink|}}
-== En ajax (initié côté client) ==
+== -- En ajax (initié côté client) ==
 Ajout d'un bouton **Suivant** :
@@ Ligne 967: / Ligne 968: @@
   * Modifiant le titre du dialog
   * Masquant le bouton suivant
+{{:slam4:php:phalcon:jquery:modalajaxload0.png?nolink|}}
 <sxh php;title:app/controllers/IndexController.php;highlight:[7,8,9]>
@@ Ligne 977: / Ligne 980: @@
 		$bt=$modal->addButton("Suivant >>","success")->onClick($modal->jsGetContent($this->jquery, "exemple/modalForm2"));
 		$bt->onClick($modal->jsSetTitle("Contenu chargé en Ajax"));
-		$bt->onClick($modal->jsHideButton(1));
+		$bt->onClick($modal->jsHideButton("Suivant"));
 		$btn->onClick($modal->jsShow());
 		$this->jquery->compile($this->view);
@@ Ligne 992: / Ligne 995: @@
 La vue correspondante :
-<sxh html;title:views/modalForm2>
+<sxh html;title:views/modalForm2.volt>
 <form>
   <div class="form-group">
@@ Ligne 1008: / Ligne 1011: @@
 {{:slam4:php:phalcon:jquery:modalajaxload.png?nolink|}}
+=== -- Boutons des boîtes modales ===
+== -- Création ==
+<sxh php;title:app/controllers/IndexController.php>
+	public function modalAction(){
+		$bs=$this->jquery->bootstrap();
+		//Ajout de 2 boutons à l'instanciation
+		$modal=$bs->htmlModal("modal1","Titre du dialogue","Contenu",array("Ajouter","Retirer"));
+		//Ajout d'un bouton Annuler
+		$modal->addCancelButton("Fermer");
+		//Ajout d'un bouton Okay
+		$modal->addOkayButton("Valider");
+		//Ajout d'un bouton classique
+		$bt=$modal->addButton("Suivant >>","success")->onClick($modal->jsGetContent($this->jquery, "exemple/modalForm2"));
+		$this->jquery->compile($this->view);
+	}
+</sxh>
+**Boutons spécifiques :**
+  * Le bouton **Annuler** permet la fermeture du dialogue
+  * Le bouton **Okay** ne ferme le dialogue que si la condition javascript **validCondition** est vraie
+La condition par défaut est **$('#identifier').prop('valid')**, il est possible de la changer à tout moment :
+**Exemple :** Vérification de la présence d'un élément d'id #ck dans la page :
+<sxh php;gutter:false>
+	$modal->setValidCondition("$('#ck').length>0");
+</sxh>
+**Exemple :** en rendant la sortie automatiquement valide :
+<sxh php;gutter:false>
+	$modal->setValid();
+</sxh>
+== -- Accès aux boutons ==
+Il est possible d'accéder aux boutons déjà créés soit par leur **identifier** (attribut id du HTML), soit par leur **index** (à partir de 0 dans le tableau des boutons) :
+<sxh php;title:app/controllers/IndexController.php;highlight:[5,6,7,8]>
+	public function modalAction(){
+		$bs=$this->jquery->bootstrap();
+		//Ajout de 2 boutons à l'instanciation
+		$modal=$bs->htmlModal("modal1","Titre du dialogue",array("Ajouter","Retirer"));
+		//Accès au bouton par son nom (identifier = nom corrigé)
+		$modal->getButton("Ajouter")->setStyle("Success");
+		//Accès au bouton par son index
+		$modal->getButton(1)->setStyle("Warning");
+		$this->jquery->compile($this->view);
+	}
+</sxh>
+{{:slam4:php:phalcon:jquery:modalbuttons.png?nolink|}}