您现在的位置是: 首页 > 前端技术 > JQuery 入门到熟练

『2016』随手写一个JQuery插件inkfx.console.js
ShuXiaolong 2016-12-15 107人围观
6 条评论
简介 作者在 撰写博客《『2015』InkFx.Express 表达式编程》 时, 反复思考:如何让阅读博客的人 可以看到 算法的运行状态,如何增加用户体验。 灵光一闪:何不 把算法的 控制台运行,直接 展示在网页上,这可比 截图、放源码 实在得多。 说干就干,从切图、写代码,测试,远程调取控制台内容 耗时半天时间。

    作者在 撰写博客《『2015』InkFx.Express 表达式编程》 时,

    反复思考:如何让阅读博客的人 可以看到 算法的运行状态,如何增加用户体验。

    灵光一闪:何不 把算法的 控制台运行,直接 展示在网页上,这可比 截图、放源码 实在得多。

    说干就干,从切图、写代码,测试,远程调取控制台内容 耗时半天时间。

     

     

    PS. 这只是一个 微型项目,超小型 JQuery框架。 

     

     

    项目介绍:

    算法型框架,一般没有华丽的界面,大多用 控制台(黑窗口)运行。

    而 “黑窗口” 中的 算法运行日志 —— 则可以看出 算法的 稳定、性能、思路。

     

    如果 将 这段运行日志 全部放到 博客中,难免太过 丑陋,用户体验不好。

    所以就手写了一个 JQuery插件 inkfx.console.js。

    直接把 PC端的 “黑窗口” 搬到 Web中来。

     

     

    相关链接:

    在线开源地址:http://www.ink-fx.com/Source/701AA781ACF8428EABEF0A14FBC796BA


    项目效果:

     

     

     

    项目源码(源码比较简单):

    PS.

    因为,在 Web端 展示 “黑窗口” 需要 一些图片资源 —— 而 Js+图片资源 这种 多处拷贝的编程体验 太糟糕。

    所以,作者将 图片资源Base64 内嵌到了 Js插件中 —— 这样,使用本插件 不需要进行复杂的 复制粘贴操作,引用Js即可。

    (function ($) {
        function toTime(text) {
    
        }
        function htmlEncode(value) {
            var html = $('<div/>').text(value).html();
            //html = html.replace(" ", "&nbsp;");
            //html = html.replace("\t", "&nbsp;&nbsp;&nbsp;&nbsp;");
            return html;
        }
        function initBox($textarea) {
            var id = $textarea.attr('id');
            var title = $textarea.attr('title');
            var $box = $("" +
                            "        <div id='" + id + "_console' style='width:677px; height:442px;'>" +
                            "            <div class='c_t' style='width:677px; height:32px;'>" +
                            "                <div class='c_tl' style='width:10px; height:32px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                <div class='c_tm' style='width:554px; height:32px; float:left; background-size:554px 32px; background-image:url(data:image/png;base64,具体Base64有点长略)'>" +
                            "                    <div class='c_icon' style='margin:8px 5px 1px 1px; width:16px; height:16px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                    <div class='c_title' style='margin:8px 8px 1px 1px; width:500px; float:left; overflow:hidden; font:12px 微软雅黑; ' alt='" + title + "'>" + title + "</div>" +
                            "                    <div style='clear:both;'></div>" +
                            "                </div>" +
                            "                <div class='c_tbtn' style='width:103px; height:32px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                <div class='c_tr' style='width:10px; height:32px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                <div style='clear:both;'></div>" +
                            "            </div>" +
                            "            <div class='c_m' >" +
                            "                <div class='c_ml' style='width:10px; height:400px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                <div class='c_mm' style='width:657px; height:400px; float:left; overflow:scroll; font:10px 微软雅黑; background-color:Black;'>" +
                            "                    <div class='c_mm_first' style='clear:both;'> </div>" +
                            "                </div>" +
                            "                <div class='c_mr' style='width:10px; height:400px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                <div style='clear:both;'></div>" +
                            "            </div>" +
                            "            <div class='c_b' style='width:677px; height:10px;'>" +
                            "                <div class='c_bl' style='width:10px; height:10px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                <div class='c_bm' style='width:657px; height:10px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                <div class='c_br' style='width:10px; height:10px; float:left; background-image:url(data:image/png;base64,具体Base64有点长略)'></div>" +
                            "                <div style='clear:both;'></div>" +
                            "            </div>" +
                            "        </div>" +
                            "");
    
            var width = $textarea.width();
            var height = $textarea.height();
            $box.width(width);
            $box.height(height);
            $box.find(".c_t,.c_m,.c_b").width(width);
            $box.find(".c_mm,.c_bm").width(width - 20);
            $box.find(".c_tm").width(width - 20 - 103);
            $box.find(".c_tl,.c_ml,.c_bl").width(10);
            $box.find(".c_title").width(width - 20 - 103 - 16 - 8 - 5 - 10);
            $box.find(".c_ml,.c_mm,.c_mr").height(height - 32 - 10);
            //alert($box.find(".c_tm").css("background-size"));
            //alert($box.find(".c_tm").width());
            $box.find(".c_tm").css("background-size", $box.find(".c_tm").width() + "px 32px");
    
            $textarea.hide();
            $textarea.after($box);
            $textarea.after($("<div style='clear:both;'></div>"));
            return $box;
        }
    
        function fillConsole($boxContent, text) {
            var lines = text.split("\n");
            //var $box = $("#test_console").find(".c_mm_first");
    
            var color = "White";
            var reg = /((Info)|(Title)|(Succeed)|(Debug)|(Warn)|(Error)|(#\d+))\s+\d\d\d\d-\d\d-\d\d\s\d\d\:\d\d:\d\d(\s\d+)*/;
            var regColor = /((Info)|(Title)|(Succeed)|(Debug)|(Warn)|(Error)|(#\d+))/;
            for (var i = 0; i < lines.length; i++) {
                var line = lines[i];
                if (reg.test(line)) {
                    var colorStr = line.match(regColor);
                    colorStr = (colorStr != null && colorStr.length >= 1) ? colorStr[0].toString().toLowerCase() : "#FFFFFF";
                    if (colorStr == "info") color = "#FFFFFF";
                    else if (colorStr == "title") color = "#FF1493";
                    else if (colorStr == "succeed") color = "#00FF00";
                    else if (colorStr == "debug") color = "#DCDCDC";
                    else if (colorStr == "warn") color = "#FFFF00";
                    else if (colorStr == "error") color = "#FF0000";
                    else color = colorStr;
                } else {
                    $boxContent.append($("<pre style='margin:0px;font:10px 宋体;color:" + color + ";'>" + htmlEncode(lines[i]) + "</pre>"));
                }
            }
        }
    
        $.fn.extend({
            "getp": function () {
                var $textarea = this;
            },
            "console": function () {
                var $textarea = this;
                if ($textarea != null) {
                    var $box = initBox($textarea);
                    var $boxContent = $box.find(".c_mm");
    
                    var text = "";
                    var data_url = $textarea.attr("data-url");
                    if (data_url != null) {
                        try {
                            $.ajax({
                                url: data_url,
                                type: "get",
                                data: {},
                                dataType: "jsonp",
                                jsonp: "callback",
                                success: function (data) {
                                    text = data.result;
                                    fillConsole($boxContent, text);
                                }
                            });
                            /*$.get(data_url, function (data, status) {
                            text = data;
                            fillConsole($boxContent, text);
                            });*/
                        } catch (e) { }
                    } else {
                        text = $textarea.val();
                        fillConsole($boxContent, text);
                    }
                }
                return $textarea;
            }
        });
    })(jQuery);

     

     

第一时间获取智能手机行业新鲜资讯和商业动态,可以访问站长的微博「InkFx」, 如果需要站长陪聊也可以在微信里添加好友,搜索「Shu_Xiaolong」, 还可以通过加入QQ群:「C#实验室」,和网友一起交流技术、共同进步。

文章评论

图文推荐

InkFx博客 有部分文章来源于互联网,版权归属于原作者。本站所有转载文章言论不代表本站观点。
如是侵犯了原作者的权利,请发邮件联系站长(514286339@qq.com),站长收到后立即删除。