4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
210 lines
9.4 KiB
HTML
210 lines
9.4 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>AutoComplete Widget :: Customized XML Implementation</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="../../docs/assets/dpSyntaxHighlighter.css">
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
#flickrmod {position:relative;padding:1em;}
|
|
|
|
#flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
|
|
|
|
#flickrinput {position:absolute;width:100%;height:1.4em;}
|
|
|
|
#flickrcontainer {position:absolute;top:1.7em;width:100%;}
|
|
|
|
#flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
|
|
|
|
#flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
|
|
|
#flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;}
|
|
|
|
#flickrcontainer ul {padding:5px 0;width:100%;}
|
|
|
|
#flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
|
|
|
#flickrcontainer li.yui-ac-highlight {background:#ff0;}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<div id="hd">
|
|
|
|
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">AutoComplete Widget</a> :: XML Data Flickr Web Services</h1>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="bd">
|
|
|
|
<!-- Logger begins -->
|
|
|
|
<div id="logger"></div>
|
|
|
|
<!-- Logger ends -->
|
|
|
|
|
|
|
|
<!-- Content begins -->
|
|
|
|
<h3>DataSource</h3>
|
|
|
|
<p>This DataSource instance points to Flickr Web Services, via a simple PHP
|
|
|
|
proxy. The DataSource schema is defined for XML data. In order to be
|
|
|
|
compatible with the Flickr application, the scriptQueryParameter has been
|
|
|
|
customized to be "tags", and scriptQueryAppend has been defined to pass in
|
|
|
|
additional arguments. Finally, the cache has been disabled so that each
|
|
|
|
query is forced to make a trip to the live source.</p>
|
|
|
|
|
|
|
|
<h3>AutoComplete</h3>
|
|
|
|
<p>This AutoComplete instance defines a robust formatResult() function that
|
|
|
|
formats the result data into HTML markup that displays an image from Flickr
|
|
|
|
and its title. The autoHighlight feature has additionally been disabled.</p>
|
|
|
|
|
|
|
|
<!-- AutoComplete begins -->
|
|
|
|
<div id="flickrmod">
|
|
|
|
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
|
|
|
|
<h2>Enter Flickr tags to find a photo (separate with commas):</h2>
|
|
|
|
<div id="flickrautocomplete">
|
|
|
|
<input id="flickrinput">
|
|
|
|
<div id="flickrcontainer"></div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<!-- AutoComplete ends -->
|
|
|
|
|
|
|
|
<!-- Sample code begins -->
|
|
|
|
<div id="code">
|
|
|
|
<h3>Sample Code</h3>
|
|
|
|
|
|
|
|
<p>CSS:</p>
|
|
|
|
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
|
|
#flickrmod {position:relative;padding:1em;}
|
|
|
|
#flickrautocomplete {position:relative;margin:1em;width:40%;}/* set width of widget here*/
|
|
|
|
#flickrinput {position:absolute;width:100%;height:1.4em;}
|
|
|
|
#flickrcontainer {position:absolute;top:1.7em;width:100%;}
|
|
|
|
#flickrcontainer .yui-ac-content {position:absolute;width:100%;height:30em;border:1px solid #404040;background:#fff;overflow:auto;overflow-x:hidden;z-index:9050;}
|
|
|
|
#flickrcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
|
|
|
|
#flickrcontainer .yui-ac-flickrImg {width:6em;height:6em;padding:.1em;vertical-align:middle;}
|
|
|
|
#flickrcontainer ul {padding:5px 0;width:100%;}
|
|
|
|
#flickrcontainer li {padding:0 5px;cursor:default;white-space:nowrap;}
|
|
|
|
#flickrcontainer li.yui-ac-highlight {background:#ff0;}
|
|
|
|
</textarea>
|
|
|
|
|
|
|
|
<p>Markup:</p>
|
|
|
|
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
|
|
<!-- AutoComplete begins -->
|
|
|
|
<div id="flickrmod">
|
|
|
|
<form onsubmit="return YAHOO.example.ACFlickr.validateForm();">
|
|
|
|
<h2>Enter Flickr tags to find a photo (separate with commas):</h2>
|
|
|
|
<div id="flickrautocomplete">
|
|
|
|
<input id="flickrinput">
|
|
|
|
<div id="flickrcontainer"></div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<!-- AutoComplete ends -->
|
|
|
|
</textarea>
|
|
|
|
|
|
|
|
<p>JavaScript:</p>
|
|
|
|
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
|
|
// Instantiate an XHR DataSource and define schema as an array:
|
|
|
|
// ["ResultNodeName",
|
|
|
|
// "QueryKeyAttributeOrNodeName",
|
|
|
|
// "AdditionalParamAttributeOrNodeName1",
|
|
|
|
// ...
|
|
|
|
// "AdditionalParamAttributeOrNodeNameN"]
|
|
|
|
oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",
|
|
|
|
["photo", "title", "id", "owner", "secret", "server"]);
|
|
|
|
oACDS.scriptQueryParam = "tags";
|
|
|
|
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;
|
|
|
|
oACDS.maxCacheEntries = 0;
|
|
|
|
oACDS.scriptQueryAppend = "method=flickr.photos.search";
|
|
|
|
|
|
|
|
// Instantiate AutoComplete
|
|
|
|
oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);
|
|
|
|
oAutoComp.autoHighlight = false;
|
|
|
|
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
|
|
|
// This was defined by the schema array of the data source
|
|
|
|
var sTitle = oResultItem[0];
|
|
|
|
var sId = oResultItem[1];
|
|
|
|
var sOwner = oResultItem[2];
|
|
|
|
var sSecret = oResultItem[3];
|
|
|
|
var sServer = oResultItem[4];
|
|
|
|
var sUrl = "http://static.flickr.com/" +
|
|
|
|
sServer +
|
|
|
|
"/" +
|
|
|
|
sId +
|
|
|
|
"_" +
|
|
|
|
sSecret +
|
|
|
|
"_s.jpg";
|
|
|
|
var sMarkup = "<img src='" + sUrl + "' class='yui-ac-flickrImg'> " + sTitle;
|
|
|
|
return (sMarkup);
|
|
|
|
};
|
|
|
|
</textarea>
|
|
|
|
</div>
|
|
|
|
<!-- Code sample ends -->
|
|
|
|
</div>
|
|
|
|
<!-- Content ends -->
|
|
|
|
|
|
|
|
<!-- 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/connection/connection.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 -->
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
YAHOO.example.ACFlickr = function() {
|
|
|
|
var mylogger;
|
|
|
|
var oACDS;
|
|
|
|
var oAutoComp;
|
|
|
|
|
|
|
|
return {
|
|
|
|
init: function() {
|
|
|
|
//Logger
|
|
|
|
mylogger = new YAHOO.widget.LogReader("logger");
|
|
|
|
|
|
|
|
// Instantiate an XHR DataSource and define schema as an array:
|
|
|
|
// ["ResultNodeName",
|
|
|
|
// "QueryKeyAttributeOrNodeName",
|
|
|
|
// "AdditionalParamAttributeOrNodeName1",
|
|
|
|
// ...
|
|
|
|
// "AdditionalParamAttributeOrNodeNameN"]
|
|
|
|
oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",
|
|
|
|
["photo", "title", "id", "owner", "secret", "server"]);
|
|
|
|
oACDS.scriptQueryParam = "tags";
|
|
|
|
oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;
|
|
|
|
oACDS.maxCacheEntries = 0;
|
|
|
|
oACDS.scriptQueryAppend = "method=flickr.photos.search";
|
|
|
|
|
|
|
|
// Instantiate AutoComplete
|
|
|
|
oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);
|
|
|
|
oAutoComp.autoHighlight = false;
|
|
|
|
oAutoComp.formatResult = function(oResultItem, sQuery) {
|
|
|
|
// This was defined by the schema array of the data source
|
|
|
|
var sTitle = oResultItem[0];
|
|
|
|
var sId = oResultItem[1];
|
|
|
|
var sOwner = oResultItem[2];
|
|
|
|
var sSecret = oResultItem[3];
|
|
|
|
var sServer = oResultItem[4];
|
|
|
|
var sUrl = "http://static.flickr.com/" +
|
|
|
|
sServer +
|
|
|
|
"/" +
|
|
|
|
sId +
|
|
|
|
"_" +
|
|
|
|
sSecret +
|
|
|
|
"_s.jpg";
|
|
|
|
var sMarkup = "<img src='" + sUrl + "' class='yui-ac-flickrImg'> " + sTitle;
|
|
|
|
return (sMarkup);
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
validateForm: function() {
|
|
|
|
// Validate form inputs here
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}();
|
|
|
|
|
|
|
|
YAHOO.util.Event.addListener(this,'load',YAHOO.example.ACFlickr.init);
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/javascript" src="../../docs/assets/dpSyntaxHighlighter.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
|
|
</script>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|