define(["jquery"],function($){ function jifen_shuoming(htmlContent, title){ var _html = '<div class="shadowLayout"><div class="shadowLayout-pointsManual animation fadeInDown"><div class="shadowLayout-pointsManual-title"><span>积分</span></div><div class="shadowLayout-pointsManual-content"><div><span class="shadowLayout-pointsManual-content-icon"></span><span class="shadowLayout-pointsManual-content-text">什么是积分</span><br><span class="shadowLayout-pointsManual-content-iconGreen"></span><span class="shadowLayout-pointsManual-content-text">什么是积分</span><br><br><span class="shadowLayout-pointsManual-content-icon"></span><span class="shadowLayout-pointsManual-content-text">什么是积分</span><br><span class="shadowLayout-pointsManual-content-iconGreen"></span><span class="shadowLayout-pointsManual-content-text">什么是积分</span></div></div><div class="shadowLayout-pointsManual-knowIt">我知道了</div></div></div>'; var _css = '.shadowLayout { 100%; height: 100%; padding: 0 15px; background-color: rgba(0, 0, 0, 0.5); display: none; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 99; } .shadowLayout-pointsManual-content{ padding-top: 16px; } .shadowLayoutOpen { display: block; } .shadowLayoutClose { display: none; } .shadowLayoutOpen .shadowLayout-pointsManual { } .shadowLayoutClose .shadowLayout-pointsManual { } .shadowLayout-pointsManual { 100%; padding: 0 5px 10px; margin-top: 20%; box-sizing: border-box; background-color: #ffffff; border-radius: 6px; } .shadowLayout-pointsManual-title { 100%; height: 33px; border-bottom: 1px solid #cacaca; line-height: 33px; font-size: 15px; color: #3e3e3e; text-align: center; } .shadowLayout-pointsManual-content-icon { 8px; height: 8px; display: inline-block; background-color: #3b7abf; margin-right: 6px; margin-left: -16px; } .shadowLayout-pointsManual-content-iconGreen { 8px; height: 8px; display: inline-block; background-color: #34cf95; margin-right: 6px; margin-left: -16px; } .shadowLayout-pointsManual-content-text { font-size: 12px; } .shadowLayout-pointsManual-knowIt { height: 36px; margin-top: 20px; border-radius: 4px; background-color: #34cf95; color: #fff; text-align: center; line-height: 36px; }'; var $jifen_shuoming = $(_html); $jifen_shuoming.find(".shadowLayout-pointsManual-content").html(htmlContent); if(typeof(title) != "undefined"){ $jifen_shuoming.find(".shadowLayout-pointsManual-title").html(title); } var _this = {}, style_id = ""; _this.open = function(){ (function(){ var time = new Date(); style_id = "Loading51CSS"+ time.getTime(); var $head = $("head"); $style = $("<style id='"+ style_id +"'></style>"); $style.text(_css); $head.append($style); })(); $jifen_shuoming.appendTo('body'); $jifen_shuoming.addClass("shadowLayoutOpen"); }; _this.remove = function(){ $jifen_shuoming.remove(); $("#"+style_id).remove(); }; $jifen_shuoming.find(".shadowLayout-pointsManual-knowIt").on("click",function(){ _this.remove(); }); return _this; } return jifen_shuoming; })
1.html和css都写在js中
2.js生成的style标签具有唯一值
3.移除组件dom时,同时把对应的style标签移除掉
4.自定义对外暴露的几个方法