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

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

 28345  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,大功告成!


相关插件-独立的部件

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

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

jQuery社会华分享插件

jQuery社会华分享插件支持微信,QQ,新浪,人人等
  独立的部件
 32783  426

html5手势解锁插件H5lock.js

html5手势解锁插件H5lock.js详细注释
  独立的部件
 29707  287

jQuery HTML导出Excel插件table2excel

jquerytable2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。该插件可以根据你的需要导出表格中的内容,不需要的行可以不导出。它文件体积小,使用非常方便。
  独立的部件
 99871  424

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复