JavaScript DHTML/YUI Library/Log

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

Log basic message

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body class="yui-skin-sam">

<a href="#" id="loglink">Click here</a> to log a simple message.

<script type="text/javascript" src="yui_2.7.0b-lib/yuiloader/yuiloader.js"></script> <script type="text/javascript"> var loader = new YAHOO.util.YUILoader(); loader.insert({

   require: ["fonts","dragdrop","logger"],
   base: "yui_2.7.0b-lib/",
   onSuccess: function(loader) {
           YAHOO.util.Event.addListener(YAHOO.util.Dom.get("loglink"), "click", function(e) {
               YAHOO.util.Event.stopEvent(e);
               YAHOO.log("This is a simple log message.");
           });
           // Put a LogReader on your page
           this.myLogReader = new YAHOO.widget.LogReader();
   }

}); </script> </body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Turn a DIV tag to a log panel

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>Handling Calendar Events</title> <style type="text/css"> /*margin and padding on body element

 can introduce errors in determining
 element position and are not recommended;
 we turn them off as a foundation for YUI
 CSS treatments. */

body {

 margin:0;
 padding:0;

} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/fonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/calendar/assets/skins/sam/calendar.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/calendar/calendar-min.js"></script>


<style type="text/css">

 #cal1Container {
    margin:1em;
 }
 #caleventlog {
   float:left;
   width:35em;
   margin:1em;
   background-color:#eee;
   border:1px solid #000;
 }
 #caleventlog .bd {
   overflow:auto;
   height:20em;
   padding:5px;
 }
 #caleventlog .hd {
   background-color:#aaa;
   border-bottom:1px solid #000;
   font-weight:bold;
   padding:2px;
 }
 #caleventlog .entry {
   margin:0;  
 }

</style>

</head> <body class=" yui-skin-sam">

Handling Calendar Events

The Calendar control exposes a number of CustomEvents, so that applications can listen for and react to interesting moments in the Calendar"s operation. This example demonstrates how to listen for the select and deselect events, which are fired whenever a date in the Calendar is selected or deselected.

<script type="text/javascript">

 YAHOO.namespace("example.calendar");
 YAHOO.example.calendar.init = function() {
   var eLog = YAHOO.util.Dom.get("evtentries");
   var eCount = 1;
   function logEvent(msg) {
eLog.innerHTML = "
<strong>" + eCount + ").</strong> " + msg + "
" + eLog.innerHTML;
     eCount++;
   }
   function dateToLocaleString(dt, cal) {
                 var wStr = cal.cfg.getProperty("WEEKDAYS_LONG")[dt.getDay()];
                 var dStr = dt.getDate();
                 var mStr = cal.cfg.getProperty("MONTHS_LONG")[dt.getMonth()];
                   var yStr = dt.getFullYear();
                 return (wStr + ", " + dStr + " " + mStr + " " + yStr);
   }
   function mySelectHandler(type,args,obj) {
     var selected = args[0];
     var selDate = this.toDate(selected[0]);
      
     logEvent("SELECTED: " + dateToLocaleString(selDate, this));
   };
   function myDeselectHandler(type, args, obj) {
     var deselected = args[0];
     var deselDate = this.toDate(deselected[0]);
     logEvent("DESELECTED: " + dateToLocaleString(deselDate, this));
   };
   YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
   YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler, YAHOO.example.calendar.cal1, true);
   YAHOO.example.calendar.cal1.deselectEvent.subscribe(myDeselectHandler, YAHOO.example.calendar.cal1, true);
   YAHOO.example.calendar.cal1.render();
 }
 YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);

</script>

Select/Deselect Events

</body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>


Use YUI log

   <source lang="html4strict">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css">

  1. statesautocomplete {width:20em;}

</style> </head> <body class="yui-skin-sam">

Type a state (will output log messages):

   <input id="statesinput">

<script type="text/javascript" src="yui_2.7.0b-assets/autocomplete-assets/js/states_jsfunction.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/yuiloader/yuiloader.js"></script> <script type="text/javascript"> var loader = new YAHOO.util.YUILoader(); loader.insert({

   require: ["autocomplete","logger"],
   base: "yui_2.7.0b-lib/",
   filter: "DEBUG",
   onSuccess: function(loader) {
       YAHOO.example.LogAutoComplete = new function() {
           // Instantiate LogReader
           this.oLogReader = new YAHOO.widget.LogReader();
           // Instantiate DataSource
           this.oACDS = new YAHOO.util.FunctionDataSource(getStates);
           // Instantiate AutoComplete
           this.oAutoComp = new YAHOO.widget.AutoComplete("statesinput","statescontainer", this.oACDS);
       };
   }

}); </script> </body> </html>


 </source>
   
  

<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>