Home >Web Front-end >JS Tutorial >[Message prompt component], compatible with IE6/7&&FF2_javascript skills

[Message prompt component], compatible with IE6/7&&FF2_javascript skills

WBOY
WBOYOriginal
2016-05-16 19:09:21956browse

Author: yemoo
Source: WWW.AJAXBBS.NET
Release date: 2007-09-03

Original address: http://www.ajaxbbs.net/blog/post/100/

Special note: This is just a js component used purely on the client side, non-server-side controls (such as asp.net controls, etc.). The component is only modified to beautify the message prompt.

PS: I hope everyone can provide more suggestions or opinions with practical value. If appropriate, I will continue to make improvements and modifications.
================================================== ====================
Some time ago, the company needed to write a small component to replace the default gray message component (alert/Confirm) of Windows 2000. Due to the company The system developed is mainly for IE browser, so the code at the beginning does not work under ff. I plan to share it today. In order to avoid bricks as much as possible, I spent nearly an hour making compatibility modifications to the code. It is currently running on ie6.0 It runs normally under FF2.0 and FF2.0. It has not been tested on other browsers. I am busy with corporate tasks and am too lazy to spend a lot of time on this. It just meets most needs.

Component introduction:

1. The calling method is repackaged. First, it is encapsulated into a class, and then the calling method is turned into several simple method calls. There is no need to use new when calling. The calling method is clear and simple.
2. Compatible with IE6.0&&FF2.0.
3. Currently, three and four skins are provided, Vista, QQ, ExtBlue and BlackColl. If you are interested, you can modify the style sheet file to define a new skin.
4. Provide four message types. They are message prompts, success information, error information, and query information.
5. When the message box pops up, block the operation of other elements of the page, automatically hide the page select and the select under the iframe (unlimited select hiding), and mask the iframe and other elements.
6. When the page select control state is restored, it remains in its original state, that is, if the original select was hidden, the select will remain hidden after the message box pops up and is closed, and only the originally displayed select will be displayed.
7. When the message component pops up, the operation of the keyboard's Tab key and space bar is blocked (preventing the keyboard from operating page elements). Pressing the Enter key is treated as clicking the "OK" button of the message component.


Usage introduction:
1. First introduce ymPrompt.js into the page.
2. Then call the required message function:
(1)Alert(content,width,height,title,okFunc,cancelFunc) //Message prompt type
(2)SucceedInfo(....) //Success message type
(3)ErrorInfo(...) //Error message type
(4)ConfirmInfo(....) //Query message type

Four methods The parameters are exactly the same:

content: the content to be displayed by the message component.
width: The width of the message box. If not set, please set it to null. The width will be adaptive.
Height: The height of the message box. If not set, please set it to null. The height is adaptive.
title: Message component title
okFunc: The name of the function executed when the OK button is clicked.
CancelFunc: The name of the function executed when the cancel or close button is clicked.

View the demo: http://www.ajaxbbs.net/test/ymPrompt/demo.htm
Note: Due to the speed of network space, the image loading may be slow when opening the demo for the first time, please open it later. The image is downloaded or the source code is downloaded locally to view the demo.
Please go here to download the source code: http://www.ajaxbbs.net/blog/post/100/

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn