• 一种组件化思路


    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.自定义对外暴露的几个方法

  • 相关阅读:
    css实现强制不换行/自动换行/强制换行
    提供一个跨浏览器的XML DOM对象解决方案,来自于《javascript高级程序设计》
    Javascript的IE和Firefox兼容性汇编收藏.txt
    弹出一个层来让用户确认操作(转)
    弹窗代码
    C# 绘制统计图(柱状图, 折线图, 扇形图) (转)
    把Sql类型转换为C#类型的函数
    类型对象和类实例对象
    javascript 父窗体获取子窗体操作结果
    类型转换(二):是使用 is 还是 as
  • 原文地址:https://www.cnblogs.com/samwu/p/4482737.html
Copyright © 2020-2023  润新知