Customized LogReader Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Logger Widget :: Customizing LogReader</title>
<link type="text/css" rel="stylesheet" href="./build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="./build/grids/grids.css">
<link type="text/css" rel="stylesheet" href="./examples/logger/css/examples.css">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
<style type="text/css">
/* customized ylogger styles - logger.css is NOT called above */
/* font size is controlled here: default 77% */
#yui-log {position:relative;font-size:85%;}
/* width is controlled here: default 31em */
.yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}
.yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
.yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */
</style>
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd">
<h1><img src="./examples/logger/img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Customizing LogReader</h1>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<!-- Content begins -->
<div id="content">
<h3>Customized LogReader Example</h3>
<p>This LogReader implementation has been modified by changing some default
CSS styles as well as modifying some properties through the constructor.
In this example, the LogReader is placed in a fixed position at the
bottom right of the screen. The height of each of the consoles has been
made smaller, the font size has been bumped up, and the log messages of
the second LogReader has been made more compact (i.e., the line break
within each message has been removed).</p>
<p><input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputinfo').value,'info')">Log</button></p>
<p><input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputwarn').value,'warn')">Log</button></p>
<p><input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputerror').value,'error')">Log</button></p>
<p><input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message.">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputtime').value,'time')">Log</button></p>
<p><input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error.">
<button onclick="someUndefinedFunction();">Log</button> (not supported in Opera, Safari)</p>
<p><input id="yui-log-inputcustommsg" class="yui-log-input" type="text" value="Log a custom type message.">
<input id="yui-log-inputcustomtype" type="text" value="mytype">
<button onclick="YAHOO.log(document.getElementById('yui-log-inputcustommsg').value,document.getElementById('yui-log-inputcustomtype').value)">Log</button></p>
<p><a href="javascript:YAHOO.example.LogReader.hideAllReaders();">Hide All LogReaders</a> ||
<a href="javascript:YAHOO.example.LogReader.showAllReaders();">Show All LogReaders</a></p>
<p><a href="javascript:YAHOO.widget.Logger.enableBrowserConsole();">Enable Output to console.log()</a> || <a href="javascript:YAHOO.widget.Logger.disableBrowserConsole();">Disable Output to console.log()</a>
</p>
<p><a href="javascript:YAHOO.widget.Logger.reset();">Reset Logger stack</a></p>
</div>
<!-- Content ends -->
</div>
<div class="yui-u">
<!-- Logger begins -->
<div id="yui-log" class="yui-log"></div>
<!-- Logger ends -->
</div>
</div>
<div class="yui-g">
<!-- Sample code begins -->
<div id="code">
<h3>Sample Code</h3>
<textarea name="code" class="HTML" cols="60" rows="1">
<head>
<style type="text/css">
/* container is relatively positioned and
font size is adjusted here (default is 77%) */
#yui-log {position:relative;font-size:85%;}
/* width is controlled here: default 31em */
.yui-log {padding:1em;width:31em;background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
.yui-log p {margin:1px;padding:.1em;}
.yui-log button {font-family:monospace;}
.yui-log .yui-log-hd {position:relative;margin-top:1em;padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {position:relative;background-color:#FFF;border:1px solid gray;overflow:auto;width:100%;height:10em;}
.yui-log .yui-log-ft {position:relative;margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
/* a style for a custom category */
.yui-log .mytype {background-color:#FF99CC;} /* FF99CC pink */
</style>
</head>
<body>
<!-- Logger begins -->
<div id="yui-log" class="yui-log"></div>
<!-- Logger ends -->
<script type="text/javascript">
myLogReader1 = new YAHOO.widget.LogReader("yui-log");
myLogReader2 = new YAHOO.widget.LogReader("yui-log",{compactOutput: true});
</script>
</body>
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
</div>
</div>
</div>
<!-- Libary begins -->
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.LogReader = function() {
var myLogReader1;
var myLogReader2;
return {
init: function() {
myLogReader1 = new YAHOO.widget.LogReader("yui-log");
myLogReader2 = new YAHOO.widget.LogReader("yui-log",{verboseOutput: false});
},
hideAllReaders: function() {
myLogReader1.hide();
myLogReader2.hide();
},
showAllReaders: function() {
myLogReader1.show();
myLogReader2.show();
}
};
}();
YAHOO.util.Event.onAvailable("yui-log",YAHOO.example.LogReader.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>
yui.zip( 3,714 k)Related examples in the same category