Exemple d'utilisation d'événement de boîte de dialogue jQuery Dialog Analysis_jquery

L'exemple de cet article décrit l'utilisation des événements de la boîte de dialogue jQuery Dialog. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Événement de boîte de dialogue de dialogue

Scénarios d'application de dialogue

La boîte de dialogue est la fonction la plus couramment utilisée et la plus pratique.

1) Boîte de dialogue d'invite statique, le contenu de la boîte de dialogue est corrigé
2) Boîte de dialogue d'invite dynamique, le contenu de la boîte de dialogue change en fonction de la source de l'événement
3) Boîte de dialogue Masque, lorsque la boîte de dialogue apparaît, l'arrière-plan devient gris et n'est pas sélectionnable

Vous pouvez facilement obtenir les trois effets ci-dessus en utilisant le composant Dialog de jQuery UI

Les principales caractéristiques du composant Dialog sont qu'il peut être glissé (Draggable) et redimensionné (Resizing).

L'utilisation de la boîte de dialogue Dialogue est également très simple. Après avoir sélectionné un élément, vous pouvez utiliser ".dialog()" sur cet élément pour le transformer en boîte de dialogue, et modifier chaque élément de la boîte de dialogue en passant. diverses options attribuent des classes à un type de comportement.

Habituellement, une boîte de dialogue est un élément div :

<div id="divTip" title="自定义标题">
  <p>弹出层</p>
</div>

L'instruction suivante générera une boîte de dialogue en utilisant l'attribut options par défaut.

jQuery("#divTip").dialog();

Après avoir exécuté l'instruction ci-dessus, l'élément div devient une boîte de dialogue déplaçable et extensible.

Bien sûr, ce n'est que l'application la plus simple. Utilisons un exemple complet pour démarrer rapidement avec le composant de boîte de dialogue.

Utilisez le contrôle Dialog pour implémenter trois boîtes contextuelles spécifiques.

L'un est un calque contextuel statique, c'est-à-dire que le contenu du calque contextuel est fixe.

L'une est la couche contextuelle dynamique, c'est-à-dire que le contenu de la couche contextuelle change en fonction du déclencheur de l'événement.

L'autre est le calque contextuel de masque commun, c'est-à-dire qu'une fois le calque contextuel affiché, les éléments de la page autres que le calque contextuel ne peuvent pas être utilisés.

Jetez d’abord un œil aux extraits HTML de quelques éléments de la page.

<!—Demo 静态提示类弹出层—>
<div class="ui-widget ui widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>Demo.共享同一个静态弹出层，弹出层内容固定：</h3>
  <div>
   <spanid="spanShowTip1">显示提示</span>  <span id="spanShowTip2">显示提示</span>  
   <spanid="spanShowTip3">显示提示</span>   <span id="spanShowTip4">显示提示</span>  
  </div>
  <br/>
  <br/>
<!—Demo动态显示类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px; padding:5px">
  <h3>Demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：</h3>
  <div>
   <spanid="spanShowDataTip1" data="颜色是红色">红色</span>     
<span id="spanShowDataTip2" data="颜色是绿色">绿色</span>    
</div>
</div>
<br />
<br />
<!—Demo.遮罩类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>Demo.弹出IFrame</h3>
  <div>
   <inputtype="button" id="bunShowIframe" name=" bunShowIframe" value="显示弹出层" />
  </div>
</div>

L'élément affiché sur la page de l'élément est utilisé pour déclencher l'événement d'affichage du calque popup.

Le code html de la couche pop-up est le suivant :

<!—提示类弹出层—>
<div id="divTip" title="自定义标题">
  <p>弹出层</p>
</div>
<!—遮罩类弹出层—>
<div id="divIframe" title="iFrame 弹出层" style="text-align:center">
  <iframesrc="http://www.hbcsdn.tk" width="480px"height="250px" frameborder="0"></iframe>
</div>

Le calque contextuel est un élément div. Il sera affiché ou masqué selon les besoins.

Après avoir préparé les éléments HTML, l'étape suivante consiste à appliquer le contrôle Dialog de jQuery UI. Tout d’abord, dans initializeDom, récupérez les éléments de page qui doivent être manipulés ultérieurement.

initializeDom:function(){//初始化DOM
  this.$spanShowTip=$("span[id^=spanShowTip]");
  this.$spanShowDataTip=$("span[id^=spanShowDataTip]");
  this.$btnShowIframe=$("#btnShowIframe");
  this.$divTip=$("#divTip");
  tis.$divIframe=$("#divIframe");
}

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets et techniques de commutation JQuery", "Résumé des effets et techniques de glisser jQuery ", "Résumé des compétences de l'extension JQuery", "Résumé des effets spéciaux classiques communs de jQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", " Résumé de l'utilisation du sélecteur jquery " et "Résumé des plug-ins courants et de leur utilisation jQuery "

J'espère que cet article sera utile à tous ceux qui programment jQuery.