TabPanel效果,比较有用,收藏先。

本东东是转载过来的,JQ插件来的,比较好理解。

本作品的作者博客:http://www.cnblogs.com/fromearth,以表示本人对他劳动成果的尊重!

<script type="text/javascript">
        var jericho = {
            showLoader: function() {
                $('#divMainLoader').css('display', 'block');
            },
            removeLoader: function() {
                $('#divMainLoader').css('display', 'none');
            },
            buildTree: function() {
                $('.functree li').each(function() {
                    if ($(this).is(':has(ul)'))
                        $(this).addClass('collapse');
                    if ($(this).next().is('li') || $(this).next().is('ul'))
                        $(this).css({ borderLeft: 'dashed 1px #dedede' });
                })
                $('li.collapse>span').click(function() {
                    $(this).next('ul').slideToggle('fast', function() {
                        if ($(this).parent().hasClass('collapse'))
                            $(this).parent().removeClass('collapse').addClass('expand');
                        else
                            $(this).parent().removeClass('expand').addClass('collapse');
                    })
                })

                $('span.func').css({ 'cursor': 'pointer' }).hover(function() {
                    $(this).css({ 'color': '#3de', 'text-decoration': 'underline' });
                }, function() {
                    $(this).css({ 'color': '#000', 'text-decoration': 'none' });
                }).click(function() {
                    $.fn.jerichoTab.addTab({
                        tabFirer: $(this),
                        title: $(this).text(),
                        closeable: true,
                        iconImg: $(this).attr('iconImg'),
                        data: {
                            dataType: $(this).attr('dataType'),
                            dataLink: $(this).attr('dataLink')
                        }
                    }).showLoader().loadData();
                });
            },
            buildTabpanel: function() {
                $.fn.initJerichoTab({
                    renderTo: '.divRight',
                    uniqueId: 'myJerichoTab',
                    contentCss: { 'height': $('.divRight').height() - 50 },
                    tabs: [{
                        title: 'JeirchoTab',
                        closeable: false,
                        iconImg: 'images/jerichotab.png',
                        data: { dataType: 'formtag', dataLink: '#tbNews' },
                        onLoadCompleted: function(h) {
                            $('<b style="color:red" />').html('The JerichoTab processed in ' + (new Date().getTime() - d1)+' milliseconds!').appendTo(h);
                        }
                    }],
                    activeTabIndex: 0,
                    loadOnce: true
                    });
                }
            }
        $().ready(function() {
            d1 = new Date().getTime();
            jericho.showLoader();
            var w = $(document).width();
            var h = $(document).height();
            $('.divLeft').css({ width: 190, height: h - 120, 'display': 'block' });
            $('.divRight').css({ width: w - 250, height: h - 120, 'display': 'block', 'margin-left': 7 });
            $('#firefoxuser').html(($.browser.mozilla ? 'yes, your browser is Firefox' : 'oh, you are not using Firefox?'));
            $('#ieuser').html(($.browser.msie ? 'yes, your browser is Internet Explorer' : 'oh, you are not using Internet Explorer?'));
            jericho.buildTree();
            jericho.buildTabpanel();
            jericho.removeLoader();
        })
    </script>

你可能感兴趣的:(JavaScript,html,css,firefox)