Although JS can want to object-oriented way to construct objects, hidden private methods, but the need for change is often faster than you write the program, even the design of JS object time is not, so I prefer to use JS private functions and JS method jquery private functions and the form of the jquery external exposure method can also be implemented, and the page generated HTML structure is fully generated in JS, including which IDs and class, so as to maximize the convenience of the unification and reuse, but also has a disadvantage, is in the reuse, If you need to change the style (the structure is dead can not change), you need to use div to wrap the original structure, the relevant style also need to use the corresponding ID package, if the new event can only be used to bind the way, temporarily there is no good method
For example, I want to implement a div containing several pictures
There's a drawback to this. Only CSS must be replicated once in make changes but the structure and style and JS can be reused
Copy Code code as follows:
<title></title>
<script src= "Scripts/jquery-1.4.1.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
var publicsetdiv = function (URL, id) {
As a foreign public, you can pass the argument on the line
This.makediv = function (j) {
var imglist = makeimglist (URL, j);
$ (ID). HTML (imglist);
$ (ID). Show ();
}
Private ones.
function Makeimglist (URL, j) {
var i = 0;
var j = 10;
var html = "";
for (i; i < J; i++) {
HTML + + "}
return HTML;
}
}
$ (document). Ready (function () {
Handler for. Ready () called.
var mytest = new Publicsetdiv ("Http://images.cnblogs.com/logo_small.gif", "#test");
Mytest.makediv (10);
var mytest2 = new Publicsetdiv ("Http://images.cnblogs.com/logo_small.gif", "#test2");
Mytest2.makediv (10);
});
</script>
<%--the original default style--%>
<style type= "Text/css" >
. item{width:200px; height:100px;}
#test2. item{width:200px; height:100px;}
</style>
<%--use the style for the second time and slightly modify it--%>
<style type= "Text/css" >
#test2. item{width:200px; height:200px; background-color:black;}
</style>
<body>
<form id= "Form1" runat= "Server" >
First time use
<div id= "test" style= "Display:none;" >
</div>
<div id= "test2" style= "Display:none;" >
</div>
</form>
</body>
