175 lines
5.8 KiB
HTML
175 lines
5.8 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Example: Logger - Integrating with YUI Components (YUI Library)</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/logger/assets/logger.css">
|
|
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
|
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
|
|
|
<style type="text/css">
|
|
#bd p {width:50%;}
|
|
|
|
#statesmod {position:relative;margin-bottom:5em;}
|
|
#statesautocomplete{position:relative;width:15em;margin-bottom:0em;}/* set width of widget here*/
|
|
#statesinput {position:absolute;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="hd">
|
|
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: Integrating with YUI Components</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
<!-- Intro -->
|
|
<div id="intro">
|
|
<h3>Point to Debug Builds</h3>
|
|
<p>The debug builds of YUI components call YAHOO.log() to output log messages
|
|
that can help you integrate and debug code. In this example, the debug
|
|
builds of the Event Utility and the AutoComplete Widget will output
|
|
log messages as you interact with the widget.</p>
|
|
</div>
|
|
|
|
<!-- AutoComplete begins -->
|
|
<div id="statesmod">
|
|
<form onsubmit="return YAHOO.example.AutoCompleteLogger.validateForm();">
|
|
<h3>Type a state (will output log messages):</h3>
|
|
<div id="statesautocomplete">
|
|
<input id="statesinput">
|
|
<div id="statescontainer"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- AutoComplete ends -->
|
|
|
|
<!-- Sample code begins -->
|
|
<div class="code">
|
|
<h4>Sample Code</h4>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<body>
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event-debug.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/autocomplete/autocomplete-debug.js"></script>
|
|
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
|
<script type="text/javascript">
|
|
var myLogReader = new YAHOO.widget.LogReader();
|
|
</script>
|
|
</body>
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
|
|
</div>
|
|
|
|
<!-- Libary begins -->
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event-debug.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/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() {
|
|
// Instantiate LogReader
|
|
var oLogReader = new YAHOO.widget.LogReader();
|
|
|
|
// 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="../assets/dpSyntaxHighlighter.js"></script>
|
|
<script type="text/javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|