easyuiメニューバーの使用

<div id="tabs" class="easyui-tabs" data-options="plain:true,fit:true,border:'false'">

</div>

<div id="mm" class="easyui-menu" style="width:150px;">

        <div id="tabupdate"> </div>

        <div class="menu-sep"></div>

        <div id="mm-tabclose"> </div>

        <div id="mm-tabcloseall"> </div>

        <div id="mm-tabcloseother"> </div>

        <div class="menu-sep"></div>

        <div id="mm-tabcloseright"> </div>

        <div id="mm-tabcloseleft"> </div>

    </div>





        $(function () {

            bindTabEvent();

            bindTabMenuEvent();

        });



        // tab 、 

        function bindTabEvent() {

            $(".tabs-inner").live('dblclick', function () {

                var subtitle = $(this).children("span").text();

                if ($(this).next().is('.tabs-close')) {

                    $('#tabs').tabs('close', subtitle);

                }

            });

            $(".tabs-inner").live('contextmenu', function (e) {

                $('#mm').menu('show', {

                    left: e.pageX,

                    top: e.pageY

                });

                var subtitle = $(this).children("span").text();

                $('#mm').data("currtab", subtitle);
 　　　　　　　　

 $('#tabs').tabs('select', subtitle);// 

return false;

            });

        }

        // tab 

        function bindTabMenuEvent() {

            // 

            $('#tabupdate').click(function () {

                var currentTab = $('#tabs').tabs('getSelected');

                var iframe = $(currentTab.panel('options').content);

                var url = iframe.attr('src');// 

                var title = currentTab.panel('options').title;// 

                var content = "<iframe scrolling='auto' frameborder='0'  src='"

                        + url + "' style='width:100%;height:100%;'></iframe>";



                $('#tabs').tabs('update', {

                    tab: currentTab,

                    options: {

                        content: content

                    }

                });

            });

            // 

            $('#mm-tabclose').click(function () {

                var currtab_title = $('#mm').data("currtab");

                $('#tabs').tabs('close', currtab_title);

            });

            // 

            $('#mm-tabcloseall').click(function () {

                $('.tabs-inner span').each(function (i, n) {

                    if ($(this).parent().next().is('.tabs-close')) {

                        var t = $(n).text();

                        $('#tabs').tabs('close', t);

                    }

                });

            });

            // TAB

            $('#mm-tabcloseother').click(function () {

                var currtab_title = $('#mm').data("currtab");

                $('.tabs-inner span').each(function (i, n) {

                    if ($(this).parent().next().is('.tabs-close')) {

                        var t = $(n).text();

                        if (t != currtab_title)

                            $('#tabs').tabs('close', t);

                    }

                });

            });

            // TAB

            $('#mm-tabcloseright').click(function () {

                var nextall = $('.tabs-selected').nextAll();

                if (nextall.length == 0) {

                    alert(' ');

                    return false;

                }

                nextall.each(function (i, n) {

                    if ($('a.tabs-close', $(n)).length > 0) {

                        var t = $('a:eq(0) span', $(n)).text();

                        $('#tabs').tabs('close', t);

                    }

                });

                return false;

            });

            // TAB

            $('#mm-tabcloseleft').click(function () {

                var prevall = $('.tabs-selected').prevAll();

                if (prevall.length == 1) {

                    alert(' ');

                    return false;

                }

                prevall.each(function (i, n) {

                    if ($('a.tabs-close', $(n)).length > 0) {

                        var t = $('a:eq(0) span', $(n)).text();

                        $('#tabs').tabs('close', t);

                    }

                });

                return false;

            });

        }

function addTab(title, url) {

            if ($('#tabs').tabs('exists', title)) {

                $('#tabs').tabs('select', title);

            } else {

                var content = "<iframe scrolling='auto' frameborder='0'  src='"

                        + url + "' style='width:100%;height:100%;'></iframe>";

                $('#tabs').tabs('add', {

                    title: title,

                    content: content,

                    closable: true,

                    iconCls: 'icon-add'

                });

            }

        };