Basic Framework

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

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 时间,可能还不行,以后再纠结。

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.