oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update YUI to 2.8.0r4

Browse source
This commit is contained in:
Graham Knop 2009-09-21 12:54:44 -05:00
parent 27f474ec64
commit 2d28e0c0ba
2007 changed files with 344487 additions and 210070 deletions
Download patch file Download diff file Expand all files Collapse all files

115
www/extras/yui/examples/treeview/tv_edit_clean.html Normal file
View file

@ -0,0 +1,115 @@
<!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>Inline Editing of TreeView Node Labels</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/calendar/assets/skins/sam/calendar.css" />
<link rel="stylesheet" type="text/css" href="../../build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
<script type="text/javascript" src="../../build/treeview/treeview-min.js"></script>
<!--begin custom header content for this example-->
<!--end custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Inline Editing of TreeView Node Labels</h1>
<div class="exampleIntro">
<p>This example demonstrates label editing and keyboard navigation in the YUI TreeView Control.
As you interact with the TreeView instance below, you'll find that some nodes allow you to edit them -
double-click on node labels to open the inline editor.
This example also demonstrates how you can use arrow keys, +/- keys (expand/collapse),
and the enter key to navigate and control the TreeView instance.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="treeView" style="background-color:white"></div>
<div id="msg">&nbsp;</div>
<script type="text/javascript">
//global variable to allow console inspection of tree:
var tree;
//anonymous function wraps the remainder of the logic:
(function() {
var treeInit = function() {
tree = new YAHOO.widget.TreeView("treeView", [
'Label 0',
{type:'Text', label:'Label 1', editable:true},
{type:'Text', label:'Branch 2', editable:true, expanded:true, children:[
{type:'Text', label:'Branch 2-0', editable:true, children: [
'Label 2-0-0',
'Label 2-0-1'
]},
{type:'Text', label:'Branch 2-1', editable:true, children: [
'Label 2-1-0',
'Label 2-1-1'
]},
]},
{type:'Text',label:'YAHOO', href:'http://www.yahoo.com', target:'YAHOO\'s home page'},
{type:'DateNode',label:'31.3.2001',editable:true, calendarConfig: {
DATE_FIELD_DELIMITER:".",
MDY_DAY_POSITION:1,
MDY_MONTH_POSITION:2,
MDY_YEAR_POSITION:3
}},
{type:'text',label:'Branch 3', editable:true, expanded:false, children:[
'Label 3-0',
'Label 3-1'
]}
]);
tree.render();
tree.subscribe('dblClickEvent',tree.onEventEditNode);
tree.root.children[1].focus();
tree.subscribe('enterKeyPressed',function(node) {
YAHOO.util.Dom.get('msg').innerHTML = 'Enter key pressed on node: ' + node.label;
});
tree.subscribe('clickEvent',function(oArgs) {
YAHOO.util.Dom.get('msg').innerHTML = 'Click on node: ' + oArgs.node.label;
});
tree.subscribe('dblClickEvent',function(oArgs) {
YAHOO.util.Dom.get('msg').innerHTML = 'Double click on node: ' + oArgs.node.label;
});
};
//Add an onDOMReady handler to build the tree when the document is ready
YAHOO.util.Event.onDOMReady(treeInit);
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>