JavaScript DHTML/Development/Log
Версия от 10:02, 26 мая 2010; (обсуждение)
Содержание
Collapse log area(window)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:x2="http://www.w3.org/TR/xhtml2"
xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:state="http://www.w3.org/2005/07/aaa">
<head>
<title>Yahoo! UI Library - Slider Widget</title>
<link rel="stylesheet" type="text/css" href="./examples/slider/css/screen.css">
<style type="text/css">
.dragPanel {
position: absolute;
background-color: #eeeeee;
top: 200px;
left: 20px;
width: 320px;
height: 180px;
}
.dragPanel h4 {
background-color: #bbbbbb;
height: 10px;
margin: 0px;
cursor: move;
}
input { font-size: 85%}
.thumb {
cursor:default;
width:18px;
height:18px;
z-index: 9;
position: absolute;
left: 0px;
}
.bg {
position:absolute;
left:10px;
height:18px;
width:146px;
border: 0px solid #aaaaaa;
}
.bg span, .bg p {
cursor:default;
position: relative;
font-size: 2px;
overflow: hidden;
color: #aaaaaa;
top: 4px;
height: 10px;
width: 4px;
display: block;
float:left;
}
.bg span {
border-top:1px solid #cccccc;
border-bottom:1px solid #cccccc;
}
.bg .lb {
border-left:1px solid #cccccc;
}
.bg .rb {
border-right:1px solid #cccccc;
}
#valdiv { position:absolute; top: 100px; left:10px; }
#rBG {top:30px}
#gBG {top:50px}
#bBG {top:70px}
#swatch {
position:absolute;
left:160px;
top:34px;
height:50px;
width:50px;
border:1px solid #aaaaaa;
}
</style>
<!-- Nav and logger start -->
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/logger/logger.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./examples/slider/js/color.js" ></script>
<script type="text/javascript" src="./examples/slider/js/key.js" ></script>
<script type="text/javascript" src="./build/slider/slider-debug.js" ></script></head>
<body>
<div id="pageTitle"><h3>Slider Widget</h3></div>
<div id="container">
<div id="containerTop">
<div id="header"><img id="ylogo" src="./examples/slider/img/logo.gif" /></div>
<div id="main">
<!-- Nav and logger start -->
<style type="text/css">
#logButtonHeader input { font-size: 80% }
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {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 {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.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 */
</style>
<div id="rightbar">
<div id="rightBarPad">
<script type="text/javascript">
YAHOO.example.logApp = function() {
return {
init: function() {
if (YAHOO.widget.Logger) {
var reader = new YAHOO.widget.LogReader( "logDiv",
{ newestOnTop: true, height: "400px" } );
reader._onClickPauseBtn(null, reader);
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
</script>
<div id="logDiv"></div>
</div>
</div>
<!-- Nav and logger end -->
<div id="content">
<div class="newsItem">
<h3>RGB Slider</h3>
<p>
The RGB slider implements three slider controls to generate a
RGB color. The background color of each slider is also
dynamically modified to reflect the colors that could be
generated by moving a single slider.
</p>
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
</div>
</div>
</div>
</div>
</div>
<div id="ddRGB" class="dragPanel">
<h4 id="pickerHandle"> </h4>
<div id="rBG" class="bg">
<div id="rthumb" class="thumb"><img src="./examples/slider/img/vline.png" /></div>
</div>
<div id="gBG" class="bg">
<div id="gthumb" class="thumb"><img src="./examples/slider/img/vline.png" /></div>
</div>
<div id="bBG" class="bg">
<div id="bthumb" class="thumb"><img src="./examples/slider/img/vline.png" /></div>
</div>
<div id="valdiv">
<form name="rgbform" onsubmit="return userUpdate()">
<table border="0">
<tr>
<td>
RGB
</td>
<td>
<input name="rval" id="rval" type="text" value="0" size="4" maxlength="4" />
<input name="gval" id="gval" type="text" value="0" size="4" maxlength="4" />
<input name="bval" id="bval" type="text" value="0" size="4" maxlength="4" />
</td>
<td>
<input type="button" value="Update" onclick="userUpdate()" />
</td>
</tr>
<tr>
<td>
Hex: #
</td>
<td>
<input name="hexval" id="hexval" type="text" value="" size="6" maxlength="6" />
</td>
<td>
<input type="button" value="Update" onclick="userUpdate(true)" />
</td>
</tr>
<tr>
<td>
<input type="button" value="Reset" onclick="userReset()" />
</td>
</tr>
</table>
</form>
</div>
<div id="swatch"> </div>
</div>
<script type="text/javascript">
var r, g, b;
var dd;
function init() {
rgbInit();
}
function rgbInit() {
r = YAHOO.widget.Slider.getHorizSlider("rBG", "rthumb", 0, 128);
r.onChange = function(newVal) { listenerUpdate("r", newVal*2); };
g = YAHOO.widget.Slider.getHorizSlider("gBG", "gthumb", 0, 128);
g.onChange = function(newVal) { listenerUpdate("g", newVal*2); };
b = YAHOO.widget.Slider.getHorizSlider("bBG", "bthumb", 0, 128);
b.onChange = function(newVal) { listenerUpdate("b", newVal*2); };
initColor();
dd = new YAHOO.util.DD("ddRGB");
dd.setHandleElId("pickerHandle");
}
window.onload = init;
function initColor() {
var ch = " ";
d = document.createElement("P");
d.className = "rb";
r.getEl().appendChild(d);
d = document.createElement("P");
d.className = "rb";
g.getEl().appendChild(d);
d = document.createElement("P");
d.className = "rb";
b.getEl().appendChild(d);
for (var i=0; i<34; i++) {
d = document.createElement("SPAN");
d.id = "rBG" + i
// d.innerHTML = ch;
r.getEl().appendChild(d);
d = document.createElement("SPAN");
d.id = "gBG" + i
// d.innerHTML = ch;
g.getEl().appendChild(d);
d = document.createElement("SPAN");
d.id = "bBG" + i
// d.innerHTML = ch;
b.getEl().appendChild(d);
}
d = document.createElement("P");
d.className = "lb";
r.getEl().appendChild(d);
d = document.createElement("P");
d.className = "lb";
g.getEl().appendChild(d);
d = document.createElement("P");
d.className = "lb";
b.getEl().appendChild(d);
userUpdate();
}
function updateSliderColors() {
var curr, curg, curb;
curr = Math.min(r.getValue() * 2, 255);
curg = Math.min(g.getValue() * 2, 255);
curb = Math.min(b.getValue() * 2, 255);
YAHOO.log("updateSliderColor " + curr + ", " + curg + ", " + curb);
var d;
for (var i=0; i<34; i++) {
d = document.getElementById("rBG" + i);
d.style.backgroundColor =
"rgb(" + (i*8) + "," + curg + "," + curb + ")";
d = document.getElementById("gBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + (i*8) + "," + curb + ")";
d = document.getElementById("bBG" + i);
d.style.backgroundColor =
"rgb(" + curr + "," + curg + "," + (i*8) + ")";
}
document.getElementById("swatch").style.backgroundColor =
"rgb(" + curr + "," + curg + "," + curb + ")";
document.getElementById("hexval").value =
YAHOO.util.Color.rgb2hex(curr, curg, curb);
}
function listenerUpdate(whichSlider, newVal) {
if (newVal == 256) {
newVal = 255;
}
document.getElementById(whichSlider + "val").value = newVal;
updateSliderColors();
}
function userUpdate(isHex) {
var v;
var f = document.forms["rgbform"];
if (isHex) {
var hexval = f["hexval"].value;
// shorthand #369
if (hexval.length == 3) {
var newval = "";
for (var i=0;i<3;i++) {
var a = hexval.substr(i, 1);
newval += a + a;
}
hexval = newval;
}
YAHOO.log("hexval:" + hexval);
if (hexval.length != 6) {
alert("illegal hex code: " + hexval);
} else {
var rgb = YAHOO.util.Color.hex2rgb(hexval);
// alert(rgb.toString());
if (YAHOO.util.Color.isValidRGB(rgb)) {
f["rval"].value = rgb[0];
f["gval"].value = rgb[1];
f["bval"].value = rgb[2];
}
}
}
// red
v = parseFloat(f["rval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, r: " + v);
r.setValue(Math.round(v) / 2);
v = parseFloat(f["gval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, g: " + g);
g.setValue(Math.round(v) / 2);
v = parseFloat(f["bval"].value);
v = ( isNaN(v) ) ? 0 : Math.round(v);
YAHOO.log("setValue, b: " + b);
b.setValue(Math.round(v) / 2);
updateSliderColors();
return false;
}
function userReset() {
var v;
var f = document.forms["rgbform"];
r.setValue(0);
g.setValue(0);
b.setValue(0);
}
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Default LogReader Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Logger Widget :: Reading Logs</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="./build/logger/assets/logger.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">
.yui-log .mytype {background-color:#FF99CC;}
</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> :: Reading Logs</h1>
</div>
<div id="bd">
<!-- Content begins -->
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<h3>Default LogReader Example</h3>
<p>With just a few lines of code, you can put a LogReader on any web
page that displays log messages built into the YUI Library or custom
log messages that you can insert into your own code. This example takes
advantage of the YUI Library"s Drag and Drop utility to make the
LogReader draggable.</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>
</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">
/* A style was defined for a custom category.
By convention, it is defined with narrow-scope
selectors to achieve namespacing*/
.yui-log .mytype {background-color:#FF99CC;}
</style>
</head>
<body>
<!-- No custom markup was defined -->
<script type="text/javascript">
myLogReader1 = new YAHOO.widget.LogReader();
myLogReader2 = new YAHOO.widget.LogReader();
myLogReader2.newestOnTop = false;
myLogReader2.setTitle("Logger Console: Oldest > on > Top!");
</script>
</body>
</textarea>
</div>
<!-- Code sample ends -->
</div>
</div>
</div>
<!-- Content ends -->
</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/dragdrop/dragdrop.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(null, {verboseOutput:false});
myLogReader1.setTitle("Compact Output!");
myLogReader2 = new YAHOO.widget.LogReader(null, {newestOnTop:false});
myLogReader2.setTitle("Logger Console: Oldest > on > Top!");
},
hideAllReaders: function() {
myLogReader1.hide();
myLogReader2.hide();
},
showAllReaders: function() {
myLogReader1.show();
myLogReader2.show();
}
};
}();
YAHOO.util.Event.addListener(this,"load",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>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
JavaScript log debugger
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo! UI Library - Tree Control</title>
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/screen.css">
</head>
<body onload="treeInit()">
<link rel="stylesheet" type="text/css" href="./examples/treeview/css/folders/tree.css">
<div id="pageTitle">
<h3>Tree Control</h3>
</div>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<!-- The following are required for the logger -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- End logger reqs -->
<script type="text/javascript" src="./build/treeview/treeview-debug.js" ></script>
<style type="text/css">
/* logger default styles */
/* font size is controlled here: default 77% */
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
/* width is controlled here: default 31em */
.yui-log {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 {padding:.5em;background-color:#575757;color:#FFF;}
/* height is controlled here: default 20em*/
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
.yui-log .yui-log-ft .yui-log-categoryfilters {}
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
.yui-log .yui-log-filtergrp {margin-right:.5em;}
.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 */
</style>
<div id="container">
<img class="ylogo" src="./examples/treeview/img/logo.gif" alt="" />
<div id="containerTop">
<div id="header">
<h1>
</h1>
<h4> </h4>
</div>
<div id="main">
<div id="rightbar">
<div id="rightBarPad">
<h3>Examples</h3>
</div>
<script type="text/javascript">
YAHOO.example.logApp = function() {
var divId;
return {
init: function(p_divId, p_toggleElId, p_clearElId) {
divId = p_divId
},
onload: function() {
if (YAHOO.widget.Logger) {
new YAHOO.widget.LogReader( "logDiv", { height: "400px" } );
}
}
};
} ();
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.onload);
</script>
<div id="logDiv"></div>
</div>
</div>
<div id="content">
<form name="mainForm" action="javscript:;">
<div class="newsItem">
<h3>Folders</h3>
<p>
</p>
<div id="expandcontractdiv">
<a href="javascript:tree.expandAll()">Expand all</a>
<a href="javascript:tree.collapseAll()">Collapse all</a>
</div>
<div id="treeDiv1"></div>
</div>
</form>
</div>
<div id="footerContainer">
<div id="footer">
<p> </p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tree;
var nodes = new Array();
var nodeIndex;
function treeInit() {
buildRandomTextNodeTree();
}
function buildRandomTextNodeTree() {
tree = new YAHOO.widget.TreeView("treeDiv1");
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
buildRandomTextBranch(tmpNode);
}
tree.draw();
}
var callback = null;
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Using Logger to Debug YUI Library Components
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Logger Widget :: YUI Integration Example</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="./build/logger/assets/logger.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">
#statesmod {position:relative;}
#statesautocomplete{position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
#statesinput {width:100%;height:1.4em;}
#statescontainer {position:absolute;top:1.7em;width:100%}
#statescontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
#statescontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
#statescontainer ul {padding:5px 0;width:100%;}
#statescontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
#statescontainer li.yui-ac-highlight {background:#ff0;}
#statescontainer li.yui-ac-prehighlight {background:#FFFFCC;}
</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> :: YUI Integration Example</h1>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<!-- Content begins -->
<h3>Using Logger to Debug YUI Library Components</h3>
<p>In this example, we have set up an instance of AutoComplete. By using the
debug build of AutoComplete source code, we are able to instantiate a
LogReader on this page and read the messages generated from the component.
In order to place the LogReader in a convenient spot, we pass in a custom
bottom value into its constructor.</p>
<!-- AutoComplete begins -->
<div id="statesmod">
<form onsubmit="return validateForm();">
<h3>Find a state:</h3>
<div id="statesautocomplete">
<input id="statesinput">
<div id="statescontainer"></div>
</div>
</form>
</div>
<!-- AutoComplete ends -->
</div>
<!-- Content 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">
<script type="text/javascript">
///No custom CSS styles were defined.
// No custom markup was defined.
// We have first included the debug builds of YUI components
// event-debug.js and autocomplete-debug.js
// Then we can see log messages being output to our LogReader
var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
</script>
</textarea>
</div>
<!-- Code sample ends -->
</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-debug.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<script type="text/javascript" src="./build/autocomplete/autocomplete-debug.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- Library ends -->
<!-- In-memory JS array begins-->
<script type="text/javascript">
var statesArray = [
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachusetts",
"Michigan",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Dakota",
"North Carolina",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Tennessee",
"Texas",
"Utah",
"Vermont",
"Virginia",
"Washington",
"West Virginia",
"Wisconsin",
"Wyoming"
];
</script>
<!-- In-memory JS array ends-->
<script type="text/javascript">
YAHOO.example.AutoCompleteLogger = function() {
return {
validateForm: function() {
// Validate form inputs here
return false;
},
init: function() {
// Instatiate LogReader
var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
// Instantiate DataSource
var oACDS = new YAHOO.widget.DS_JSArray(statesArray);
// Instantiate AutoComplete
var oAutoComp = new YAHOO.widget.AutoComplete("statesinput","statescontainer", oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.AutoCompleteLogger.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Writing Log Messages From Your Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Logger Widget :: Writing Logs</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="./build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="./examples/logger/css/examples.css">
<link type="text/css" rel="stylesheet" href="./docs/assets/dpSyntaxHighlighter.css">
</head>
<body>
<div id="doc" class="yui-t7">
<div id="hd">
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Writing Logs</h1>
</div>
<div id="bd">
<!-- Content begins -->
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<div id="content">
<h3>Writing Log Messages From Your Code</h3>
<p>In this example, we instanatiate a simple LogReader to display log
messages. We use the global method YAHOO.log() to write simple messages,
and we also instantiate a LogWriter instance to write messages from a
custom-named source.</p>
<p><input id="yui-log-inputinfo" class="yui-log-input" type="text" value="Log an info message.">
<button id="btn_loginfo">Log this message</button></p>
<p><input id="yui-log-inputwarn" class="yui-log-input" type="text" value="Log a warning.">
<button id="btn_logwarn">Log this message</button></p>
<p><input id="yui-log-inputerror" class="yui-log-input" type="text" value="Log an error.">
<button id="btn_logerror">Log this message</button></p>
<p><input id="yui-log-inputtime" class="yui-log-input" type="text" value="Log a timing message.">
<button id="btn_logtime">Log this message</button></p>
<p><input id="yui-log-inputwindow" class="yui-log-input" type="text" value="Log a window error.">
<button onclick="someUndefinedFunction();">Log this message</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="myCategory">
<button id="btn_logcustom">Log this message with this category</button></p>
<p><input id="yui-log-inputsource" class="yui-log-input" type="text" value="SomeClass instance1">
<button id="btn_logsource">Generate some messages from a named source</button></p>
</div>
<!-- Content 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">
<script type="text/javascript">
//No custom CSS styles were defined
//No custom markup was defined
// Instantiate a logreader and a logwriter
myLogReader = new YAHOO.widget.LogReader(null,{top:"10%",right:"10px"});
myLogWriter = new YAHOO.widget.LogWriter("myWriter");
// You can call the global function YAHOO.log() anytime, anywhere
YAHOO.log("Yahoo! is great"); // defaults to type "info"
YAHOO.log("Here is a warning", "warn");
YAHOO.log("Some error has occurred", "error");
YAHOO.log("Use timers to profile your code", "time");
myLogWriter.log("something","info");
myLogWriter.log("something","warn");
myLogWriter.log("something","error");
myLogWriter.log("something","time");
myLogWriter.log("something","custom");
</script>
</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/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="./build/logger/logger.js"></script>
<!-- Library ends -->
<script type="text/javascript">
YAHOO.example.LogWriter = function() {
var myLogReader;
var myLogWriter;
return {
init: function() {
// Instantiate a logreader and a logwriter
myLogReader = new YAHOO.widget.LogReader(null,{top:"10%",right:"10px"});
myLogWriter = new YAHOO.widget.LogWriter("myWriter");
// You can call the global function YAHOO.log() anytime, anywhere
YAHOO.log("Yahoo! is great"); // defaults to type "info"
YAHOO.log("Here is a warning", "warn");
YAHOO.log("Some error has occurred", "error");
YAHOO.log("Use timers to profile your code", "time");
// Define interesting moments that cause log messages to be written
var oSelf = YAHOO.example.LogWriter;
YAHOO.util.Event.addListener(document.getElementById("btn_loginfo"),"click",oSelf.onLogInfoClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logwarn"),"click",oSelf.onLogWarnClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logerror"),"click",oSelf.onLogErrorClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logtime"),"click",oSelf.onLogTimeClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logcustom"),"click",oSelf.onLogCustomClick);
YAHOO.util.Event.addListener(document.getElementById("btn_logsource"),"click",oSelf.onSourceWriterClick);
},
hideAllReaders: function() {
myLogReader.hide();
},
showAllReaders: function() {
myLogReader.show();
},
createNewLogWriter: function(source) {
// You can instantiate your own named logwriter and use it to write log messages
var newWriter = new YAHOO.widget.LogWriter(source);
newWriter.log("Doing great!"); // defaults to type "info"
newWriter.log("Giving a warning", "warn");
newWriter.log("Throwing an error", "error");
newWriter.log("Timing some code", "time");
},
onSourceWriterClick: function() {
YAHOO.example.LogWriter.createNewLogWriter(document.getElementById("yui-log-inputsource").value);
},
onLogInfoClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputinfo").value,"info");
},
onLogWarnClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputwarn").value,"warn");
},
onLogErrorClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputerror").value,"error");
},
onLogTimeClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputtime").value,"time");
},
onLogCustomClick: function() {
myLogWriter.log(document.getElementById("yui-log-inputcustommsg").value,document.getElementById("yui-log-inputcustomtype").value);
}
};
}();
YAHOO.util.Event.addListener(this,"load",YAHOO.example.LogWriter.init);
</script>
<script type="text/javascript" src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code");
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
