jQuery-Dialogfeld, Beispiel für die Verwendung von Ereignissen im Dialogfeld „analysis_jquery“.

Das Beispiel in diesem Artikel beschreibt die Verwendung von jQuery-Dialogfeldereignissen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dialog-Dialogfeldereignis

Dialog-Anwendungsszenarien

Dialogfeld ist die am häufigsten verwendete und praktischste Funktion.

1) Statisches Eingabeaufforderungsdialogfeld, der Inhalt des Dialogfelds ist festgelegt
2) Dynamisches Eingabeaufforderungsdialogfeld, der Inhalt des Dialogfelds ändert sich entsprechend der Ereignisquelle
3) Maskendialogfeld: Wenn das Dialogfeld angezeigt wird, wird der Hintergrund grau und kann nicht ausgewählt werden

Sie können die oben genannten drei Effekte ganz einfach mit der Dialogkomponente der jQuery-Benutzeroberfläche erzielen

Die Hauptmerkmale der Dialogkomponente bestehen darin, dass sie gezogen (Draggable) und in der Größe geändert (Resizable) werden kann.

Die Verwendung des Dialogfelds „Dialogfeld“ ist ebenfalls sehr einfach. Nachdem Sie ein Element ausgewählt haben, können Sie „.dialog()“ für dieses Element verwenden, um es in ein Dialogfeld umzuwandeln, und jedes Element des Dialogfelds durch Übergeben ändern Verschiedene Optionsattributklassen.

Normalerweise ist ein Dialogfeld ein div-Element:

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

Die folgende Anweisung generiert ein Dialogfeld unter Verwendung des Standardoptionsattributs.

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

Nach der Ausführung der obigen Anweisung wird das div-Element zu einem ziehbaren und dehnbaren Dialogfeld.

Natürlich ist dies nur die einfachste Anwendung. Lassen Sie uns ein vollständiges Beispiel verwenden, um schnell mit der Dialogfeldkomponente zu beginnen.

Verwenden Sie die Dialogsteuerung, um drei spezifische Popup-Boxen zu implementieren.

Eine davon ist eine statische Popup-Ebene, das heißt, der Inhalt der Popup-Ebene ist festgelegt.

Eine davon ist die dynamische Popup-Ebene. Das heißt, der Inhalt der Popup-Ebene ändert sich entsprechend dem Auslöser des Ereignisses.

Die andere ist die allgemeine Masken-Popup-Ebene. Das heißt, nach der Anzeige der Popup-Ebene können andere Elemente auf der Seite als die Popup-Ebene nicht mehr bedient werden.

Schauen Sie sich zunächst die HTML-Schnipsel einiger Elemente auf der Seite an.

<!—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>

Das auf der Elementseite angezeigte Element wird verwendet, um das Ereignis der Anzeige der Popup-Ebene auszulösen.

Der HTML-Code der Popup-Ebene lautet wie folgt:

<!—提示类弹出层—>
<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>

Die Popup-Ebene ist ein div-Element. Es wird je nach Bedarf angezeigt oder ausgeblendet.

Nach der Vorbereitung der HTML-Elemente besteht der nächste Schritt darin, das Dialog-Steuerelement der jQuery-Benutzeroberfläche anzuwenden. Rufen Sie zunächst in initializeDom die Seitenelemente ab, die später bearbeitet werden müssen.

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

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der JQuery-Umschalteffekte und -Techniken“, „Zusammenfassung der jQuery-Drag-Effekte und -Techniken ", "Zusammenfassung der Fähigkeiten der JQuery-Erweiterung", "Zusammenfassung allgemeiner klassischer Spezialeffekte von jQuery", "Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten", " Zusammenfassung der Verwendung des jQuery-Selektors “ und „Zusammenfassung der allgemeinen jQuery-Plug-ins und Verwendung “

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.