0.0.2 • Published 6 years ago
ds-accordions v0.0.2
ds-accordions ( Don't Need jQuery )
ds-accordionsは、jQueryを必要としないアコーディオン機能のライブラリです。
- Target browser : IE9+
- IE9の場合は transition 無しでアコーディオンが開閉します。
Install
npm i ds-accordions -SImport
import DsAccordions from 'ds-accordions';Constructor
new DsAccordions(element [, option]);| Argument | Data type | Default | Descroption |
|---|---|---|---|
| element | String | -(Required) | 対象要素を指定します。ex) ".accordion" |
| option | Object | - | ex) option = { toggleSpeed: 100, btnElm: "dl dt", detailElm: "dl dd"} |
| Option | Data type | Default | Descroption |
|---|---|---|---|
| toggleSpeed | Number | 0 | 開閉のスピードを調節できます。 |
| btnElm | String | ".accordion_btn"(“.accordion”の場合) | ボタンとなる要素を指定できます。 |
| detailElm | String | ".accordion_detail"(“.accordion”の場合) | 内容となる要素を指定できます。 |
Method
| Method | Argument | Descroption |
|---|---|---|
| Toggle( element ) | String | element で指定したアコーディオンの開閉を操作します。( ex: ".default_open" ) |
| Open( element ) | String | element で指定したアコーディオンを開きます。 |
| Close( element ) | String | element で指定したアコーディオンを閉じます。 |
| OpenEnd = function(){}; | - | アコーディオンが開いた後に実行されます。 |
| CloseEnd = function(){}; | - | アコーディオンが閉じた後に実行されます。 |
Demo
https://dsflon.github.io/ds-accordion/
import DsAccordions from 'ds-accordions';
let DsAccordions = new DsAccordions(".accordion");
DsAccordions.OpenEnd = function(){
console.log("OpenEnd");
};
DsAccordions.CloseEnd = function(){
console.log("CloseEnd");
};
////
let DsAccordions2 = new DsAccordions(
".accordion2",
{
toggleSpeed: 200,
btnElm: "dt",
detailElm: "dd"
}
);
setTimeout(function() {
DsAccordions2.Open( ".open" );
},1000);
setTimeout(function() {
DsAccordions2.Close(".close");
},2000);