可停靠屏幕边缘的侧边栏插件

所属分类：其他-独立的部件

38081 453 查看评论 (16)

分享到微信朋友圈

查看演示立即下载

插件描述：我自己封装的可停靠屏幕边缘的侧边栏插件，可以制作页面的通知信息，客服信息，联系方式等

插件图标依赖font-awesome，所以要先导入该字体图标，然后导入相关js文件即可：

<head>
    <link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.css"/>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/jquery.sliderBar.js"></script>
</head>

先在页面插入一下html代码（class="sliderbar-container"这个class的值可以随意更改，但是class="title"和class="body",则不能更改）

<div class="sliderbar-container">
    <div class="title"><i></i> 通知消息</div>
    <div class="body">
        无消息
    </div>
</div>

然后插入以下js代码:

<script type="text/javascript">
$(function(){
    $('.sliderbar-container').sliderBar({
         open : true,           // 默认是否打开，true打开，false关闭
        top : 200,             // 距离顶部多高
       width : 360,           // body内容宽度
       height : 240,          // body内容高度
       theme : 'green',       // 主题颜色
       position : 'left'      // 显示位置，有left和right两种
    });
});
</script>

ok，大功告成！

Rectangle仿flash交互漂亮个人简历模板

HTML5 大转盘适合移动端