Object-oriented programming examples in JavaScript

All along, I mainly do winform aspects of programming, recently done a bit of the web, so also studied a few days of JavaScript. I have some experience to remember:

The application of object-oriented ideas in JavaScript also applies, the key is that you dare to use, do not want to use.

I used vs2005 to write a vs2003 toolbox with a completely similar navigation toolbar, and I prefer to provide users with the navigation of application functionality in this way in WinForm. So I also want to use this approach in the Web. There are a lot of examples on the web, but after looking at them, they feel the coding is more complex and not easy to expand. So I decided to use JavaScript to write one myself, using the experience of vs2005 development. Many commonly used things themselves spend some time to write is my favorite way, I do not like to use others to write, and sometimes spent on the study of other people's time basic can be written out. and write their own changes easy, easy to use ... It's not a good idea, I guess. But I prefer to accept other people's ideas, rather than a line to read other people's code. I study other people's things like to see the demo first.

Here's how to write this toolbar using javascript:

1, the tool bar composition: Classification (I named Toolband)--with the DIV tag implementation, where caption and image with the span and the IMG tag implementation. Tool buttons (I named Toolitem)--implemented with DIV tags, where caption and image are implemented with span and IMG tags. The container for the tool button, which I named Toolitemcontainer, is implemented with a DIV tag. Toolbar (I named toolbar)--implemented with Div. Note: Why do these all use div tags? Everyone who is a web-div+css knows that the page layout can make the code more concise. 2, in JavaScript, the method of defining objects, writing is the writing function, which is not very suitable for some of the comrades who have just begun to contact.

View Plaincopy to Clipboardprint?

Like what:

var toolbar=function (Width,height,....)
{
This.　Bands = new Array (); All the band in the toolbar
Other properties
.....
.....
}
Toolbar's Addband method, in fact, is to add a band to toolbar's bands array.
ToolBar.prototype.AddBand = function (band)
{
....
}
/*
* After initialization completes all band and Toolitem, this function must be called to display the OutlookBar
Parameters
* Parentelem: Represents a container for displaying outlookbar
*/
ToolBar.prototype.Show = function (Parentelem)
{
/*
* under this. Bands can iterate through all the band
* then under this. Bands[i]. Toolitems can traverse all Toolitem under Bands[i]
* Based on the band that are being traversed and the properties stored in the Toolitem, such as caption,width,height and so on,
* Dynamic creation (such as document.createelement ("div")) out of the actual display of div,span and so on, and display.
*/
var toolbar = document.createelement ("div");
Toolbar.style.height = "100%";
Toolbar.style.width = "100%";
Toolbar.style.position= "relative"; All band can be properly arranged only after using relative
Number of band
This. Parentelement=parentelem;
This. Parentelement.appendchild (toolbar);
for (var i=0; i<this. bands.length;i++)
{
var bandelem=this. Bands[i]. Bandelement ();
.....
Bandelem.onclick=_outlookbarswithbars;
Toolbar.appendchild (Bandelem);
Create a new div to contain this. Toolitems elements in Bands[i]
var Toolitemcontainer = document.createelement ("div");
Setting the Toolitemcontainer Property
for (var j=0; i<this. Bands[i]. toolitems.length;j++)
{
Will this. Bands[i]. Toolitems.toolitemelement added to Toolitemcontainer
such as: Toolitemcontainer.appendchild (this. Bands[i]. Toolitems.toolitemelement);
//....
}
}
}
This defines a toolbar object that contains a bands array, because there are multiple band in one toolbar
function Band (name,caption,....)
{
All the Toolitem in the band.
This. Toolitems = new Array ();
THIS.name = name;
This.caption = "" + caption;
Other properties, you can define your own according to your needs, such as background images on band, background colors, and so on.
....
}
Band method, increase Toolitem, actually is to add item to this. In the Toolitems array
Band.prototype.AddItem = function (item)
{
.....
}
/*
* Return to current band
Format
* ----------------------------
* | Image | Caption |
* ----------------------------
*/
Band.prototype.bandelement=function ()
{
var Divelem = document.createelement ("div");
Divelem.id= "Toolbar_band" + this.name;
Divelem.name=this.name;
....
Divelem.style.color=this.color;
....
divelem.style.position= "Absolute";
Divelem.style.width= "100%";
divelem.style.left=0;
Display Picture: If no picture path is provided, picture is not displayed
if (this.imageurl!=null && this.imageurl.length>0)
{
var imgelem=document.createelement ("img");
IMGELEM.SRC = This.imageurl;
Divelem.appendchild (Imgelem);
}
Show title
var spanelem=document.createelement ("span");
Spanelem.style.fontsize= "14px";
/*
* To support IE and Firefox, only innerHTML can be used here
* In fact, innertext and innerHTML are not standard for the consortium.
* In fact, under Firefox textcontent and IE innertext equivalent
*/
Spanelem.innertext=this.caption;
Spanelem.innerhtml=this.caption;
Divelem.appendchild (Spanelem);
return (Divelem);
}
This defines a band, which defines a toolitems array, because a band contains multiple Toolitem
function Toolitem (name,caption,....)
{
THIS.name = name;
This.caption = caption;
Define additional properties below
....
}
/*
* This function returns the DOM element for each toolitem, consisting of several parts:
* 1, picture part;
* 2, the title part;
* Style such as:
*　　　*********
* * Picture *
*　　　*********
*　　**************
* *= title =*
*　　**************
* Use the table below to achieve precise control
* <table>
* <tr>
* <td>
*//Place picture Div here
* </td>
* </tr>
* <tr>
* <td>
*//Place title Div here
* </td>
* </tr>
* </table>
*/
Toolitem.prototype.toolitemelement=function ()
{
var divelem=document.createelement ("div");
Divelem.style.width= "100%";
divelem.style.background= "White";
Divelem.style.color= "BLACK";
divelem.style.align= "center";
Show Picture: and set related control properties
var imgelem=document.createelement ("img");
Imgelem.name=this.name;
Imgelem.caption=this.caption;
IMGELEM.SRC = This.imageurl;
....
Imgelem.onclick=this.　Toolitemclick; Setting Up Events
Display title:
var spancaption=document.createelement ("span");
/*
* To support IE and Firefox, only innerHTML can be used here
* In fact, innertext and innerHTML are not standard for the consortium.
* In fact, under Firefox textcontent and IE innertext equivalent
*/
Spancaption.innertext=this.caption;
Spancaption.innerhtml=this.caption;
var table=document.createelement ("table");
Table.style.width= "100%";
Table.insertrow (-1); Here must be with parameter-1, otherwise in Firefox will not display properly
Table.insertrow (-1);
var Cellimag=table.rows[0].insertcell (-1);
Cellimag.appendchild (Imgelem); Picture part
Note that this writing is not working: cellimag.style.align= "center";
cellimag.align= "center";
var Cellcaption=table.rows[1].insertcell (-1);
Cellcaption.appendchild (spancaption); Title Section
cellcaption.align= "center";
Divelem.appendchild (table); Title Section
return Divelem;
}
Other than responding to events: Imgelem.onclick=this.　Toolitemclick; Set events and so on, you can write according to the actual situation can be

This defines a Toolitem object that always contains attributes and methods, which are described in terms of attributes, and the following describes the definition of the method. For example, the AddItem method of band:

Through this thought, not only is the code structure very clear, and the modification, the extension becomes very easy. Well, I gave the idea, the concrete realization of everyone to do it.

To achieve such a thing, from the idea to coding I spent a day and a half, so the mind is not difficult, the key is the train of thought.

Here is a look at the implementation of the effect of the picture. The above is the idea, as well as the effect chart.