jquery.sticklr 侧边面板
GitHub 项目地址 演示地址
<link rel="stylesheet"href="https://cdn.jsdelivr.net/gh/faisalman/sticklr-js@master/css/jquery-sticklr-1.4-light-color.css" />
<script src="https://cdn.jsdelivr.net/gh/faisalman/sticklr-js@master/js/jquery-sticklr-1.4.js"></script>
用法
<!-- include the required CSS -->
<link rel="stylesheet" type="text/css" href="jquery-sticklr-1.4-light-color.css" />
<!-- include any version of jQuery before including plugin -->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<!-- include the plugin -->
<script type="text/javascript" src="jquery-sticklr-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#example').sticklr();
});
</script>
<ul id="example" class="sticklr">
<li>
<a href="#" class="icon-something" title="This is a floated icon"></a>
<ul>
<li class="sticklr-title">
<a href="#">This is a title</a>
</li>
<li>
<a href="http://www.google.com" class="icon-google">This is a link</a>
</li>
<li>
<a href="http://www.facebook.com" class="icon-facebook">Another link</a>
</li>
</ul>
</li>
</ul>
选项
| option | 类型 | 默认值 | 描述 |
|---|
| animate | Boolean | false | 定义在滚动/调整浏览器大小时是否必须对粘滞面板进行动画处理 |
| menuHeight | Number | 20 | 定义以像素为单位的列的高度大小 |
| menuWidth | Number | 180 | 定义列的宽度大小（以像素为单位） |
| relativeTo | String | "center" | 定义相对于浏览器视口的垂直位置（top/ middle/ ground） |
| relativeGap | Number | 15 | 如果relativeTo设置为顶部或底部，则以像素为单位定义相对间隙大小 |
| showOn | String | "click" | 当必须显示菜单时定义事件。一些可能的鼠标事件：hover，click，dblclick |
| stickTo | String | "left" | 定义放置位置是在侧面left还是在right侧面 |
| tabHeight | Number | 16 | 定义标签的高度大小 |
| tabWidth | Number | 16 | 定义标签的宽度大小 |
$('#example').sticklr({
animate : true,
menuHeight : 20,
menuWidth : 200,
relativeTo : 'top',
relativeGap : 10,
showOn : 'hover',
stickTo : 'right',
tabHeight : 64,
tabWidth : 32
});
转载请注明出处：吖Go博客 » jQuery.Sticklr
