added YUI and YUI-ext
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
This commit is contained in:
JT Smith
parent
6bf329d68d
commit
4f68a0933c
1026 changed files with 331404 additions and 60 deletions
210
www/extras/yui/examples/autocomplete/flickr_xml.html
Normal file
210
www/extras/yui/examples/autocomplete/flickr_xml.html
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue