読者です 読者をやめる 読者になる 読者になる

Code Log

プログラミングの勉強メモを残していきます。

20140705 午前


<スポンサーリンク>

最近はSIerっぽい仕事ばっかり。 打ち合わせ多くて仕事がつまらない。

早くこんなとこ辞められるように頑張らないと。 辞めないうちは、文句もいえない。

実力つける。

<!doctype html>
<html>
<head>
  <title>SPA</title>
  <style type="text/css">
    body {
      width : 100%;
      height : 100%;
      overflow : hidden;
      background-color : #777;
    }

    #spa {
        position : absolute;
        top : 8px;
        left : 8px;
        bottom : 8px;
        right : 8px;
        border-radius : 8px 8px 0 8px;
        background-color : #fff;
    }
    .spa-slider {
        position : absolute;
        bottom : 0;
        right : 2px;
        width : 300px;
        height : 16px;
        cursor : pointer;
        border-radius : 8px 0 0 0;
        background-color : #f00;
    }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script type="text/javascript">
  var spa = (function ( $ ) {
   var configMap = {
     extended_height : 434,
     extended_title : 'Click to retract',
     retracted_height : 16,
     retracted_title : 'Click to extend',
     template_html : '<div class="spa-slider"><\/div>'
   },

   $chatSlider,
   toggleSlider,onClickSlider,initModule;

   toggleSlider = function() {
       var slider_height = $chatSlider.height();

       if (slider_height === configMap.retracted_height) {
           $chatSlider
               .animate({ height : configMap.extended_height })
               .attr( 'title', configMap.extended_title);
           return true;
       } else if ( slider_height === configMap.extended_height) {
           $chatSlider
               .animate({ height : configMap.retracted_height })
               .attr( 'title', configMap.retracted_title);

           return true;
       }

       return false;
   }

   onClickSlider = function ( event ) {
       toggleSlider();
       return false;
   };

   initModule = function ( $container ) {
       $container.html( configMap.template_html );
       $chatSlider = $container.find('.spa-slider');

       $chatSlider
         .attr( 'title', configMap.retracted_title)
         .click( onClickSlider );

       return true;
   };

   return { initModule : initModule};
  }( jQuery ));

  jQuery(document).ready(
   function () { spa.initModule( jQuery('#spa'));}
  );

  </script>
</head>
<body>
  <div id="spa"></div>
</body>

</html>

JavaScriptをどんどん書いていこう。 会社の古臭いシステムは休みの日は見たくない。