iOS7の通知センターの削除ボタンをjsで書いてみる
友人に実装の仕方を尋ねられたので,iOS7の通知センターの削除ボタンをjsで実装してみた(下記のgif画像みたいなぼたんのことです).
下記に必要最低限のhtml, css, javascriptを示します.
(jQueryが必要です.)
html
<div class="toggle-btn clearfix"> <div class="front">+</div> <div class="back">消去</div> </div>
.clearfix { min-height: 1px; } .clearfix:after { content: ""; display: block; clear: both; height: 0; } .toggle-btn { float :right; background-color: #666; color: #fff; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; height: 20px; line-height: 20px; text-align: center; font-size: 12px; } .toggle-btn > div { float: left; } .toggle-btn > .front { width: 20px; } .toggle-btn > .back { display: none; width: 40px; }
js
$(".toggle-btn > .front").on("click",function(){ var $tgBtn = $(this).parent(); var $back = $tgBtn.find('.back'); var that = this; $tgBtn.animate({ 'width': $back.width(), }, 300); $(this).animate({zIndex:1},{ duration: 300, step:function(z){ $(this).css({transform:'rotate(' + (z * -45) + 'deg)'}); }, complete:function(){ $(that).css('zIndex', 0) .fadeOut(300, function(){ $back.fadeIn(300); }); } }); ; });
簡易な実装なので,微妙に挙動が違いますが,参考程度に.