Ò»¸ö¿Ó±ÆµÄÑ¡ÏJS£¬Ö÷ÒªÊÇÓëVue³åÍ»

Õ¾³¤ËÕ·É

[JavaScript] ´¿Îı¾²é¿´ ¸´ÖÆ´úÂë

(function () {
    var $sidebar = $('#sidebar'),
        $container = $('#container'),
        $pages = $('#pages'),
        $pageContent = $('#page-content'),
        w = $pageContent.width(),
        h = $(window).height() - parseInt($container.css('marginTop'));

    var Layout = {
        cache: ['home'],
        urlCache: ['home'],
        template: '<li>{text}<i class="icon small" data-page-off title="¹Ø±Õ">¤b</i></li>',
        activeIndex: 0,
        togglePage: function (index) {
            index = $.isNumeric(index) ? index : $pages.find('li').filter(function () {
                return this.firstChild.nodeValue === index;
            }).index();

            $pageContent.children().hide().eq(index).show();
            $pages.children().removeClass('active').find('i').css('color', '#999');
            $pages.children().eq(index).addClass('active').find('i').css('color', '#f5694b');
            this.activeIndex = index;

            if (index === 0) {
                $('html, body').css('overflow-y', 'auto');
            } else {
                $('html, body').css('overflow', 'hidden');
            }

            $pages.css('width', function () {

                var w = 30;

                $(this).find('li').each(function (index, el) {
                    w += $(el).outerWidth();
                });

                return w + 'px';
            });

            return index;
        },
        addPage: function (text, url) {

            var index = this.hasUrl(url);

            if (index === -1) {
                var $fm = $('<iframe width="' + w + '" height="' + h + '" frameborder="0" src="' + url + '"></iframe>');
                $pageContent.append($fm);
                $fm.show().siblings().hide();

                var win = $fm[0].contentWindow;
                this.cache.push(win);
                this.urlCache.push(url);

                var $title = $(this.template.replace('{text}', text));
                $pages.append($title);
                index = $title.index();
            }

            return this.togglePage(index);
        },
        removePage: function (index) {
            if (index === 0) {
                return;
            }
            var $page = $pages.children().eq(index);
            $sidebar.find('.sidebar-list a').filter(function () {
                return this.innerHTML === $page[0].firstChild.nodeValue;
            }).removeAttr('pageIndex');
            $page.remove();
            $pageContent.children().eq(index).remove();

            this.cache.splice(index, 1);
            this.urlCache.splice(index, 1);
            this.togglePage(index - 1);
        },
        closeAll: function () {
            $pages.children(':gt(0)').remove();
            $pageContent.children(':gt(0)').remove();
            $sidebar.find('.sidebar-list a').removeAttr('pageIndex');
            $pages.children(':first').addClass('active');
            $pageContent.children(':first').show();

            this.cache = ['home'];
            this.urlCache = ['home'];
        },
        getWindow: function (index) {
            return this.cache[index || this.activeIndex];
        },
        load: function (index, url) {
            this.getWindow(index).location = url;
        },
        reload: function (index) {
            this.getWindow(index).location.reload();
        },
        hasUrl: function (url) {
            return $.inArray(url, this.urlCache);
        },
        pagesMove: function (len) {
            var w = parseInt($pages.css('width'));
            var mw = parseInt($pages.css('min-width'));

            if (w > mw) {

                $pages.css('left', function () {
                    var left = parseInt($(this).css('left'));
                    return (len > 0 ? Math.max(left - len, mw - w) : Math.min(left - len, 0)) + 'px';
                });
            }
        }
    };

    $sidebar.on('click', '.sidebar-handle', function () {
        var $arrow = $(this).find('.arrow');
        w = $('body').width();
        if ($arrow.hasClass('r')) {
            $sidebar.css('left', '-180px');
            $container.css({
                'margin-left': 0
            });
            $pages.css('margin-left', 0);

        } else {
            $sidebar.css('left', 0);
            $container.css('margin-left', '181px');
            $pages.css('margin-left', '181px');
            w = w - 181;
        }
        $arrow.toggleClass('r l');

        $('iframe').width(w);

    }).on('click', '.sidebar-list a', function () {
        var url = this.getAttribute('href'),
            pageIndex = $(this).attr('pageIndex');

        if ( Layout.hasUrl(url) === -1) {
            var index = Layout.addPage(this.innerHTML, url);
            $(this).attr('pageIndex', index);
        } else {
            Layout.togglePage(pageIndex || this.innerHTML);
            Layout.reload(); //ÖØÐÂˢе±Ç°Ò³
        }

        return false;
    });

    $pages.on('click', '[data-page-off]', function () {
        Layout.removePage($(this).parent().index());
        return false;
    }).on('click', 'li', function () {
        Layout.togglePage($(this).index());
        return false;
    }).on('dblclick', 'li', function () {
        Layout.removePage($(this).index());
        return false;
    });


    $(document).on('click', '#closeAll', function () {
        Layout.closeAll();
    }).on('click', '#reloadPage', function () {
        Layout.reload();
    }).on('click', '[data-to-left]', function () {
        Layout.pagesMove(100);

    }).on('click', '[data-to-right]', function (event) {
        Layout.pagesMove(-100);
    });

    $(window).load(function () {
        $pages.css('min-width', (w - 70) + 'px');
    })

    $(window).resize(function () {
        w = $container.width();
        h = $(this).height() - parseInt($container.css('marginTop'));
        $pages.css('min-width', (w - 70) + 'px');
        $('iframe').width(w).height(h);
    });

    window.Layout = Layout;


} ());

ϧ

ÕæÊÇÄѵøøÁ¦µÄÌû×Ó°¡¡£

Amy

Ç¿ÁÒÖ§³ÖÂ¥Ö÷ing¡­¡­

ÖñÁÖ·ç

ÎÒÖ»ÊÇ·¹ý´ò½´Ó͵ġ£

·¶·¶

Ç¿ÁÒÖ§³ÖÂ¥Ö÷ing¡­¡­