186 lines
6.6 KiB
HTML
186 lines
6.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Example: Logger - YUI Integration (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/grids/grids.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="../../docs/assets/dpSyntaxHighlighter.css">
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
#statesmod {position:relative;}
|
|
|
|
#statesautocomplete{position:relative;width:15em;margin-bottom:1em;}/* set width of widget here*/
|
|
|
|
#statesinput {_position:absolute;width:100%;height:1.4em;} /* abs for ie quirks */
|
|
|
|
#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="doc" class="yui-t7">
|
|
|
|
<div id="hd">
|
|
|
|
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">Logger Widget</a> :: YUI Integration</h1>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="bd">
|
|
|
|
<div id="yui-main">
|
|
|
|
<div class="yui-b">
|
|
|
|
<div class="yui-gc">
|
|
|
|
<div class="yui-u first">
|
|
|
|
<!-- Content begins -->
|
|
|
|
<h3>Using Logger to Debug YUI Library Components</h3>
|
|
|
|
<p>In this example, we have set up an instance of the YUI
|
|
|
|
AutoComplete widget. By using the debug build of the
|
|
|
|
AutoComplete source code, we can read logging messages generated
|
|
|
|
from the component in a LogReader. By passing in custom
|
|
|
|
configuration values into its constructor, we are able
|
|
|
|
to set custom style attributes on the LogReader.</p>
|
|
|
|
|
|
|
|
<!-- AutoComplete begins -->
|
|
|
|
<div id="statesmod">
|
|
|
|
<form onsubmit="return validateForm();">
|
|
|
|
<h3>Find a state:</h3>
|
|
|
|
<div id="statesautocomplete">
|
|
|
|
<input id="statesinput">
|
|
|
|
<div id="statescontainer"></div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<!-- AutoComplete ends -->
|
|
|
|
</div>
|
|
|
|
<!-- Content ends -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="yui-g">
|
|
|
|
<!-- Sample code begins -->
|
|
|
|
<div id="code">
|
|
|
|
<h3>Sample Code</h3>
|
|
|
|
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
|
|
<script type="text/javascript">
|
|
|
|
///No custom CSS styles were defined.
|
|
|
|
|
|
|
|
// No custom markup was defined.
|
|
|
|
|
|
|
|
// We have first included the debug builds of YUI components
|
|
|
|
// event-debug.js and autocomplete-debug.js
|
|
|
|
|
|
|
|
// Then we can see log messages being output to our LogReader
|
|
|
|
var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
|
|
|
|
</script>
|
|
|
|
</textarea>
|
|
|
|
</div>
|
|
|
|
<!-- Code sample ends -->
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Libary begins -->
|
|
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
|
|
|
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
|
|
|
<script type="text/javascript" src="../../build/event/event-debug.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() {
|
|
|
|
// Instatiate LogReader
|
|
|
|
var oLogReader = new YAHOO.widget.LogReader(null,{top:"4em",fontSize:"92%",width:"30em",height:"20em"});
|
|
|
|
|
|
|
|
// 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="../../docs/assets/dpSyntaxHighlighter.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|