The importance of a good dialog

xiaoxiao2021-03-06  94

Objective of a good dialog Dave Massy

September 2000

Editor's note: DHTML DUDE has been very busy (we don't know what he has been doing, but we feel that the newborn baby may be busy), so this month's article is provided by passenger columnist DHTML DAVE, people are more often called him Dave Massy, ​​he is a project manager for the Internet Explorer development group.

As a guest column writer of this month, I want to talk about the dynamic HTML (DHTML) dialog and answer several common problems related to these dialogs. The dialog is a common feature of many applications; they usually either allow users to enter basic data, either issue something to take action to take action. Examples of dialogs include dialogs that appear when you select "Save ..." in the File menu. In this particular example, the dialog box allows the user to select a location where the file should be saved, and what is the name of the file. When using DHTML programming, you can use the dialog as part of your application, and you can use the HTML to specify the contents of the dialog.

As an interesting narrator and a lot of people don't understand, the dialog in Internet Explorer is built using DHTML, which helps the development group to prove the basic technology. For example, the "Find" dialog box in Internet Explorer (you can choose from "Edit" menu "Find (on the current page) ..." See) the appearance is designed as a traditional Windows dialog, it has gray Three-dimensional appearance of the unevenness. In fact, it is a DHTML dialog box that uses the HTML element to display the input field and buttons. In this particular case, we choose a Windows interface style because Internet Explorer is a Windows application. However, the HTML user interface can have a lot of flexibility on style, so you can make your dialog as a complete part of your DHTML application.

Which type of dialog should I use?

Before we enter how to create and use the DHTML dialog, I want to explain the two types of dialogs that programmers can use, namely: Mode and no mode.

The Mode dialog will get the fully focused application, and will not be interactively operated before the dialog closes. The "Save As" mentioned earlier is an example of this situation because the dialog must be turned off (either save the file, or by canceling the dialog), the user can perform other interactions with the application.

The Mode dialog box allows for some type of interaction with the application when the dialog box is displayed. An example of this situation is the "Find" dialog in Internet Explorer; the "Find" dialog box is displayed, you can scroll and view the contents of the document. Since both types of dialogs are useful in different cases, the DHTML dialog supported in Internet Explorer has been enhanced in version 5.0, joining support for the Mode dialog, which makes you select the most Suitable for your application dialog box type.

"Why should I use a new window to create a browser using Window.Open?" You may ask such a problem. Window.open methods and two forms of dialogs provide solutions to slightly different issues. Here are the difference between these three options, and some typical situations are given, which helps you choose the right solution.

WINDOW.OPEN Method: This method opens a new instance of the browser, usually loads a specific URL specified document. The specific named instance of the open window is possible, so you can avoid opening a new window, but using the existing window you have opened for another purpose. For more information, see the Open (English) method in Web Workshop. By opening another example of the browser, the user can switch freely in the open window. One of you can use Window.Open is an email application that allows users to open an email message in a further window while maintaining a full interaction with the message list in the original window. No mode dialog: Non-Mode dialog allows users to interact with the original window while dialogging. In this case, the dialog remains on top of the browser and is disabled. If the user removes other browsing from the original document, the Non-Mode dialog will be automatically turned off because all contexts of the dialog have been lost. Advanced search features can use such dialogs well in order to allow users to select text found in the document, while keeping the dialog opens, so that the user can quickly advance to the next instance of the text that has been found. There is a mode dialog: The Mode dialog is often made allows the user to fully focus on a particular dialog and requires interacting with them before proceeding. One example of this situation is that the data input operation is in this operation, and the application must continue after some data. Dialog Basics

Below is a simple example of a mode dialog, which consists of two files. The first file calls the dialog box when pressing a button; the second file contains the contents of the dialog.

Dialog1.htm:

This Page Will Invoke My DHTML DIALOG BOX WHEN THE button is click.


DContent1.htm:

This Is Some Content for My DHTML Dialog Box.



View the first example of the Mode dialog box.

Dialog1.htm file Execute the ShowModalDialog method when clicking the button and uses the second file DContent1.htm as the content of the dialog. DContent1.htm files have some HTML content and an OK button, turn off the dialog box when you click the button. Note how the dialog box appears with a status bar. It can be removed by operating the value of the optional SFEATURES parameter of the function. Try to change the value of each parameter, which can display different styles of the dialog. For example, you can change the method in Dialog1.htm call to remove the status bar and adjust the size of the dialog.

ShowModalDialog ('dcontent1.htm', '', 'status: no; resizable: yes'); Now, the method is changed from ShowModalDialog to ShowModelessDialog, and see how the Mode dialog allows users to interact with the document below the dialog. . You can view the full description of all dialog settings in the Web Workshop DHTML Reference (English) section.

Exchange information

Isn't this the content that the dialog is really involved? To make the dialog help, we need to pass information to it. Then, when the dialog is closed, we need to retrieve the information based on the dialog options you have chosen.

The second parameter of the ShowModalDialog method allows us to deliver information between the dialog. Below is a simple example of how it does this:

Dialog2.htm