閉じれる半透明のパネル
半透明のパネルを追加
[html]
<div id="overlay" class="content"> <div class="inner"> @{[$s->panel_content()]} <div id="panel" class="panel hide"></div> </div> </div>
[css]
.content{ position:absolute; top: 375px; left:0px; width:60%; min-width:315px; display:none; z-index:100; } .inner{ padding:10px; background-color:rgba(0,0,0,0.5); }
閉じたり開いたり
<script type="text/javascript"> $(function() { $('#panel').toggle( function() { $(this).addClass('show').removeClass('hide'); $('#overlay').stop().animate( { left : - $('#overlay').width() + 20 + 'px' }, 300 ); }, function() { $(this).addClass('hide').removeClass('show'); $('#overlay').stop().animate( { left : '0px' }, 300 ); } ); $('#overlay').fadeIn(500); }); </script>
作ってみる
- 折りたためるパネルを追加(github)
- 実装してみた
- TODO
- パネルが閉じた状態から始めたい
画面
SOURCE
diff --git a/toolmmt/lib/Tool/mmt/Controller/Menu.pm b/toolmmt/lib/Tool/mmt/Controller/Menu.pm index ef1ca1f..8ed6945 100644 --- a/toolmmt/lib/Tool/mmt/Controller/Menu.pm +++ b/toolmmt/lib/Tool/mmt/Controller/Menu.pm @@ -62,4 +62,48 @@ } return $text; } + sub make_panel{ + my $s = shift; + my $text = <<END_SCRIPT; +<link rel="stylesheet" type="text/css" href="/css/demo.css" /> + +<div id="overlay" class="content"> + <div class="inner"> + @{[$s->panel_content()]} + <div id="panel" class="panel hide"></div> + </div> +</div> + +<script type="text/javascript"> + \$(function() { + \$('#panel').toggle( + function() { + \$(this).addClass('show').removeClass('hide'); + \$('#overlay').stop().animate( { left : - \$('#overlay').width() + 20 + 'px' }, 300 ); + }, + function() { + \$(this).addClass('hide').removeClass('show'); + \$('#overlay').stop().animate( { left : '0px' }, 300 ); + } + ); + \$('#overlay').fadeIn(500); + }); + window.onload = function(){ +// document.getElementById("panel").click(); + }; + +</script> + +END_SCRIPT + return $text; + } + sub panel_content{ + my $s = shift; + my $text = <<END_SCRIPT + <pre> + @{[`cal -3h`]} + @{[`date +"%a %b %d %Y"`]} + </pre> +END_SCRIPT + } 1; diff --git a/toolmmt/public/css/demo.css b/toolmmt/public/css/demo.css new file mode 100644 index 0000000..0941c15 --- /dev/null +++ b/toolmmt/public/css/demo.css @@ -0,0 +1,27 @@ +.content{ + position:absolute; + top: 375px; + left:0px; + width:60%; + min-width:315px; + display:none; + z-index:100; +} +.inner{ + padding:10px; + background:transparent url(/css/black.png) repeat top left; +} +.panel{ + position:absolute; + height:86px; + width:20px; + right:0px; + top:10px; + cursor:pointer; +} +.hide{ + background:transparent url(/css/hide.png) no-repeat center center; +} +.show{ + background:transparent url(/css/show.png) no-repeat center center; +} diff --git a/toolmmt/templates/menu/menu.html.ep b/toolmmt/templates/menu/menu.html.ep index ec27318..48724f8 100644 --- a/toolmmt/templates/menu/menu.html.ep +++ b/toolmmt/templates/menu/menu.html.ep @@ -1,5 +1,6 @@ % layout 'default'; % title 'menu' ; +%== $self->make_panel(); <table width=98%><tr><td style="vertical-align: top;"> % for my $r (@$_data){ % if ($r->{menukbn} =~ /^(H\d)/i){