FloatBar Plugin v1.3

基于jQuery的浮动边栏插件


Project maintained by wendellvian Hosted on GitHub Pages — Theme by mattgraham

用于控制页面主体以外的容器定位插件,分左上,左下,右上,右下四个方位排布。

兼容IE6浏览器

更正参数middle为vertical; 简化页面布局复杂性。 修复窗口变化时的滚动BUG

demo.html可能没有及时更正,使用时请查看参数是否传对

    liveHeight:360,                       // 活动高度: 取0时边栏位置为固定样式
    bodyWidth:960,                        // 页面布局宽度
    winMinHeight:600,                     // 浏览器最小高度
    topFixHeight:30,                      // 顶部Fixed层的高度 vertical:top共用
    spaceWidth:10,                        // 浮动边栏与页面的间距
    align:"right",                        // 浮动边栏左右停靠方式:right | left
    vertical:"bottom",                    // 浮动边栏上下停靠方式:bottom | top
    speed:300,                            // 速度:非0毫秒数值 | "slow" | "fast"
    aniOnOff:true,                        // 效果开关:true | false
    moveOnOff:true                        // 运动开关:true | false

使用方法

    $(element).floatBar();
    // 浮动边栏默认右下方

    $(element).floatBar({
    vertical:"top"
    });
    // 右上方 可以追加设置topFixHeight的值

    $(element).floatBar({
    vertical:"top",
    align:"left"
    });
    // 左上方 可以追加设置topFixHeight的值

    $(element).floatBar({
    align:"left"
    });
    // 左下方

CSS写法

    /* 上方(包含左上方和右上方) */
    element{top:value;}
    childelement{width:value;height:value;...}

    /* 下方(包含左下方和右下方) */
    element{bottom:value}
    childelement{width:value;height:value;...}

    /* 兼容IE6浏览器写法*/
    *html element{margin-top:value;}         /* 上方(包含左上方和右上方) */
    *html element{margin-top:-value;}        /* 下方(包含左下方和右下方) */

HTML写法

    <div class="element">
        <div class="childelement"></div>
    </div>

增加参数

    eleFocus:"focus",                     // 焦点:class="focus"
    eleName:"back",                       // 元素名称
    eleLabel:"li",                        // 结构标签
    anchorIndex:"anchor-index",           // 锚节点
    eleMargin:10,                         // 板块间距
    mouseCtrl:"click",                    // 鼠标事件:click | mouseover
    focusOnOff:true                       // 滚动获焦开关:false | true

增加锚节点

    <div anchor-index="1">...</div>
    <div anchor-index="2">...</div>
    ...
    <!-- anchor-index可自定义 -->
    <!-- 传值 -> anchorIndex:"自定义" -->
    <!-- 如:<div aaa="1">...</div> -->
    <!-- 传值 -> anchorIndex:"aaa" -->

增加滚动获焦功能

    <!-- 默认结构 -->
    <div>
        <ul>
            <li class="focus">...</li>
            <li>...</li>
            ...
        </ul>
    </div>
    <!-- 标签 && 类 可自定义 -->
    <!-- 传值 -> eleLabel:"自定义" -->
    <!-- 传值 -> eleFocus:"自定义" -->
    <div>
        <a class="bar" href="javascript:;">...</a>
        <a href="javascript:;">...</a>
        ...
    </div>
    <!-- 如:eleLabel:"a" -->
    <!-- 如:eleFocus:"bar" -->

增加获焦关闭功能(焦点不可见)

    focusOnOff:false

增加置顶置底功能

    <a href="javascript:;" class="backtop">返回顶部</a>
    <a href="javascript:;" class="backbottom">去底部</a>
    <!-- 标签可自定义 -->
    <!-- class需遵循规则 -> 自定义+top || 自定义+bottom -->
    <!-- 传值 -> eleName:"自定义" -->