slam4:php:phalcon:jquery:bootstrap

Différences

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

Lien vers cette vue comparative

slam4:php:phalcon:jquery:bootstrap [2015/03/30 11:33] – [2.11- Modals] jcheronslam4:php:phalcon:jquery:bootstrap [2019/08/31 14:21] (Version actuelle) – modification externe 127.0.0.1
Ligne 470: Ligne 470:
 |< 100% >| |< 100% >|
 ^Classe |[[http://api.kobject.net/phalcon-jquery/class_ajax_1_1bootstrap_1_1html_1_1_html_splitbutton.html|HtmlSplitbutton]] | ^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 === === Exemple ===
Ligne 943: Ligne 942:
  }  }
 </sxh> </sxh>
 +
 +La méthode **renderContent** charge une vue, mais ne change pas le contrôleur actif.\\
  
 La vue correspondante : La vue correspondante :
  
-<sxh html;title:views/modalForm>+<sxh html;title:views/modalForm.volt>
 <form> <form>
   <div class="form-group">   <div class="form-group">
Ligne 961: Ligne 962:
 {{:slam4:php:phalcon:jquery:modalphpload.png?nolink|}} {{:slam4:php:phalcon:jquery:modalphpload.png?nolink|}}
  
-== En ajax (initié côté client) ==+== -- En ajax (initié côté client) ==
  
 Ajout d'un bouton **Suivant** : Ajout d'un bouton **Suivant** :
Ligne 979: Ligne 980:
  $bt=$modal->addButton("Suivant >>","success")->onClick($modal->jsGetContent($this->jquery, "exemple/modalForm2"));  $bt=$modal->addButton("Suivant >>","success")->onClick($modal->jsGetContent($this->jquery, "exemple/modalForm2"));
  $bt->onClick($modal->jsSetTitle("Contenu chargé en Ajax"));  $bt->onClick($modal->jsSetTitle("Contenu chargé en Ajax"));
- $bt->onClick($modal->jsHideButton(1));+ $bt->onClick($modal->jsHideButton("Suivant"));
  $btn->onClick($modal->jsShow());  $btn->onClick($modal->jsShow());
  $this->jquery->compile($this->view);  $this->jquery->compile($this->view);
Ligne 994: Ligne 995:
 La vue correspondante : La vue correspondante :
  
-<sxh html;title:views/modalForm2>+<sxh html;title:views/modalForm2.volt>
 <form> <form>
   <div class="form-group">   <div class="form-group">
Ligne 1010: Ligne 1011:
  
 {{:slam4:php:phalcon:jquery:modalajaxload.png?nolink|}} {{: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|}}
  • slam4/php/phalcon/jquery/bootstrap.1427708039.txt.gz
  • Dernière modification : il y a 6 ans
  • (modification externe)