Last active
April 25, 2016 01:34
-
-
Save nekoneko-wanwan/83d71148804959bb442326ee667f5f76 to your computer and use it in GitHub Desktop.
もっと見るをvelocity.jsで実装する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="#" data-slide-trigger="A" data-slide-toggle="true">Aをクリックすると...</a> | |
<div class="js-slide-target" data-slide-target="A">Aが開きます!</div> | |
<a href="#" data-slide-trigger="B" data-slide-toggle="false">Bをクリックすると...</a> | |
<div class="js-slide-target" data-slide-target="B">Bが開きます!クリックしたものはremoveされるぞ</div> | |
<a href="#" data-slide-trigger="C" data-slide-toggle="true">Cをクリックすると...</a> | |
<div class="js-slide-target" data-slide-target="C">Cが開きます!</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* スライド表示(more)イベント設定 | |
* 特定のdata属性が付与されたものに対してイベント付与 | |
* - data-slide-trigger="hoge" をクリックすると | |
* - data-slide-target="hoge" に対してスライド処理が走る | |
* - data-slide-triggerに、data-slide-toggle="true"が設定されている場合は、Toggle処理をする | |
*/ | |
var addMoreEvent = function() { | |
var $trigger = $('[data-slide-trigger]'), | |
$target = $('[data-slide-target]'); | |
// 初期設定としてターゲットを非表示に | |
// cssで対応する場合は無効に | |
$target.hide(); | |
var clickEventHandler = function() { | |
var $self = $(this), | |
isToggle = $self.data('slide-toggle') || false, | |
targetName = $self.data('slide-trigger'), | |
$target = $('[data-slide-target="'+targetName+'"]'); | |
// Toggleが無ければ表示とトリガー削除を実行 | |
if (isToggle === false) { | |
$self.velocity({ | |
opacity: 0 | |
}, { | |
duration: 300, | |
complete: function() { | |
$target.velocity('slideDown', { duration: 300 }); | |
$self.velocity('slideUp', { duration: 300 }); | |
} | |
}); | |
} | |
// Toggleがあれば再利用できるように | |
if (isToggle === true) { | |
$self.toggleClass('is-opened'); | |
if ($self.hasClass('is-opened')) { | |
$target.velocity('fadeIn', { duration: 300 }); | |
} else { | |
$target.velocity('fadeOut', { duration: 300 }); | |
} | |
} | |
return false; | |
}; | |
$trigger.on('click', clickEventHandler); | |
}; | |
// document ready後に実行する | |
addMoreEvent(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
スライド表示動作が微妙な場合は、moreボタンのcssをabsoluteにして↓のように