首页 > 代码库 > 动态生成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层的实例及注意事项
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。