liuzy1988-jQueryEJS
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQueryEJS 2.0</title>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div class="bg"></div>
    <div class="top">
        <a class="logo" href="/"><b>jQueryEJS 2.0</b></a>
        <a class="v1" href="/v1/" target="_blank">&lt;1.0版&gt;</a>
        <ul class="top-menu">
            <li><a href="whatis" class="active">介绍</a></li>
            <li><a href="example/EJS">示例</a></li>
            <li><a href="join">贡献</a></li>
            <li><a href="https://liuzy88.com/" target="_blank">社区</a></li>
            <li><a href="https://git.oschina.net/liuzy1988/jqejs" target="_blank">源码</a></li>
        </ul>
    </div>
    <div class="main">
        <div class="main-left">
            <div class="menu">
                <ul class="menu-1">
                    <li>
                        <a href="">介绍</a>
                        <ul class="menu-2">
                            <li><a href="whatis">jQueryEJS</a></li>
                            <li><a href="whatis">EJS简介</a></li>
                            <li><a href="whatis">jQuery+EJS</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">使用</a>
                        <ul class="menu-2">
                            <li><a href="useit">入门</a></li>
                            <li><a href="useit">入门</a></li>
                            <li><a href="useit">入门</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="">示例</a>
                        <ul class="menu-2">
                            <li><a href="example/EJS">渲染扩展($.EJS)</a></li>
                            <li><a href="example/e-for">遍历(e-for)</a></li>
                            <li><a href="example/e-js">嵌入JS(e-js)</a></li>
                            <li><a href="example/e-fors">遍历嵌套(e-for+)</a></li>
                            <li><a href="example/e-bind">绑定值(e-bind)</a></li>
                            <li><a href="example/e-url">自动渲染(e-url)</a></li>
                            <li><a href="example/e-on">事件(e-on)</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="more">更多</a>
                        <ul class="menu-2">
                            <li>
                                <a href="compare">对比其他框架</a>
                            </li>
                            <li>
                                <a href="join">加入社区</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main-right">
            <div class="content">
            </div>
            <div class="bottom">
                <div class="prev"></div>
                <div class="next"></div>
            </div>
        </div>
    </div>
    <br style="clear: both;">
    <div class="footer">
        <span>©2016 jQueryEJS By <a href="https://liuzy88.com/">liuzy88.com</a> 沪ICP备15012258号</span>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
    window.onresize = function() {
        $('.content').css('min-height', document.documentElement.clientHeight - 144);
    }
    $(function() {
        $('.content').css('min-height', document.documentElement.clientHeight - 144);
        $('.top-menu a').on('click', function() {
            !$(this).hasClass('active') && $(this).addClass('active').parent().siblings().children('a').removeClass('active');
            if (!$(this).attr('href').startsWith('http')) {
                $('.menu [href="' + $(this).attr('href') + '"]')[0].click();
                return false;
            } else {
                return true;
            }
        });
        $('.menu-1>li>a').on('click', function() {
            !$(this).hasClass('active') && $(this).addClass('active');
            $(this).parent().siblings().find('a').removeClass('active');
            $(this).next().find('a')[0].click();
            return false;
        });
        $('.menu-2>li>a').on('click', function() {
            $('.menu a').removeClass('active');
            $(this).addClass('active').parent().parent().prev().addClass('active');
            var that = $(this);
            $('.content').load($(this).attr('href') + '.html?_=' + new Date().getTime(), function() {
                $('.prev').html('上一篇：' + (that.parent().prev()[0] ? that.parent().prev().find('a').html() : '没有了'));
                $('.next').html('下一篇：' + (that.parent().next()[0] ? that.parent().next().find('a').html() : '没有了'));
            });
            return false;
        });
        $('.menu a')[9].click();
    });
    </script>
</body>

</html>