JQuery Dialog dialog box Event Usage Example Analysis _jquery

This example describes the JQuery Dialog dialog box event usage. Share to everyone for your reference, specific as follows:

Dialog dialog Box Event

dialog box Application scenario

dialog boxes are the most common and practical features.

1 Static Prompt class dialog box , the contents of the dialog box is fixed
2 Dynamic Prompts Class dialog box , dialog box content is based on the event source changes
3 Mask Class dialog box , dialog box pop-up background dimmed and not optional

The dialog component with the jquery UI can easily achieve the above three effects

The main feature of the dialog component is that you can drag (draggable) to change the size (resizable).

The dialog dialog box is also very simple to use, and once you have selected an element, you can use ". Dialog ()" To make it a dialog box that modifies the behavior of the dialog box by passing various options property classes.

Usually a dialog box is a DIV element:

<div id= "Divtip" title= "custom title" >
  <p> pop-up layer </p>
</div>

The following statement generates a dialog box using the default Options property.

JQuery ("#divTip"). Dialog ();

After executing the above statement, the DIV element becomes a dialog box that can be dragged and stretched.

Of course, this is just the simplest application. The following is a complete example to quickly get started with the Dialog dialog box component.

Use the dialog control to implement three specific pop-up boxes.

One is the static pop-up layer, that is, the content of the pop-up layer is fixed.

One is the dynamic pop-up layer, where the content of the pop-up layer differs according to the trigger of the event.

Another is a common mask class pop-up layer, that is, after the pop-up layer display, the page except the pop-up layer of elements can not operate.

First look at the HTML fragment of several elements on the page.

<!-demo static prompts class pop-up layer-> <div class= "Ui-widget UI Widget-contentui-corner-all" style= "width:700px;padding:5px" >  

Elements that are displayed on the page of the element to trigger events that display the pop-up layer.

The HTML code for the pop-up layer is as follows:

<!-hint class pop-up layer->
<div id= "Divtip" title= "custom title" >
  <p> pop-up layer </p>
</div>
< !-Mask class pop-up layer-> <div id= "Diviframe" title= "
iFrame pop-up layer" style= "Text-align:center" >
  <iframesrc= "http ://www.hbcsdn.tk "width=" 480px "height=" 250px "frameborder=" 0 "></iframe>
</div>

The pop-up layer is a DIV element. is displayed or hidden as needed.

The HTML element is ready, followed by the dialog control that applies the jquery UI. First, in Initializedom, get the page element that you want to manipulate later.

Initializedom:function () {//Initialize DOM this
  . $spanShowTip =$ ("Span[id^=spanshowtip]");
  this. $spanShowDataTip =$ ("Span[id^=spanshowdatatip]");
  this. $btnShowIframe =$ ("#btnShowIframe");
  this. $divTip =$ ("#divTip");
  Tis. $divIframe =$ ("#divIframe");
}

More interested readers of jquery-related content can view this site: "jquery switching effects and tips summary", "jquery drag and drop effects and tips summary", "JQuery Extended Skills Summary", "jquery common Classic Effects summary", " jquery animation and special effects usage summary, "jquery selector usage Summary" and "jquery commonly used plug-in and usage summary"

I hope this article will help you with the jquery program design.