Basic Framework

今天把基本的框架搭建起来了，其实完全是抄袭啊有木有……

在一些 JS 特效上卡了很久，发现自己在这方面真的很弱。

框架里加的东西越来越多了，JQuery 的基础上加了一个 JQueryUI，实现 toggleClass 特效。就这么几行，我居然研究了 3 个小时：

<a href="#">
        <div class="col-sm-2" id="menu-toggle">
            <i class="fa fa-angle-double-right"></i> Menu
        </div>
</a>

<script>
        $("#menu-toggle").click(function() {
            $('#sidebar').toggleClass('toggle_sidebar', 300,'linear');
            $('#mainframe').toggleClass('toggle_mainframe', 300,'linear');
        })
</script>

Bootstrap 自带的 collapse 特效用起来也挺麻烦的，研究了一个多小时：

<ul class="menu layer1">
            <a role="button" data-toggle="collapse" href="#section1" aria-expanded="true">
                <li id="menu1" class="layer1-title">
                    Section 1
                    <i class="fa fa-angle-down pull-right"></i>
                </li>
            </a>
            <div id="section1" class="collapse in">
                <ul class="layer2 list-group">
                    <li><i class="fa fa-circle-o"></i><a>Chapter 1</a></li>
                    <li><i class="fa fa-circle-o"></i><a>Chapter 2</a></li>
                </ul>
            </div>
</ul>

诀窍就在于，aria-expanded=”true” 时，二级菜单要加上 class=”collapse in”。

最后在右上角加了个时钟，原理就是每 1000 毫秒获取一次最新时间，这货肯定有误差，不过在毫秒级也就无所谓了，另外就是不确定能不能适应 local 时间，可能还不行，以后再纠结。