JavaScript DHTML/Mochkit/log

Материал из Web эксперт
Перейти к: навигация, поиск

MochiKit.LoggingPane

   <source lang="html4strict">


<!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>

MochiKit.LoggingPane

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>.

Click one of the Logging Panes to pop up a view, and then start clicking on Logging Actions to see it in action! 

           Logging Panes:
  • <a href="javascript:logger.debuggingBookmarklet();">Debugging Bookmarklet</a> - Pop-up with LoggingPane
  • <a href="javascript:void(createLoggingPane(true));">Inline LoggingPane</a>
           Logging Actions:
  • <a href="javascript:logDebug("a DEBUG level message");">logDebug(...)</a>
  • <a href="javascript:log("an INFO level message");">log(...)</a>
  • <a href="javascript:logWarning("a WARNING level message");">logWarning(...)</a>
  • <a href="javascript:logError("an ERROR level message");">logError(...)</a>
  • <a href="javascript:logFatal("a FATAL level message");">logFatal(...)</a>
           View Source:
  • <a href="logging_pane.js" class="view-source">logging_pane.js</a>
  • <a href="index.html" class="view-source">index.html</a>
   </body>

</html>

</source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Mochkit/log&oldid=3233»