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

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

 28384  366  查看评论 (16)
分享到微信朋友圈
X
可停靠屏幕边缘的侧边栏插件 ie兼容7

插件图标依赖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,大功告成!


相关插件-独立的部件

可自定义轻量侧边悬浮插件

可以自定义悬浮.邮箱、QQ、电话、二维码等....
  独立的部件
 34117  499

jQuery分享插件jquery.share.js

jQuery分享插件jquery.share.js享到QQ、微信、微博、google、in、tweeter等
  独立的部件
 86682  529

html5读取二维码

手机端web调用摄像头读取解析二维码
  独立的部件
 49084  358

操作浏览器标题栏插件Title.js

Title.js是一个javascript库用来操作浏览器标题栏,没有依赖性。 这里有用法示例:添加前缀,加后缀,改变预定义的标题,招牌效果、打字机效果。
  独立的部件
 36022  281

讨论这个项目(16)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    笨小孩 0
    2020/10/19 10:56:52
    有没有打开和关闭的事件回调呢 回复
    Mi_King 0
    2019/8/30 14:17:50
    这个收的qB有点多啊,不过做的不错 回复
    I Believe I Can Fly 1
    2019/5/9 10:15:41
    解决方式
    obj.css({right: -(opts.width+20)+'px'});
    jquery.sliderBar.js 行 136 回复
    境界 0
    2018/11/4 20:55:45
    position为right的时候有问题(标签离页面有边界有距离),不能自定义标签的高度
        I Believe I Can Fly0
        2019/5/9 9:56:00
    回复
    眼角的幸福13 0
    2017/11/23 12:40:09
    被害人何某 0
    2017/11/23 9:44:18
    hanhaoooo 0
    2017/8/26 20:38:13
        0
    2016/12/21 16:12:24
    Shine 0
    2016/8/12 14:08:22
    感觉不是很好用啊     回复
    Dssy 0
    2016/6/23 16:06:53
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复