Basic Framework
今天把基本的框架搭建起来了，其实完全是抄袭啊有木有……
在一些 JS 特效上卡了很久，发现自己在这方面真的很弱。
框架里加的东西越来越多了，JQuery 的基础上加了一个 JQueryUI，实现 toggleClass 特效。就这么几行，我居然研究了 3 个小时：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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 特效用起来也挺麻烦的，研究了一个多小时：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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 时间，可能还不行，以后再纠结。