Topic: Quick tree editing with a small toolbar
Hello, I'm french, and I use Mif.Tree for my project.
I have made an extension which shows a little toolbar on the right of the selected item.
You can also customize the buttons, their name and their icon, and you can add a fadding effect too (default).
I named this Mif.Tree.QuickToolbar.
I hope it will help open source community ^^
Capture :
HTML :
<h1>Mif.Tree quick editing</h1>
<div id="tree_container" class="container"></div>JS :
window.addEvent( 'domready', function()
{
var myTree = new Mif.Tree(
{
container: $( 'tree_container' ),
types: {
folder: {
openIcon: 'mif-tree-open-icon',
closeIcon: 'mif-tree-close-icon'
}
},
dfltType: 'folder',
height: 18,
initialize: function()
{
new Mif.Tree.QuickToolbar( this, { buttons:
[{
action: 'add',
icon: 'css/add.png',
title: 'Add a child node'
},
{
action: 'rename',
icon: 'css/rename.png',
title: 'Rename this node'
},
{
action: 'remove',
icon: 'css/remove.png',
title: 'Delete this node'
}]});
}
});
myTree.addEvent( 'action', function( action, node )
{
if ( action == 'add' )
node.tree.add( { property: { name: 'newNode' } }, node, 'inside' );
else if ( action == 'rename' )
node.rename();
else if ( action == 'remove' )
node.remove();
});
myTree.load( { url: 'tree.json' } );
});CSS :
/*@quicktoolbar*/
.mif-tree-quicktoolbar
{
display: inline;
height: 13px;
cursor: default;
overflow: hidden;
font-family: sans-serif;
font-size: 11px;
padding-left: 8px;
z-index: 1;
}
.mif-tree-quicktoolbar-button
{
overflow: hidden;
height: 13px;
margin-left: 4px;
cursor: pointer;
}Icons are found here : http://www.famfamfam.com/lab/icons/silk/
If you use this script, please give your comments !
Thanks
Cordially,
Charly Lersteau
Last edited by ordiman85 (2010-07-04 15:35:20)
