Implementation of a new borderless window

Source: Internet
Author: User
Tags border color comments
A borderless window (CW) without borders, menu bar, toolbar, address bar, and status bar was once very popular and used by many websites, especially personal websites, CW also has ready-made source code for netizens to use, but it was inconvenient to use CW initially. There are two JS files and some parameters to be set, which is very difficult for beginners. So I came up with an idea: re-write a new borderless window and use only one function for convenience.

I name this brand new borderless Window as NBW, which is short for No Border Window. I just want to distinguish it from CW. This borderless window can be dragged, minimized, closed, and so on, not only in IE5/IE6, but also in Tencent's TE test.

First, let's take a look at the actual results:
The call process is as follows: (the noBorderWin function is defined in advance, and the implementation process of the function will be analyzed later)

NoBorderWin (fileName, w, h, titleBg, moveBg, titleColor, titleWord, scr)

The parameters are described as follows:
FileName: the file to be opened.
W: the window width (px ).
H: the height of the window (px ).
TitleBg: background color and border color of the window title bar.
MoveBg: specifies the background color and border color of the title bar when you drag a window.
TitleColor: the color of the text in the "Title bar" of the window.
TitleWord: text displayed in the "Title bar" of the window.
Scr: whether a scroll bar appears in the window. Value: yes/no or 1/0.

We can see that all the window styles are set in the function parameters to ensure convenient use. For example, the code in the above example is as follows:
<A href = http: // htmldata/2005-03-19/1111163004. html # none onclick0000noborderwin('test.html ', '000000', '000000',' # 000000', '# 000000',' # cccccccc', 'Test example of an infinite window ', 'Yes');> Click here to bring up the NBW window </a>

How can we use this function? Next, we will explain the source code directly and annotate it. To make it easy to differentiate reading, the code section is gray and the comments section is red.

The code and comments are as follows:
//--------------------------------------------------------
<Script language = javascript>
// ***** Customize the path of several images used in the NBW window *****
Minimizebar = "minimize.gif ";// Minimize the "button" image in the upper-right corner of the window
Minimizebar2 = "minimize2.gif ";// Minimize the "button" image when hovering
Closebar = "close.gif ";// Close the "button" image in the upper-right corner of the window
Closebar2 = "close2.gif ";// Close the "button" image when hovering
Icon = "icon.gif ";// Small icon in the upper left corner of the window
*****************

// ******* Start to define the noBorderWin () function ********
Function noBorderWin (fileName, w, h, titleBg, moveBg, titleColor, titleWord, scr)
{
Var contents = "// The variable contents is a string variable, which is all the code in the NBW window.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.