手风琴动画菜单插件 Kwicks

评论(1)

Kwicks 是在 Jquery 基础上的一个插件,主要作用是类似于用一种手风琴似的伸缩效果去展示你的菜单,或其他你想展示的罗列内容,今天我们来研究一下。

Kwicks插件介绍

官方直译的大概意思是:Kwicks插件是建立在JQUERY基础上的,用于展示一个性感的、折叠的菜单。
目前有很多

使用

// 原始调用
$(element).kwicks(opts);
 
// 调用一个其中一个方法(稍后介绍方法)
$(element).kwicks('method-name' [, param]);
 
// 处理事件
$(element).on('event-name.kwicks', handler);

插件参数配置

  • size:(必须):
    默认是以像素为单位,如果isVertical设置为真(ture)的话,那该设定的是高度,其他的情况是设定宽度。
  • max|min:(必须)
    设定展开和折叠时的宽度、高度。
    不能同时设定最大值和最小值。
  • spacing:(默认值: 5)
    每个菜单之间的间隔。
  • duration:(默认值: 500)
    动画运行的毫秒数。
  • isVertical:(默认值: false)
    是否为垂直菜单。
  • easing:(默认值: none)
    动画效果。
  • behavior:(默认值: none)
    初始动作。

支持的浏览器

  • Chrome 12+
  • FF 3.6+
  • IE7+
  • Opera 11+
  • Safari 5+

方法

先把英文贴上吧,因为篇幅太长留待日后补充成中文。

Kwicks provides four API methods that may be used for programmatic control and inspection of the plugin.

expand

Expands the panel with the specified index (use -1 to expand none).

$(container).kwicks(‘expand’, index);

Alternatively, the expand method may also be invoked directly on a panel (rather than the container). For example,

$(container).children().eq(index).kwicks(‘expand’);

…performs the same action as the previous example
expanded

Returns the index of the currently expanded panel (or -1 if no panels are expanded).

var index = $(container).kwicks(‘expanded’);

select

Selects the panel with the specified index (use -1 to select none). Please note that most use cases will not require the use of select. Calling select has the same effect as calling expand, except that select is stateful. That is, once a panel has been selected, it will maintain that state even after other panels have been expanded. When $(element).kwicks(‘expand’, -1); is invoked, the currently selected panel will be expanded, if it exists.

$(container).kwicks(‘select’, index);

Just like expand, select may also be invoked directly on a panel:

$(container).children().eq(index).kwicks(‘select’);

Note: if you want a panel to be automatically selected on initialization, simply add a kwicks-selected class to its markup.
selected

Returns the index of the currently selected panel (or -1 if no panels are selected).

var index = $(container).kwicks(‘selected’);

事件

All Kwicks interactions trigger events that can be used to react to (or cancel) behavior.

expand.kwicks

Fired before a panel is expanded.

$(container).on(‘expand.kwicks’, function(e, data) {
// panel index
console.log(data.index);

// e.target is the panel, unless we’re expanding “none”
if (data.index === -1) {
// e.target is the container node
} else {
// e.target is the panel to be expanded
}

// prevent the panel from expanding
e.preventDefault();
});

select.kwicks

Same behavior as expand.kwicks, except that it is (obviously) triggered before a panel is selected:

$(container).on(‘select.kwicks’, function(e, data) {
// panel index
console.log(data.index);

// e.target is the panel, unless we’re selecting “none”
if (data.index === -1) {
// e.target is the container node
} else {
// e.target is the panel to be selected
}

// prevent the panel from being selected
e.preventDefault();
});





转载请注明转自: 手风琴动画菜单插件 Kwicks

  1. 你这里的东西。。。都有点难啊~