Mega Code Archive

 
Categories / JavaScript DHTML / Mochkit
 

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.com/">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>