OverlayTemplate

by Borom 2014-09-22 [2014/09/22 00:31:07]

オーバーレイ表示の基本テンプレート

@@ -39,53 +39,67 @@
 
 
     // プラグイン動作の記述
-    var htmlShadow = "<div id=\"" + settings.shadowName + "\" class=\"" + settings.contentClassName + "\"></div>";
-    var htmlContent = "<div id=\"" + settings.contentName + "\" class=\"" + settings.contentClassName + "\"></div>";
-    var htmlOverlay = htmlShadow + htmlContent;
+
 
     // オーバーレイ生成処理
     if( !$("." + settings.contentClassName ).length){
-      
-      // DOM要素の追加
-      $("body").append(htmlOverlay);
-      
-      // シャドウのCSS設定
-      $("#" + settings.shadowName ).css({
-        background: settings.shadowColor,
-        opacity: settings.shadowOpacity,
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-      });
-
-      // オーバーレイ本体のCSS設定
-      $("#" + settings.contentName ).css({
-        background: settings.contentColor,
-        borderRadius: settings.contentRadius,
-        position: "fixed",
-        top: settings.contentTop,
-        left: settings.contentLeft,
-        width: settings.contentWidth,
-        height: settings.contentHeight,
-      });
-
-
+      createOverlay(settings);
     }
 
     // オーバーレイ削除処理
     $(document).on("keydown", "body", function( e ){
       if( e.keyCode == 27 ) {
-        $( "." + settings.contentClassName ).remove();
-        return false;
+        removeOverlay( settings.contentClassName );
       }
     });
     $(document).on("click", "#" + settings.shadowName , function() {
-      $( "." + settings.contentClassName ).remove();
-      return false;
+      removeOverlay( settings.contentClassName );
     });
 
+
+
+    // オーバーレイ生成関数
+    function createOverlay ( param ){
+      var htmlShadow = "<div id=\"" + param.shadowName + "\" class=\"" + param.contentClassName + "\"></div>";
+      var htmlContent = "<div id=\"" + param.contentName + "\" class=\"" + param.contentClassName + "\"></div>";
+      var htmlOverlay = htmlShadow + htmlContent;
+
+      var idShadow = "#" + param.shadowName;
+      var idContent = "#" + param.contentName;
+
+      var cssSettings = {
+        shadow: {
+          background: param.shadowColor,
+          opacity: param.shadowOpacity,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+        }, 
+        content : {
+          background: param.contentColor,
+          borderRadius: param.contentRadius,
+          position: "fixed",
+          top: param.contentTop,
+          left: param.contentLeft,
+          width: param.contentWidth,
+          height: param.contentHeight,
+        }
+      };
+
+
+      $("body").append(htmlOverlay);
+      $(idShadow).css(cssSettings.shadow);
+      $(idContent).css(cssSettings.content);
+    };
+
+    // オーバーレイ削除関数
+    function removeOverlay( overlayClass ) {
+      $("." + overlayClass).remove();
+      return false;
+    };
+
   };
 }( jQuery ) );
 

• /*
   * @title OverlayTemplate
   * @description オーバーレイ表示の基本テンプレート
   * @include http://*
   * @license MIT License
   * @require http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
   */
  
  // ToDo
  // [ ] 削除処理をフェードアウトに
  // [ ] オーバーレイサイズを自動調整（パラメータで指定した値よりウィンドウが小さい場合はウィンドウサイズを基準に調整する）
  // [ ] オーバーレイを天地中央に表示する
  
   // プラグイン部分
  (function ( $ ){
    $.fn.letOverlay = function ( options ) {
      // オプション設定
      var settings = $.extend({}, {
        // デフォルトパラメータ指定
        shadowName: "let-overlay-shadow",
        shadowZIndex: 99998,
        shadowOpacity: 0.6,
        shadowColor: "#999",
  
        contentName: "let-overlay-content",
        contentZIndex: 99999,
        contentColor: "#fff",
        contentRadius: "10px",
        contentTop: "10px",
        contentLeft: "10px",
        contentWidth: "400px",
        contentHeight: "300px",
  
  
  
  
        contentClassName: "let-overlay"
      }, options);
  
  
      // プラグイン動作の記述
  
  
      // オーバーレイ生成処理
      if( !$("." + settings.contentClassName ).length){
        createOverlay(settings);
      }
  
      // オーバーレイ削除処理
      $(document).on("keydown", "body", function( e ){
        if( e.keyCode == 27 ) {
          removeOverlay( settings.contentClassName );
        }
      });
      $(document).on("click", "#" + settings.shadowName , function() {
        removeOverlay( settings.contentClassName );
      });
  
  
  
      // オーバーレイ生成関数
      function createOverlay ( param ){
        var htmlShadow = "<div id=\"" + param.shadowName + "\" class=\"" + param.contentClassName + "\"></div>";
        var htmlContent = "<div id=\"" + param.contentName + "\" class=\"" + param.contentClassName + "\"></div>";
        var htmlOverlay = htmlShadow + htmlContent;
  
        var idShadow = "#" + param.shadowName;
        var idContent = "#" + param.contentName;
  
        var cssSettings = {
          shadow: {
            background: param.shadowColor,
            opacity: param.shadowOpacity,
            position: "fixed",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
          }, 
          content : {
            background: param.contentColor,
            borderRadius: param.contentRadius,
            position: "fixed",
            top: param.contentTop,
            left: param.contentLeft,
            width: param.contentWidth,
            height: param.contentHeight,
          }
        };
  
  
        $("body").append(htmlOverlay);
        $(idShadow).css(cssSettings.shadow);
        $(idContent).css(cssSettings.content);
      };
  
      // オーバーレイ削除関数
      function removeOverlay( overlayClass ) {
        $("." + overlayClass).remove();
        return false;
      };
  
    };
  }( jQuery ) );
  
  
  // 実行
  $(function(){
    $().letOverlay();
  });

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。