<!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. 161104、NoSQL数据库：key/value型之levelDB介绍及java实现

    简介:Leveldb是一个google实现的非常高效的kv数据库,能够支持billion级别的数据量了. 在这个数量级别下还有着非常高的性能,主要归功于它的良好的设计.特别是LSM算法.LevelDB ...

  2. 160926、Java-SpringMVC统一异常处理

    从零开始学 Java - Spring MVC 统一异常处理 看到 Exception 这个单词都心慌 如果有一天你发现好久没有看到Exception这个单词了,那你会不会想念她?我是不会的.她如女孩 ...

  3. LCD参数解释及计算【转】

    转自:http://blog.csdn.net/longxiaowu/article/details/24319933 Linux内核的amba lcd控制器使用clcd_panel结构体表示一个LC ...

  4. __ATTRIBUTE__ 你知多少？【转】

    转自:http://www.cnblogs.com/astwish/p/3460618.html GNU C 的一大特色就是__attribute__ 机制.__attribute__ 可以设置函数属 ...

  5. linux下共享内存mmap和DMA(直接访问内存)的使用 【转】

    转自:http://blog.chinaunix.net/uid-7374279-id-4413316.html 介绍Linux内存管理和内存映射的奥秘.同时讲述设备驱动程序是如何使用“直接内存访问” ...

  6. linux 集群配置ssh无密码访问

    一.修改host文件 1) 用客户端工具(ssh client或者putty)连接到linux服务器.在root用户下输入命令 vi /etc/hosts,用vi编辑hosts文件,如下: #127. ...

  7. 【PHP设计模式 05_DanLi.php】单例模式

    <?php /** * [单例模式] * 总结:防止外部new对象:防止子类继承:防止克隆. */ header("Content-type: text/html; charset=u ...

  8. MySQL查询表内重复记录

    查询及删除重复记录的方法(一)1.查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select * from peoplewhere peopleId in (select p ...

  9. CentOS系统没有javac命令

    自己捯饬的linux系统(CentOS)安装了jdk后,只能识别java命令而不识别javac.根据网上的教程设置环境变量后还是不行. 后来看了下/usr/java/jdk**目录下面根本没有java ...

  10. SQLite详解

    一.新建SQLite操作类(继承SQLiteOpenHelper) public class SQLiteTest extends SQLiteOpenHelper { final static St ...