merging new yui
This commit is contained in:
JT Smith
parent
214a9673f9
commit
728eccc3cb
1638 changed files with 815363 additions and 0 deletions
193
www/extras/yui/examples/treeview/dynamic_tree_clean.html
Normal file
193
www/extras/yui/examples/treeview/dynamic_tree_clean.html
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
<!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>Dynamically Loading Node Data</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="../../build/fonts/fonts-min.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
|
||||
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
||||
<script type="text/javascript" src="../../build/event/event.js"></script>
|
||||
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
||||
<script type="text/javascript" src="../../build/treeview/treeview.js"></script>
|
||||
|
||||
|
||||
<!--begin custom header content for this example-->
|
||||
<style>
|
||||
#treeDiv1 {background: #fff; margin-top:1em; padding:1em; min-height:7em;}
|
||||
</style>
|
||||
<!--end custom header content for this example-->
|
||||
|
||||
</head>
|
||||
|
||||
<body class=" yui-skin-sam">
|
||||
|
||||
<h1>Dynamically Loading Node Data</h1>
|
||||
|
||||
<div class="exampleIntro">
|
||||
<p>In many cases, you'll want to avoid rendering your <a href="http://developer.yahoo.com/yui/treeview/">TreeView Control</a> with a full dataset. Rather, you'll want to load all visible nodes immediately and then retrieve data only when needed for nodes that aren't visible when the control is first loaded. This example shows you how to do that.</p>
|
||||
|
||||
<p>In the TreeView instance below, we've loaded all "top-level" nodes into the page as soon as the page loads; these nodes contain the names of many Indian states. When a node is expanded, we use <a href="http://developer.yahoo.com/yui/connection/">Connection Manager</a> to access <a href="http://developer.yahoo.com/search/web/V1/relatedSuggestion.html">a Yahoo! Search web service that will return a list of "related suggestions."</a> So when the page loads, we know nothing about our top-level nodes' children. And while the resulting TreeView instance could grow quite large through user interaction, we need only load a very light set of nodes to begin with. </p>
|
||||
|
||||
<p>This example also shows the two label styles for childless nodes. The first (default) style maintains the expand/collapse icon style even when the node has no children; the second style shows childless nodes as leaf nodes with no expand/collapse icon.</p>
|
||||
</div>
|
||||
|
||||
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
<h3>Childless Node Style:</h3>
|
||||
<dd><label for="mode0"><input type="radio" id="mode0" name="mode" value ="0" checked />
|
||||
Expand/Collapse</label>
|
||||
</dd>
|
||||
<dd><label for="mode1"><input type="radio" id="mode1" name="mode" value ="1" /> Leaf Node</label></dd>
|
||||
|
||||
<div id="treeDiv1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
YAHOO.example.treeExample = function() {
|
||||
|
||||
var tree, currentIconMode;
|
||||
|
||||
function changeIconMode() {
|
||||
var newVal = parseInt(this.value);
|
||||
if (newVal != currentIconMode) {
|
||||
currentIconMode = newVal;
|
||||
}
|
||||
buildTree();
|
||||
}
|
||||
|
||||
function loadNodeData(node, fnLoadComplete) {
|
||||
|
||||
//We'll load node data based on what we get back when we
|
||||
//use Connection Manager topass the text label of the
|
||||
//expanding node to the Yahoo!
|
||||
//Search "related suggestions" API. Here, we're at the
|
||||
//first part of the request -- we'll make the request to the
|
||||
//server. In our success handler, we'll build our new children
|
||||
//and then return fnLoadComplete back to the tree.
|
||||
|
||||
//Get the node's label and urlencode it; this is the word/s
|
||||
//on which we'll search for related words:
|
||||
var nodeLabel = encodeURI(node.label);
|
||||
|
||||
//prepare URL for XHR request:
|
||||
var sUrl = "assets/ysuggest_proxy.php?query=" + nodeLabel;
|
||||
|
||||
//prepare our callback object
|
||||
var callback = {
|
||||
|
||||
//if our XHR call is successful, we want to make use
|
||||
//of the returned data and create child nodes.
|
||||
success: function(oResponse) {
|
||||
YAHOO.log("XHR transaction was successful.", "info", "example");
|
||||
//YAHOO.log(oResponse.responseText);
|
||||
var oResults = eval("(" + oResponse.responseText + ")");
|
||||
if((oResults.ResultSet.Result) && (oResults.ResultSet.Result.length)) {
|
||||
//Result is an array if more than one result, string otherwise
|
||||
if(YAHOO.lang.isArray(oResults.ResultSet.Result)) {
|
||||
for (var i=0, j=oResults.ResultSet.Result.length; i<j; i++) {
|
||||
var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result[i], node, false);
|
||||
}
|
||||
} else {
|
||||
//there is only one result; comes as string:
|
||||
var tempNode = new YAHOO.widget.TextNode(oResults.ResultSet.Result, node, false)
|
||||
}
|
||||
}
|
||||
|
||||
//When we're done creating child nodes, we execute the node's
|
||||
//loadComplete callback method which comes in via the argument
|
||||
//in the response object (we could also access it at node.loadComplete,
|
||||
//if necessary):
|
||||
oResponse.argument.fnLoadComplete();
|
||||
},
|
||||
|
||||
//if our XHR call is not successful, we want to
|
||||
//fire the TreeView callback and let the Tree
|
||||
//proceed with its business.
|
||||
failure: function(oResponse) {
|
||||
YAHOO.log("Failed to process XHR transaction.", "info", "example");
|
||||
oResponse.argument.fnLoadComplete();
|
||||
},
|
||||
|
||||
//our handlers for the XHR response will need the same
|
||||
//argument information we got to loadNodeData, so
|
||||
//we'll pass those along:
|
||||
argument: {
|
||||
"node": node,
|
||||
"fnLoadComplete": fnLoadComplete
|
||||
},
|
||||
|
||||
//timeout -- if more than 7 seconds go by, we'll abort
|
||||
//the transaction and assume there are no children:
|
||||
timeout: 7000
|
||||
};
|
||||
|
||||
//With our callback object ready, it's now time to
|
||||
//make our XHR call using Connection Manager's
|
||||
//asyncRequest method:
|
||||
YAHOO.util.Connect.asyncRequest('GET', sUrl, callback);
|
||||
}
|
||||
|
||||
function buildTree() {
|
||||
//create a new tree:
|
||||
tree = new YAHOO.widget.TreeView("treeDiv1");
|
||||
|
||||
//turn dynamic loading on for entire tree:
|
||||
tree.setDynamicLoad(loadNodeData, currentIconMode);
|
||||
|
||||
//get root node for tree:
|
||||
var root = tree.getRoot();
|
||||
|
||||
//add child nodes for tree; our top level nodes are
|
||||
//all the states in India:
|
||||
var aStates = ["Andhra Pradesh","Arunachal Pradesh","Assam","Bihar","Chhattisgarh","Goa","Gujarat","Haryana","Himachal Pradesh","Jammu and Kashmir","Jharkhand","Karnataka"/* we're only using the first half of this list, to keep the tree smaller,"Kerala","Madhya Pradesh","Maharashtra","Manipur","Meghalaya","Mizoram","Nagaland","Orissa","Punjab","Rajasthan","Sikkim","Tamil Nadu","Tripura","Uttaranchal","Uttar","Pradesh","West Bengal"*/];
|
||||
|
||||
for (var i=0, j=aStates.length; i<j; i++) {
|
||||
var tempNode = new YAHOO.widget.TextNode(aStates[i], root, false);
|
||||
|
||||
}
|
||||
|
||||
//render tree with these toplevel nodes; all descendants of these nodes
|
||||
//will be generated as needed by the dynamic loader.
|
||||
tree.draw();
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
YAHOO.util.Event.on(["mode0", "mode1"], "click", changeIconMode);
|
||||
var el = document.getElementById("mode1");
|
||||
if (el && el.checked) {
|
||||
currentIconMode = parseInt(el.value);
|
||||
} else {
|
||||
currentIconMode = 0;
|
||||
}
|
||||
|
||||
buildTree();
|
||||
}
|
||||
|
||||
}
|
||||
} ();
|
||||
|
||||
//once the DOM has loaded, we can go ahead and set up our tree:
|
||||
YAHOO.util.Event.onDOMReady(YAHOO.example.treeExample.init, YAHOO.example.treeExample,true)
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue