动态生成div层的实例及注意事项

 1 /// <summary>
 2 /// 动态构造弹出层
 3 /// </summary>
 4 /// 1
 5 /// add
 6 /// 帝华
 7 /// 10:11 2014/11/27
 8 /// <param name="chapName">章节名称</param>
 9 /// <param name="wordCount">字数</param>
10 /// <param name="chapContent">章节内容</param>
11 /// <returns>返回HTML代码</returns>
12 function GetPopupLayer(chapName,wordCount,chapContent)
13 {
14     //1.最外层
15     var divOut=$("<div>").css("display","none").attr("id","popup1");
16     //1.1第一层
17     var divFirst=$("<div>").addClass("popup sp1");
18     //1.1.1第二层的关闭按钮
19     var divClose=$("<div>").addClass("close");
20     //1.1.1.关闭的组件a。
21     //1.1.1.1生成
22     var aButton=$("<a>").attr("title","关闭")
23     .attr("onclick","fixed_box.close()")
24     .attr("href","javascript:;");
25     //1.1.1.2添加到上一层
26     aButton.appendTo(divClose);
27     //1.1.1.3组装关闭按钮
28     divClose.appendTo(divFirst);
29     //1.1.2第二层提示信息
30     var divTitle=$("<div>").attr("title","点击按住左键，拖动浮层")
31     .addClass("title").attr("onmousedown","fixed_box.move_xy()");
32     //1.1.2.1将第二层提示信息添加到第一层
33     divTitle.appendTo(divFirst);
34     //1.1.3第二层的内容
35     //这一层最复杂，包含章节信息
36     var divCon=$("<div>").addClass("cont");
37     //1.1.3.1内容下第一个元素
38     var divSectionName=$("<div>").addClass("section_name clearfix");
39     //1.1.3.1.1章节名称
40     var dlClearFix=$("<dl>").addClass("clearfix");
41     //1.1.3.1.1.1名称标签
42     var dtChapName=$("<dt>").html("章节名称：");
43     //1.1.3.1.1.2名称内容
44     var ddChapName=$("<dd>").append($("<p>").addClass("name").attr("id","chapName").html(chapName));
45     //组合到第一个元素
46     dlClearFix.append(dtChapName).append(ddChapName);
47     dlClearFix.appendTo(divSectionName);     
48     //1.1.3.2内容下第二个元素，内容
49     var divContent=$("<div>").addClass("section_content clearfix");
50     //1.1.3.2.1 dl
51     var dlSeClear=$("<dl>").addClass("clearfix");
52     //1.1.3.2.1.1
53     var dtSeClear=$("<dt>").html("当前章节：").append($("<i>").attr("id","txtWordCount").html("当前"+wordCount+"字"));
54     //1.1.3.2.1.2
55     var ddSeClaer=$("<dd>")
56     .append($("<textarea>").addClass("textarea").attr("name","textarea").attr("id","textarea").html(chapContent));
57     //组合到第二个元素
58     dlSeClear.append(dtSeClear).append(ddSeClaer).appendTo(divContent);
59     //1.1.3.3第三个元素
60     var divButtonArea=$("<div>").addClass("button_area");
61    //1.1.3.3.1第一个按钮
62    var btnOne=$("<input>").addClass("button01").val("修改并同步")
63    .attr("type","button").attr("id","saveAndSync");
64    //1.1.3.3.2第二个按钮
65    var btnTwo=$("<input>").addClass("button02").val("修改")
66    .attr("type","button").attr("id","btSave");
67    //1.1.3.3.3第三个按钮
68    var btnThree=$("<a>").addClass("cancel").attr("href","javascript:;").html("取消修改");
69    //1.1.3.3.4组合到第三个元素
70    divButtonArea.append(btnOne).append(btnTwo).append(btnThree);
71    //1.1.3.4组合三个元素到内容
72    divCon.append(divSectionName).append(divContent).append(divButtonArea)
73    .appendTo(divFirst);
74    //1.2将第一层组合到最外层
75    divFirst.appendTo(divOut); 
76    return divOut.html();    
77 }