jQuery带过渡动画的打开新面板插件

当前位置:主页 > jQuery库 > 布局和界面 > jQuery带过渡动画的打开新面板插件
jQuery带过渡动画的打开新面板插件
分享:

    插件介绍

    bringins是一款可以动态打开一个新面板的jQuery插件,该插件允许你设置面板打开的位置,面板颜色,宽度等属性,在面板打开时,还带有非常炫酷的动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-27
    阅读:
简要教程

bringins是一款可以动态打开一个新面板的jQuery插件,该插件允许你设置面板打开的位置,面板颜色,宽度等属性,在面板打开时,还带有非常炫酷的动画效果。

使用方法

使用该插件需要在页面中引入jquery和bringins.js文件。

HTML结构

你可以通过一个按钮或一个超链接来打开新的面板。面板的内容放置在一个容器中。

<a id="btn" class="btn btn-lg btn-success">打开面板</a>
<div id="sampledata1" class="bringins-content">
  <h2>标题</h2>
  <p>......</p>
</div>
                
初始化插件

在页面DOM元素加载完毕之后,可以通过bringins()方法来初始化该插件。

$(document).ready(function() {
  $('#sampledata').bringins();
});
                

配置参数

该插件的可用配置参数有:

  • position:面板的位置,默认值为:'right',可选值有:'right','left','center'。
  • color:面板的背景颜色,可以是任何有效的CSS颜色值。默认值为:'black'。
  • closeButton:关闭面板的按钮的颜色。默认值为:'white'。
  • width:面板的宽度。默认值为100%。
  • margin:面板中内容的margin值。默认值为100。
  • zIndex:面板的z-index值。默认为999。

bringins插件的官方主页为:http://www.ajarunthomas.com/jquery/bringins/

网友评论