jQuery.Sticklr

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类型默认值描述
animateBooleanfalse定义在滚动/调整浏览器大小时是否必须对粘滞面板进行动画处理
menuHeightNumber20定义以像素为单位的列的高度大小
menuWidthNumber180定义列的宽度大小(以像素为单位)
relativeToString"center"定义相对于浏览器视口的垂直位置(top/ middle/ ground)
relativeGapNumber15如果relativeTo设置为顶部或底部,则以像素为单位定义相对间隙大小
showOnString"click"当必须显示菜单时定义事件。一些可能的鼠标事件:hover,click,dblclick
stickToString"left"定义放置位置是在侧面left还是在right侧面
tabHeightNumber16定义标签的高度大小
tabWidthNumber16定义标签的宽度大小
$('#example').sticklr({
    animate     : true,
    menuHeight  : 20,
    menuWidth   : 200,
    relativeTo  : 'top',
    relativeGap : 10,
    showOn      : 'hover',
    stickTo     : 'right',
    tabHeight   : 64,
    tabWidth    : 32
});
赞(0) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...