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

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

 9882  117  查看评论 (10)
可停靠屏幕边缘的侧边栏插件 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,大功告成!


相关插件-独立的部件

mui搜索列表添加热门等模块

利用mui搜索列表的源代码,加入我们需求的热门等模块
  独立的部件
 2550  14

jQuery网站引导插件joyride

jQuery网站引导插件joyride
  独立的部件
 11358  46

jquer网页打印插件PrintArea.js

jquery实现页面打印可局部打印
  独立的部件
 8347  77

jQuery社会华分享插件

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

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币

    眼角的幸福13 0
    2017/11/23 12:40:09

    position:left 有问题

    回复
    被害人何某 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
    我顶你2个肺 0
    2016/4/12 11:04:22
    积分不够怎么办啊
        iProg-js0
        2016/4/16 10:04:48
        联系我,1440552721
    回复
    饿一天不会死 0
    2016/2/21 21:02:52
    Zhang_YuB 0
    2016/2/18 11:02:40
取消回复