基于jQuery的H5调试条

转载

mob604756f261ee 2015-03-26 17:51:00

文章标签 html javascript 错误信息自定义 d3 文章分类 jQuery 前端开发

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="utf-8">
        <title>H5输出条</title>
        <style>
        /*.samConsole{
            width: 100%;
            height: 300px;
            overflow: hidden;
            
            position: fixed;
            top: 0;
            left: 0;
            
            font-size: 14px;
            color: #fff;
            background: rgba(0, 0, 0, 0.8);
        }
        .samConsole-p{
            width: 100%;
            padding: 6px;
            border-top: 1px solid rgba(255,255,255,0.1);
            margin: 0;
            margin-top: -1px;
        }*/
        </style>
    </head>
    <body>
        需求：
        在移动端网页输出调试信息。
        包括字符串，数组，对象。
        
        对外提供的接口：
        弹出/隐藏输出框；普通，警告，错误信息不同样式。
        
        用例：
        samConsole.log("普通信息");
        samConsole.warn("警告信息");
        samConsole.error("错误信息");
        samConsole.html("自定义html");
        
        samConsole.open(); 打开输出框
        samConsole.close(); 关闭输出框
        samConsole.clear(); 清除输出信息
        samConsole.config = {
            "maxHeight":"300"
        };
        <!--<div class="samConsole">
            <p class="samConsole-p">
                aaaa
            </p>
            <p class="samConsole-p">
                aaaa
            </p>
        </div>-->
        
    </body>
    <script type="text/javascript" src="jquery.js" ></script>
    <script type="text/javascript">
        var samConsole = (function(){
            var $samConsole = $('<div class="samConsole"></div>'),
            $samConsole_p = $('<div class="samConsole-p"></div>'),
            $toggle = $('<div class="samConsole-toggle"">切换</div>');
            
            var samConsole_style = '-webkit-transition:all 0.5s ease;transition:all 0.5s ease;width:100%;height:300px;overflow:hidden;-webkit-overflow-scrolling:touch;overflow-y:scroll;position:fixed;top:0;left:0;z-index:999999;font-size:14px;color:#fff;background:rgba(0,0,0,0.8);',
            samConsole_p_style = 'width:100%;padding:6px;border-top:1px solid rgba(255,255,255,0.1);margin:0;margin-top:-1px;box-sizing: border-box;',
            toggle_style = 'position:fixed;right:0;top:0;width:100px;height:30px;border:1px solid #ddd;border-radius:6px;text-align:center;line-height:30px;';
            
            var $body = $("body");
            
            (function(){
                $samConsole.attr("style",samConsole_style);
                $samConsole_p.attr("style",samConsole_p_style);
                $toggle.attr("style", toggle_style);
                
                $toggle.appendTo($samConsole);
                $toggle.on("click",function(){
                    if($samConsole.height() == 30){
                        $samConsole.height(300);
                    }
                    else{
                        $samConsole.height(30);
                    }
                    
                });
            })();
            
            
            var _samConsole = {};
            
            
            _samConsole.log = function(info,style){
                
                var $clone_samConsole_p = $samConsole_p.clone();
                $clone_samConsole_p.text(JSON.stringify(info));
                $clone_samConsole_p.appendTo($samConsole);
                
                if(typeof(style) !=="undefined"){
                    $(".samConsole-p").last().css(style);
                }
                
                $samConsole.scrollTop($samConsole.prop("scrollHeight"));
            };
            
            _samConsole.warn = function(info){
                _samConsole.log(info,{"color":"#faa732"});
                
            };
            
            _samConsole.error = function(info){
                _samConsole.log(info,{"color":"#bd362f"});
            };
            
            _samConsole.html = function(info){
                var $clone_samConsole_p = $samConsole_p.clone();
                $clone_samConsole_p.html(info);
                $clone_samConsole_p.appendTo($samConsole);
            };
            
            _samConsole.open = function(){
                $body.prepend($samConsole);
            };
            
            _samConsole.close = function(){
                $body.remove($samConsole);
            };
            
            _samConsole.clear = function(){
                $samConsole.find(".samConsole-p").remove();
            };
            
            return _samConsole;
        })();
        
        samConsole.open();
        samConsole.log("normal");
        samConsole.warn("warn");
        samConsole.error("error");
        samConsole.log([{"array":"yes"},{"object":"yes"}]);
        samConsole.log(999);
        samConsole.html('<div style="padding-left:30px">this is html code</div>');
        samConsole.log('<div style="padding-left:30px">this is html code</div>');
        $("body").on("click",function(){
            samConsole.log("normal");
        });
        
        $("html").on("dbclick",function(){
            samConsole.clear();
        });
    </script>
</html>