Create a powerful GUI with JavaScript

Javascript| creating most computer users are very familiar with the graphical user interface (GUI) of Windows, using Word or Microsoft's e-mail client software to learn about buttons, toolbars, and tags, but with almost identical interfaces to client software, We can find that each site's interface is

are not the same. Users need to learn how to use every kind of Internet application. Although most Internet applications are not too complex, a user needs to constantly learn the application interface and feel like a novice, which is not a pleasant thing for users.

By using JavaScript and CSS to build standardized client interface components for an Internet application or Web site, you can use the user's eye to see what they can do and how to do their job. Users will be more confident of their own operations, and will not be prone to misoperation.

Maybe you don't know that JavaScript has this feature, or that you've seen it on other sites, but you don't know how it's done. In this article, we'll discuss how to create a simple, formatted toolbar (as in Word) that can add functionality to any Web site that lets users feedback through the <textarea> area. The techniques presented in this article require the reader to have knowledge of HTML, CSS, and JavaScript.

A little bit of inadequacy

The following code uses the Createrange () method of the Selection object, unfortunately, only ie4+ users on the Windows platform can use the Selection object, and similar functionality is achieved through the Document Object Model (DOM). However, Document.createrange () in Mozilla can be problematic, mainly in the input or textarea elements of the text data can not be processed. If this bug is resolved, the following code can be run on Mozilla, Netscape 6+, or any other browser platform running gecko.

Create a simple toolbar

Let's start by creating a simple toolbar with three buttons: a bold button, a Italic button, and a connection button. The toolbar is a great way to add functionality to an existing text field, allowing users to simply control the text you enter without having to know HTML. Any Web site that allows users to participate or make feedback can be enhanced with this toolbar.

Our toolbars can be functionally divided into the following 4 sections:
• JavaScript functions that encapsulate HTML markup for selected text attachments
• Style sheet for customizing the appearance and style of toolbars, buttons
• JavaScript functions that respond to mouse events
• HTML that contains toolbar code, images, and table elements

Let's first look at two functions that handle inserting HTML code into <textarea>:

Using JavaScript to work with 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 () accepts only one argument, a string that represents the HTML tag that is acting on the selected text. In this toolbar, we use this function to control the text between <b> and <i>. Of course, if you prefer, we can use <strong> and <em> replace <b> and <i>, or use this function to control the selected text, or to qualify the specified text in the selected tag.

We can use the Createrange () method of the Selection object to easily create the TextRange object for the current text. By accessing its Text property, we can get the text selected in <textarea>. The Text property is assigned to a local variable. In the next line, we call focus () on <textarea>, which is very important, otherwise our changes to the text may be written to other parts of the page. Finally, we create another reference to the specified text and assign it a new value: The address of the original selection located 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 (), plus prompt (), which allows the user to enter the value of a hypertext link. Using 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 the user. Let's take a look at the example below.

using system colors in CSS

The easiest way to use the above function on a Web site is to call these functions in the OnClick event handler of the "bold", "Italic", and "link" buttons, but that's not exciting enough. Since we use the Selection object and limit ourselves to the Ie/win platform, we should take full advantage of IE's features, use user-defined system colors in CSS, and create dynamic buttons like we see in other software. Let's take a look at the style sheet that defines the toolbars, buttons, and the states that are raised and pressed two of 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 we used three system color references in the stylesheet: ButtonFace, Buttonshadow, and Buttonhighlight. By using ButtonFace as the background color for toolbars and buttons, we can use the user to get the same interface appearance as other applications. Creating boundaries with Buttonshadow and buttonhighlight colors enables a button to have a 3D effect by writing a simple JavaScript function. Of course, if you want to make the GUI match the Web site rather than the user's browser, you can replace the appropriate color.

The four functions that can change the button-style JavaScript are used by event handlers when changing the class name of the mouse event image. Although JavaScript code can be written inline, we organize them into a function to facilitate the addition of additional functionality 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";
}

Integration with HTML

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

class= "button"





Src= "Http://edu.cnzz.cn/NewsInfo/bold.gif"
Width= "height=" "16"
Align= "Middle"
alt= "Click to make your selection bold" >





Src= "Http://edu.cnzz.cn/NewsInfo/italic.gif"
Width= "height=" "16"
Align= "Middle"
alt= "Click to make your selection italic" >





Src= "Http://edu.cnzz.cn/NewsInfo/link.gif"
Width= "height=" "16"
Align= "Middle"
alt= "Click to add a link" >

<textarea cols= "rows=" 6 "name=" My_textarea "></textarea>

A div contains an image of three buttons, which makes the code look neat. Function call in the event handler for the tag, we pass a reference to the format function of the element that will be changed, and we pass an appropriate argument to the Format_sel () function, depending on the format that you want to use (b for bold, I for italics).

Conclusion

Of course, this is just one way to create a toolbar, and there are many other ways to create a toolbar. The functionality of the toolbar created by the reader does not have to be limited to the functionality covered in this article, which makes it easy to change the style of a document using the Consortium DOM.

With DOM operations, we can create a word-style toolbar that allows users to customize all aspects of the display card: Changing the font size, document font, and changing the width of the column. With CSS, JavaScript, and Dom, we are able to create powerful application GUI that is compatible with standard browsers.