JavaScript DHTML/Mochkit/log — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Версия 10:00, 26 мая 2010
MochiKit.LoggingPane
<!--
MochiKit is dual-licensed software. It is available under the terms of the
MIT License, or the Academic Free License version 2.1. The full text of
each license is included below.
-->
<!-- Code revised from MochiKit demo code -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Demo of MochiKit.LoggingPane</title>
<style type="text/css">
h1 {
font-size: 2em;
color: #4B4545;
text-align: center;
}
table.datagrid {
width: 100%;
border-collapse: collapse;
}
table.datagrid thead th {
text-align: left;
background-color: #4B4545;
background-repeat: no-repeat;
background-position: right center;
color: white;
font-weight: bold;
padding: .3em .7em;
font-size: .9em;
padding-right: 5px;
background-repeat: no-repeat;
background-position: 95% right;
}
table.datagrid thead th a {
color: white;
text-decoration: none;
font-size: 1.0em;
background-repeat: no-repeat;
background-position: center right;
padding-right: 15px;
}
table.datagrid thead th.over {
background-color: #746B6B;
cursor: pointer;
}
table.datagrid tbody th {
font-weight: bold;
}
table.datagrid tbody td, table.datagrid tbody th {
text-align: left;
padding: .3em .7em;
border-bottom: 1px solid #eee;
}
table.datagrid tbody tr.alternate td, table.datagrid tbody tr.alternate th {
background-color: #f1f1f1;
}
table.datagrid tfoot td, table.datagrid tfoot th {
background-color: #FFFEE3;
color: #4B4545;
padding: .5em;
font-weight: bold;
border-top: 2px solid #4B4545;
}
table.datagrid tfoot th { text-align: left; }
table.datagrid tfoot td { }
.invisible { display: none; }
input.textbox, textarea { border: 1px solid #CCCCCC; font-size: .95em; padding: 2px 4px; margin-top: .3em; }
input.textbox:focus, textarea:focus { background-color: #FFFEE3; }
.highlight { font-weight: bold; };
form { margin: 0; padding: 0; }
fieldset { border: none; margin: 0; padding: 0; }
fieldset label { font-weight: bold; color: #4B4545; }
fieldset .field { margin-bottom: 1em; }
label.error { color: red; }
</style>
<script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js"></script>
<script type="text/javascript">
// rewrite the view-source links
addLoadEvent(function () {
var elems = getElementsByTagAndClassName("A", "view-source");
var page = "logging_pane/";
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
var href = elem.href.split(/\//).pop();
elem.target = "_blank";
elem.href = "../view-source/view-source.html#" + page + href;
}
});
</script>
</head>
<body>
<h1>MochiKit.LoggingPane</h1>
<div>
<p>
Demonstrates <a href="http://mochikit.ru/">MochiKit</a>"s
<a href="../../doc/html/lib/MochiKit/Logging.html">MochiKit.Logging</a>
and <a href="../../doc/html/lib/MochiKit/LoggingPane.html">MochiKit.LoggingPane</a>.
</p>
<p>
Click one of the Logging Panes to pop up a view, and then
start clicking on Logging Actions to see it in action!
</p>
</div>
<div>
Logging Panes:
<ul>
<li><a href="javascript:logger.debuggingBookmarklet();">Debugging Bookmarklet</a> - Pop-up with LoggingPane</li>
<li><a href="javascript:void(createLoggingPane(true));">Inline LoggingPane</a></li>
</ul>
</div>
<div>
Logging Actions:
<ul>
<li><a href="javascript:logDebug("a DEBUG level message");">logDebug(...)</a></li>
<li><a href="javascript:log("an INFO level message");">log(...)</a></li>
<li><a href="javascript:logWarning("a WARNING level message");">logWarning(...)</a></li>
<li><a href="javascript:logError("an ERROR level message");">logError(...)</a></li>
<li><a href="javascript:logFatal("a FATAL level message");">logFatal(...)</a></li>
</ul>
<div>
View Source:
<ul>
<li><a href="logging_pane.js" class="view-source">logging_pane.js</a></li>
<li><a href="index.html" class="view-source">index.html</a></li>
</ul>
</div>
</body>
</html>