How to use JavaScript to create a powerful Gui

Most computer users are very familiar with Windows's graphical user interface (GUI). They use word or Microsoft's email client software to understand buttons, tool bars, and labels, however, the interface is almost the same as that of the client software. We can find that the interfaces of each website are different. Users need to learn how to use every Internet application. Although most Internet applications are not too complex, a user needs to constantly learn the application interface and always feels like a newbie, after all, it is not a pleasant task.

By using JavaScript and CSS to establish standardized client interface components for Internet applications or websites, users can see at a glance what they can do and how to complete their tasks. Users will have more confidence in their operations and will not be prone to misoperations.

Maybe you still don't know how JavaScript works, or you have seen the toolbar on other websites, but you don't know how it works. In this article, we will discuss how to create a simple and formatted toolbar (just like in Word) that can be added to any website <Textarea> area for feedback. The skills described in this article require you to have knowledge of HTML, CSS, and JavaScript.

Some shortcomings

The following code uses the createRange () method of the selection object. Unfortunately, only ie4 + users on Windows platforms can use the selection object, similar functions can be implemented through the Document Object Model (DOM), but the document. createRange () may cause problems, mainly because text data cannot be processed in the input or textarea element. If this bug is fixed, the following code can be run on Mozilla, Netscape 6 +, or any other browser platform running gecko.

Create a simple Toolbar

First, create a simple toolbar with three buttons: a bold button, an italic button, and a connection button. This toolbar is a good way to add a function to an existing text field. It allows you to easily control the input text without having to understand HTML. Any website that allows users to participate in or provide feedback can use this tool bar for enhancement.

The toolbar can be divided into the following four parts:

· Encapsulate the HTML-tagged JavaScript Functions of selected text attachments

· Customize the appearance and style of the toolbar and buttons

· JavaScript Functions that respond to mouse events

· HTML containing toolbar code, images, and Table Elements

First, let's look at two functions that process HTML code inserted into <textarea>:

Use JavaScript to process text sets

Function format_sel (v ){ VaR STR = Document. selection. createRange (). text; Document. my_form.my_textarea.focus (); VaR sel = Document. selection. createRange (); Sel. Text = "<" + V + ">" + STR + "<" + V + "> "; Return; }

Format_sel () only accepts one parameter, indicating the HTML-tagged string that acts on the selected text. In this toolbar, we use this function to control the text between <B> and <I>. Of course, if you want to, you can use <strong> and <em> to replace <B> and <I>, or use this function to control a piece of selected text, you can also restrict the specified text in the selected tag.

We can use the createRange () method of the selection object to conveniently create the textrange object of the current text. By accessing the text attribute, we can get the selected text in <textarea>. The text attribute is assigned to a local variable. In the next line, we call focus () For <textarea>. This line of code is very important. Otherwise, changes to the text may be written to other parts of the webpage. Finally, we created another reference of the specified text and assigned it a new value: the original selection address in the appropriate HTML Tag.

Function insert_link (){ VaR STR = Document. selection. createRange (). text; Document. my_form.my_textarea.focus (); VaR my_link = prompt ("Enter URL:", "http ://"); If (my_link! = NULL ){ VaR sel = Document. selection. createRange (); Sel. Text = "<a href =/" "+ my_link +"/">" + STR + "</a> "; } Return; }

The second function, insert_link (), is the same as format_sel (). With prompt (), users can enter a hypertext link value. With the results of prompt (), we can combine the selected text and code to create a connection. With these functions, we can create all types of interfaces for users. Here is an example.

Use System colors in CSS

The simplest way to use the above functions on a website is to call these functions in the onclick event handler of the "bold", "italic", and "Link" buttons, but this is not irritating. Because we have used the selection object and limited ourselves to the IE/win platform, we should make full use of the features of IE and use the user-defined system color in CSS, create dynamic buttons as we see in other software. Next, let's take a look at the style sheet that defines the statuses of the toolbar, button, raise, and press buttons.

# Toolbar { Margin: 0; Padding: 0; Width: 262px; Background: buttonface; Border-top: 1px solid buttonhighlight; Border-left: 1px solid buttonhighlight; Border-bottom: 1px solid buttonshadow; Border-Right: 1px solid buttonshadow; Text-align: right; } . Button { Background: buttonface; Border: 1px solid buttonface; Margin: 1; } . Raised { Border-top: 1px solid buttonhighlight; Border-left: 1px solid buttonhighlight; Border-bottom: 1px solid buttonshadow; Border-Right: 1px solid buttonshadow; Background: buttonface; Margin: 1; } . Pressed { Border-top: 1px solid buttonshadow; Border-left: 1px solid buttonshadow; Border-bottom: 1px solid buttonhighlight; Border-Right: 1px solid buttonhighlight; Background: buttonface; Margin: 1; }

Readers may have noticed that three system color references are used in the style sheet: buttonface, buttonshadow, and buttonhighlight. By using buttonface as the background color of the toolbar and button, we can use the user to get the same interface appearance as other applications. Use the buttonshadow and buttonhighlight colors to create borders. By writing simple JavaScript Functions, the buttons can have 3D effects. Of course, if you want to make the GUI more match the website rather than the user's browser, you can change the appropriate color.

The four functions under JavaScript that can change the button style are used by the event handler to change the Class Name of the mouse event image. Although JavaScript code can be written as embedded, we can organize them into a function to facilitate other functions to be added later.

Function Mouseover (EL ){ El. classname = "Raised "; } Function mouseout (EL ){ El. classname = "button "; } Function mousedown (EL ){ El. classname = "pressed "; } Function mouseup (EL ){ El. classname = "Raised "; }

Integrate with HTML

The rest of the work is to combine these functions with HTML code that contains the toolbar, images, and text fields:

A Div contains an image of three buttons, which makes the code concise. In the event handler marked by , we pass a reference to the Formatting Function to the element that will change the style, according to the expected format (B Indicates bold, I indicates italics). We pass an appropriate parameter to the format_sel () function.

Conclusion

Of course, this is only one way to create a toolbar. There are many other ways to create a toolbar. The toolbar functions created by the reader do not have to be limited to the functions involved in this article. By using W3C Dom, you can easily change the style of a document.

With Dom operations, we can create a word-style toolbar to allow users to customize all aspects of the display card: Changing the font size, document font, and topic width. Using CSS, JavaScript, and Dom together, we can create powerful application software guis compatible with standard browsers.