首页 > 代码库 > 动态生成div层的实例及注意事项

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

动态生成html代码,然后传给一个JS插件。

实例如下:

 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 dl51     var dlSeClear=$("<dl>").addClass("clearfix");52     //1.1.3.2.1.153     var dtSeClear=$("<dt>").html("当前章节:").append($("<i>").attr("id","txtWordCount").html("当前"+wordCount+"字"));54     //1.1.3.2.1.255     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 }

注意事项:

其中,divOut.html()跟divOut.innerHTML返回内容一样。设置style用css方法,不要用attr("style","display:none;");

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