無精・短気・傲慢

perlの事 いろいろ

閉じれる半透明のパネル

 半透明のパネルを追加

[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);
}

 閉じたり開いたり

[JavaScript]

<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>

 作ってみる

 画面

 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){