sideToggle是一款简单的jquery侧边栏插件。它可以通过velocity.js来替代jQuery的animate()动画,提供动画效果。
使用方法
在页面中引入jquery和velocity.min.js,以及sideToggleExtended.js文件。
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/velocity.min.js" type="text/javascript"></script> <script src="js/sideToggleExtended.js" type="text/javascript"></script>
HTML结构
该jquery侧边栏插件的HTML结构如下:
<nav> <!--侧边栏按钮--> <div id="sideMenu"> <span class="fa fa-navicon" id="sideMenuClosed"></span> </div> </nav> <!--侧边栏--> <div id="sideMenuContainer"> <h2>heading</h2> <a href="#" title="new user guide"><span class="fa fa-bolt"></span></a> <a href="#" title="rules"><span class="fa fa-exclamation-circle"></span></a> <a href="#" title="setting"><span class="fa fa-map"></span></a> <a href="#" title="usergroups"><span class="fa fa-info-circle"></span></a> <a href="#" title="directory"><span class="fa fa-users"></span></a> <a href="#" title="claims"><span class="fa fa-camera"></span></a> <a href="#" title="summaries"><span class="fa fa-commenting"></span></a> <a href="#" title="requests"><span class="fa fa-heart"></span></a> <a href="#" title="unanswered"><span class="fa fa-flag"></span></a> <a href="#" title="faq / suggestions"><span class="fa fa-question-circle"></span></a> <a href="#" title="chat"><span class="fa fa-glass"></span></a> </div>
初始化插件
在页面DOM元素加载完毕之后,通过sideToggle()
方法来初始化该插件。
$(document).ready(function(){ $('switch').sideToggle({ moving: 'null', direction: 'null' }); });
配置参数
该jquery侧边栏插件的可用配置参数有:
参数 | 描述 |
switch | 指定点击哪个元素时会触发侧边栏按钮。 |
moving | 指定侧边栏元素。 |
direction | 侧边栏出现的方向。可选值有left 和right 。 |
该jquery侧边栏插件的github地址为:https://github.com/hjools/sideToggle
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!