OverlayTemplate
by
Borom
2014-09-22 [2014/09/22 00:31:07]
オーバーレイ表示の基本テンプレート
@@ -7,7 +7,7 @@
*/
// ToDo
-// [ ] 削除処理をフェードアウトに
+// [ ] 表示・削除処理をフェードアウトに
// [ ] オーバーレイを天地中央に表示する
// [ ] ウィンドウリサイズへの位置・サイズ変更自動追従
@@ -17,6 +17,9 @@
// オプション設定
var settings = $.extend({}, {
// デフォルトパラメータ指定
+ openAnimation: false,
+ closeAnimation: true,
+
shadowName: "let-overlay-shadow",
shadowZIndex: 99998,
shadowOpacity: 0.6,
@@ -27,8 +30,6 @@
contentZIndex: 99999,
contentColor: "#fff",
contentRadius: "10px",
- contentTop: "10px",
- contentLeft: "10px",
contentWidth: 400,
contentHeight: 300,
@@ -53,6 +54,19 @@
removeOverlay( settings.contentClassName );
}
});
+
+ // ウィンドウリサイズ時のサイズ・位置調整
+ var windowTimer = false;
+ $(window).resize(function(){
+ if ( windowTimer !== false) {
+ clearTimeout ( windowTimer );
+ }
+ windowTimer = setTimeout(function() {
+ restyleContent();
+ },200);
+ });
+
+
$(document).on("click", "#" + settings.shadowName + " , ." + settings.closeButtonClassName , function() {
removeOverlay( settings.contentClassName );
});
@@ -61,13 +75,11 @@
// オーバーレイ生成関数
function createOverlay ( param ){
+ // 生成用HTMLテキスト
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 windowSize = {
height: 0,
width: 0,
@@ -90,6 +102,11 @@
contentSize.width = param.contentWidth;
}
+ var contentPosition = {
+ top: 10,
+ left: 10,
+ }
+
// ウィンドウ高さが指定コンテンツサイズ以下だった場合、
// コンテンツ高さをウィンドウ幅-40に指定
if (windowSize.height < param.contentHeight){
@@ -113,34 +130,39 @@
background: param.contentColor,
borderRadius: param.contentRadius,
position: "fixed",
- top: param.contentTop,
- left: param.contentLeft,
+ top: contentPosition.top,
+ left: contentPosition.left,
width: contentSize.width,
height: contentSize.height,
zIndex: param.contentZIndex,
}
};
-
-
- console.log(contentSize);
- console.log(windowSize);
-
// body 末尾にオーバーレイ用HTMLを追加
$("body").append(htmlOverlay);
+ // シャドウ・コンテンツの各オブジェクト取得
+ var elemShadow = $("#" + param.shadowName);
+ var elemContent = $("#" + param.contentName);
+
+
// シャドウのCSS指定
if(!param.disableShadowStyle){
- $(idShadow).css(cssSettings.shadow);
+ elemShadow.css(cssSettings.shadow);
}
// コンテンツのCSS指定
if(!param.disableContentStyle){
- $(idContent).css(cssSettings.content);
+ elemContent.css(cssSettings.content);
}
};
+ // コンテンツ領域の再描画関数
+ function restyleContent ( param ){
+ return false;
+ }
+
// オーバーレイ削除関数
function removeOverlay( overlayClass ) {
@@ -160,4 +182,5 @@
disableContentStyle: false,
disableShadowStyle: false,
});
+ $("#let-overlay-content").append("Hello, World");
});
/*
* @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({}, {
// デフォルトパラメータ指定
openAnimation: false,
closeAnimation: true,
shadowName: "let-overlay-shadow",
shadowZIndex: 99998,
shadowOpacity: 0.6,
shadowColor: "#999",
contentName: "let-overlay-content",
contentClassName: "let-overlay",
contentZIndex: 99999,
contentColor: "#fff",
contentRadius: "10px",
contentWidth: 400,
contentHeight: 300,
disableShadowStyle: false,
disableContentStyle: false,
closeButtonClassName: "let-close",
}, options);
// プラグイン動作の記述
// オーバーレイ生成処理
if( !$("." + settings.contentClassName ).length){
createOverlay(settings);
}
// オーバーレイ削除処理
$(document).on("keydown", "body", function( e ){
if( e.keyCode == 27 ) {
removeOverlay( settings.contentClassName );
}
});
// ウィンドウリサイズ時のサイズ・位置調整
var windowTimer = false;
$(window).resize(function(){
if ( windowTimer !== false) {
clearTimeout ( windowTimer );
}
windowTimer = setTimeout(function() {
restyleContent();
},200);
});
$(document).on("click", "#" + settings.shadowName + " , ." + settings.closeButtonClassName , function() {
removeOverlay( settings.contentClassName );
});
// オーバーレイ生成関数
function createOverlay ( param ){
// 生成用HTMLテキスト
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 windowSize = {
height: 0,
width: 0,
};
var contentSize = {
height: 0,
width: 0,
};
windowSize.width = $(window).width();
windowSize.height = $(window).height();
// ウィンドウ幅が指定コンテンツサイズ未満だった場合、
// コンテンツ幅をウィンドウ幅-40に指定
if (windowSize.width < param.contentWidth){
contentSize.width = windowSize.width - 40;
} else {
contentSize.width = param.contentWidth;
}
var contentPosition = {
top: 10,
left: 10,
}
// ウィンドウ高さが指定コンテンツサイズ以下だった場合、
// コンテンツ高さをウィンドウ幅-40に指定
if (windowSize.height < param.contentHeight){
contentSize.height = windowSize.height - 40;
} else {
contentSize.height = param.contentHeight;
}
var cssSettings = {
shadow: {
background: param.shadowColor,
opacity: param.shadowOpacity,
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
zIndex: param.shadowZIndex,
},
content : {
background: param.contentColor,
borderRadius: param.contentRadius,
position: "fixed",
top: contentPosition.top,
left: contentPosition.left,
width: contentSize.width,
height: contentSize.height,
zIndex: param.contentZIndex,
}
};
// body 末尾にオーバーレイ用HTMLを追加
$("body").append(htmlOverlay);
// シャドウ・コンテンツの各オブジェクト取得
var elemShadow = $("#" + param.shadowName);
var elemContent = $("#" + param.contentName);
// シャドウのCSS指定
if(!param.disableShadowStyle){
elemShadow.css(cssSettings.shadow);
}
// コンテンツのCSS指定
if(!param.disableContentStyle){
elemContent.css(cssSettings.content);
}
};
// コンテンツ領域の再描画関数
function restyleContent ( param ){
return false;
}
// オーバーレイ削除関数
function removeOverlay( overlayClass ) {
$("." + overlayClass).remove();
return false;
};
};
}( jQuery ) );
// 実行
$(function(){
$().letOverlay({
contentWidth: 800,
contentHeight: 600,
disableContentStyle: false,
disableShadowStyle: false,
});
$("#let-overlay-content").append("Hello, World");
});
- Permalink
- このページへの個別リンクです。
- RAW
- 書かれたコードへの直接のリンクです。
- Packed
- 文字列が圧縮された書かれたコードへのリンクです。
- Userscript
- Greasemonkey 等で利用する場合の .user.js へのリンクです。
- Loader
- @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
- Metadata
- コード中にコメントで @xxx と書かれたメタデータの JSON です。
