jQuery plugin : liteAccordion 手风琴展示效果插件

[ 作者:笑傲江湖 发布于:2012年-4月-27日 18:54 星期五  分类:百 宝 箱 ]

  liteAccordion 手风琴拉箱展示效果插件,可以用作图片广告展示或者多页图文内容的集中展现,可定制参数很丰富,插件本身带有四种不同的风格,通过参数来选择风格,当然,你也可以自定义风格。可以设置鼠标点击切换,或者是鼠标经过标题栏时切换。
  手风琴拉箱切换效果也可以设置,插件本身调用了jQuery.easing,所以效果有很多种,效果参数名参考这里:http://jqueryui.com/demos/effect/easing.html

插件特点
  设置参数丰富,自带四种风格,可以自定义演示区域宽高。
插件使用
  在你要使用该插件的页面<head></head>之间加入下面的代码,样式表、jQuery、本插件JS文件路径不要搞错。
<head>
    <link rel="stylesheet" href="liteAccordion.css">
    <script src="jquery.min.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="liteaccordion.jquery.js"></script>
</head>
  页面Body里面加入下面的代码,这是Basic风格的,其他风格设置请参考压缩包中的文件。代码里是默认5页内容块,你要是页面够宽可以在加几个li,其他风格类似。
<div id="yourdiv">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>
  最后,liteAccordion 粉墨登场,下面的代码放到</Body>之前。youdiv是上面展示块的ID名,也可以用Class名,确保你的Class名唯一。
<script>
    $('#yourdiv').liteAccordion();
</script>
插件选项:(默认值)
containerWidth : 960,                   // 展示块的宽度,单位px  
containerHeight : 320,                  // 展示块的高度,单位px
headerWidth: 48,                        // 展示块标题栏宽度,单位px
 
activateOn : 'click',                   // 激活切换方式,click 或者 mouseover  
firstSlide : 1,                         // 页面打开后哪一页展示内容展开
slideSpeed : 800,                       // 切换速度,单位毫秒  
onTriggerSlide : function() {},         // 切换时功能调用
onSlideAnimComplete : function() {},    // 切换完成后功能调用  
 
autoPlay : false,                       // 是否自动切换
pauseOnHover : false,                   // 鼠标移动到内容页上是否暂停切换
cycleSpeed : 6000,                      // 内容页切换间隔时间,单位毫秒
easing : 'swing',                       // jQuery easing切换效果参数  
 
theme : 'basic',                        // 展示块风格:basic, dark, light, stitch  
rounded : false,                        // 展示块方角还是圆角
enumerateSlides : false,                // 展示块标题栏上是否显示数字
linkable : false                        // 通过外部链接点击切换
插件方法:所有方法均支持链式操作。
play                                    // 开始播放已停止的切换
stop                                    // 停止正在播放的切换
next                                    // 切换到下一个
prev                                    // 切换到上一个
destroy                                 // 去除展示块,干掉所有事件句柄和风格等
debug                                   // 返回一个debug物件
$('#yourdiv').liteAccordion('play');
$('#yourdiv').liteAccordion('next').liteAccordion('next');
浏览器兼容性:
新版Chrome、Firefox、Opera、Safari支持很好
IE6、7估计不行(么有这些个古董)
IE8还行,Stitch风格由于IE8不支持CSS3,所以显示有些小问题,其他风格OK。

带外部链接点击切换的Dark风格展示:
$('#yourdiv').liteAccordion({ 
    theme : 'dark', 
    rounded : true, 
    enumerateSlides : true, 
    firstSlide : 2,
    linkable : true,
    easing: 'easeInOutQuart'
});
使用jQuery easing为easeOutBounce的展示,Light风格,鼠标移动到标题条即可切换:
$('#yourdiv').liteAccordion({ 
    theme : 'light',
    firstSlide : 3,
    easing: 'easeOutBounce',
    activateOn: 'mouseover'
});

nikki-liteAccordion.rar
346.72KB

微信支付宝

标签: jQuery 插件 liteAccordion 手风琴效果

评论0 引用0 浏览2788

说点什么:

正文内容:

 




图片博文