YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » Accordion – jQuery 手风琴效果插件

Accordion – jQuery 手风琴效果插件

程序简介:

Accordion – jQuery 手风琴特效是一个常见的信息展示的效果,我这个手风琴效果支持上下左右4个方向的滚动。但是目前还不支持动态加载数据的处理,个人认为手风琴效果也没有比较加载动态的数据。这个效果非常实用,有兴趣的朋友一定看看。

从上向下滚动

从上向下滚动实例

// 从上向下滚动调用代码
// H - 横向滚动
// V - 纵向
// L - 向左
// R - 向右
// U - 向上
// D - 向下
$('#accordion').accordion({
	tabs: '.accordion-hd',
    contents: '.accordion-md',
	direction: 'V-D',
	lastIndex: 4
});

从下向上滚动

从下向上滚动实例

// 从下向上滚动调用代码
$('#accordion').accordion({
	tabs: '.accordion-hd',
    contents: '.accordion-md',
	direction: 'V-U'
});

从右向左滚动

从右向左滚动

// 从右向左滚动调用代码
$('#accordion').accordion({
	tabs: '.accordion-hd',
    contents: '.accordion-md'
});

从左向右滚动

从左向右滚动实例

// 从左向右滚动调用代码
$('#accordion').accordion({
	tabs: '.accordion-hd',
    contents: '.accordion-md',
	direction: 'H-R',
	lastIndex: 4
});

下载地址:accordion.zip

程序特点:

  • 1. 支持4个方向的滚动
  • 2. 支持设置默认显示项
  • 3. 浏览器兼容性好

程序 JavaScript 源代码:

/**
 * @author Yaohaixiao
 */
$.accordionTabs = function(config){
    this.setting = {
        root: null,
        tabs: null,
        contents: null,
        defaultPos: [],
        lastIndex: 0,
		evtType: 'click',
        direction: 'H-L',
        infoSize: 0
    };
    
	// 合并配置项
    $.extend(this.setting, config);
    
	// 初始化并绑定事件
    this.init().bind();
    
    return this;
};
$.accordionTabs.prototype = {
    init: function(){
        var setting = this.setting, 
		    root = $(setting.root), 
			tabs = null, 
			contents = null,
			direction = setting.direction.toUpperCase().split('-')[0];
        
		// (推荐)设置了root,就在root内查找tabs和contents避免全文遍历,提高性能
        if (root) {
            tabs = setting.tabs = root.find(setting.tabs);
            contents = setting.contents = root.find(setting.contents);
        }
		
		if(!setting.tabs || !setting.contents){
			return false;
		}
		
		// 根据滚动方向,初始化相关配置
		// H - 横向
		// V - 纵向
		if (direction === 'H') {
			// 获得正文内容区的宽度
			setting.infoSize = $(contents[0]).width() - $(tabs[0]).width();
		}
		else {
			if (direction === 'V') {
				setting.infoSize = $(contents[0]).height() - $(tabs[0]).height();
			}
		}
        
        return this;
    },
    bind: function(){
        var setting = this.setting, 
		    tabs = setting.tabs, 
			contents = setting.contents, 
			infoSize = setting.infoSize,
			direction = setting.direction.toUpperCase().split('-')[0],
			scrollDirection = setting.direction.toUpperCase().split('-')[1]
			evtType = setting.evtType;
			
        tabs.each(function(i, tab){
            var curTab = $(tab), 
			    curCnt = $(contents[i]);
            
			if (direction === 'H') {
				// 记录默认的tab初始位置
				setting.defaultPos.push(curCnt.css('left'));
			}
			else {
				if (direction === 'V') {
					// 记录默认的tab初始位置
					setting.defaultPos.push(curCnt.css('top'));
				}
			}
			
            curTab[evtType](function(evt){
                if (setting.lastIndex !== i) {
                    $(tabs[setting.lastIndex]).removeClass('current');
                    $(this).addClass('current');
                    
                    contents.each(function(j, content){
						if (scrollDirection === 'L') {
							if (j < i) {
								if (direction === 'H') {
									$(contents[j]).animate({
										'left': (parseInt(setting.defaultPos[j], 10) - infoSize) + 'px'
									});
								}
							}
							else {
								if (j >= i) {
									if (direction === 'H') {
										$(contents[j]).animate({
											'left': setting.defaultPos[j]
										});
									}
								}
							}
						}
						else{
							if (scrollDirection === 'R') {
								if (j <= i) {
									if (direction === 'H') {
										$(contents[j]).animate({
											'left': setting.defaultPos[j]
										});
									}
								}
								else {
									if (j > i) {
										if (direction === 'H') {
											$(contents[j]).animate({
												'left': (parseInt(setting.defaultPos[j], 10) + infoSize) + 'px'
											});
										}
									}
								}
							}
							else{
								if (scrollDirection === 'D') {
									if (j <= i) {
										if (direction === 'V') {
											$(contents[j]).animate({
												'top': setting.defaultPos[j]
											});
										}
									}
									else {
										if (j > i) {
											if (direction === 'V') {
												$(contents[j]).animate({
													'top': (parseInt(setting.defaultPos[j], 10) + infoSize) + 'px'
												});
											}
										}
									}
								}
								else {
									if (scrollDirection === 'U') {
										if (j < i) {
											if (direction === 'V') {
												$(contents[j]).animate({
													'top': (parseInt(setting.defaultPos[j], 10) - infoSize) + 'px'
												});
											}
										}
										else {
											if (j >= i) {
												if (direction === 'V') {
													$(contents[j]).animate({
														'top': setting.defaultPos[j]
													});
												}
											}
										}
									}
								}
							}
						}
					});
                    
                    setting.lastIndex = i;
                }
            });
        });
        
        return this;
    }
};

$.fn.extend({
	accordion: function(options){
		options.root = $(this);
		
		new $.accordionTabs(options);
	}
});

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:Accordion – jQuery 手风琴效果插件

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)