jQueryベースのH 5デバッグバー
23084 ワード
<!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>