Away from JS disaster css disaster js private functions and css selectors as containers
Source: Internet
Author: User
Although javascript can construct objects and hide private methods as it targets objects, the demand changes more quickly than when you write programs, and the time for designing js objects is gone, therefore, I prefer to use js private functions and js methods. jquery private functions and jquery external exposure methods can also be implemented, while the html structure generated by pages is completely generated in js, which IDs and classes can be used to ensure consistency and reuse convenience to the maximum extent, but there is also a drawback, if the style needs to change (the structure cannot be changed), you need to use div to wrap the original structure. The relevant style also needs to be wrapped with the corresponding id, if it is a newly added event, you can only bind it. There is no good method yet.
For example, we need to include several images in a div.
This also has the disadvantage that css must be copied once before modification, but the structure and style and js can be reused.
Copy codeThe Code is as follows: <Head runat = "server">
<Title> </title>
<Script src = "Scripts/jquery-1.4.1.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
Var publicSetDiv = function (url, id ){
// As public, you can pass the parameter.
This. makediv = function (j ){
Var imglist = makeimglist (url, j );
Metadata (id).html (imglist );
$ (Id). show ();
}
// Private
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>
<% -- Original default style -- %>
<Style type = "text/css">
. Item {width: 200px; height: 100px ;}
# Test2. item {width: 200px; height: 100px ;}
</Style>
<% -- Use this style for the second time and make some modifications -- %>
<Style type = "text/css">
# Test2. item {width: 200px; height: 200px; background-color: Black ;}
</Style>
</Head>
<Body>
<Form id = "form1" runat = "server">
First use
<Div id = "test" style = "display: none;">
</Div>
<Div id = "test2" style = "display: none;">
</Div>
</Form>
</Body>
</Html>
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.