Skip to forum content

Mif

— mystic javascript interface

You are not logged in. Please login or register.

Post new reply

Mifjs forum — Mif.Tree, Mif.Menu » Feature requests » Quick tree editing with a small toolbar » Post new reply

Post new reply

Compose and post your new reply

You may use: BBCode Images Smilies

All fields labelled (Required) must be completed before the form is submitted.

Required information for guests



Captcha image. Turn pictures on to see it.
Required information
Optional post settings

Topic review (newest first)

1 Post by moro

online demo http://mifjs.net/misc/miftree-toolbar/

2 Post by ordiman85

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 :
http://img145.imageshack.us/img145/7161/capturetq.png

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

Mifjs forum — Mif.Tree, Mif.Menu » Feature requests » Quick tree editing with a small toolbar » Post new reply