<!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>

基于jQuery的H5调试条的更多相关文章

  1. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  2. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  3. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  4. 基于jQuery鼠标悬停上下滑动导航条

    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...

  5. 基于jQuery滑动分步式进度导航条代码

    分享一款基于jQuery滑动分步式进度导航条代码.这是一款基于jquery实现的网站注册动态步骤导航条代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=& ...

  6. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

  8. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  9. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

随机推荐

  1. 【原创】Nexus搭建Maven私服

    前言: 公司一般都有个自己的私服来管理各种jar包,原因大概有这么3个,分别是: 1.有的公司不能访问外网,只能通过私服来管理jar包和插件: 2.公司网速比较慢,通过公司的私服来获取jar包比较快: ...

  2. 通过SQL Server Profiler来监视分析死锁

    在两个或多个SQL Server进程中,每一个进程锁定了其他进程试图锁定的资源,就会出现死锁,例如,进程process1对table1持有1个排它锁(X),同时process1对table2请求1个排 ...

  3. WWDC 2016 总结

    一年一次的WWDC,是开发者充值信仰的时刻,今天你的信仰充值了吗?欢迎在本文下面留言吐槽. 有外媒称,这届WWDC苹果将“fun”伪装成“innovation”,的确,看看另两家老对手,微软有黑科技H ...

  4. Linux下Nagios的安装与配置

    一.本文说明 本文是在参考:http://www.cnblogs.com/mchina/archive/2013/02/20/2883404.html   David_Tang文章以及网上的一些资料完 ...

  5. 《Linux/Unix系统编程手册》

    TCP的TIME_WAIT状态,超时时间为2倍MSL(IP报文超过TTL前最大生存时间,BSD规范为30s,RFC1122建议为2分钟).

  6. [BIM]BIM中IFC介绍

    ifc是干什么的,看下图 ifc架构图 下文转自:http://www.bimcn.org/cjwt/201506053789.html IFC目前是国际通用的BIM标准,现在很多BIM软件都采用其作 ...

  7. [ios]app后台运行

    参考:http://www.douban.com/note/375127736/ 1 使用开源代码MMPDeepSleepPreventer将文件加入工程,包括音频文件.可以在源文件中加入单例,便于使 ...

  8. HTML学习之canves元素

    1:绘制画布 和在画布上绘制矩形 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  9. Linux内存模型

    http://blog.csdn.net/sunyubo458/article/details/6090946 了解linux的内存模型,或许不能让你大幅度提高编程能力,但是作为一个基本知识点应该熟悉 ...

  10. Oracle 客户端安装配置

    电脑上安装了Oracle11G,我远程导出一个10g的数据库数据时,报了错误,猜测可能是我的11G客户端版本的问题.所以下载了10G的客户端 安装. 其实客户端的配置读取的是两个文件监听配置文件lis ...