概要
jQueryベースでポップアップメニューを表示し、選択されたメニューに応じたfunction()を実行する方法。
定型なコードだと思うのだけど、実装すると意外にコード量が必要で面倒だった。今後の省力化のためでクラス(っぽいもの)化してみた、って話。左クリック、右クリック(長押し)への紐付けは click(function(){}), bind("contextmenu", function(){}) で好きなように。
・・・コード量が増えたのは、汎用性を意識したからだ？ハテ？（目を逸らしつつ。
デモはこちら。
なお、jQuery mobile 利用環境であれば、自前実装せずともdata-role="popup" を指定することで簡単に実装できるみたい。⇒ http://qiita.com/tyoshikawa1106/items/f1c7824d9f4614d8a71f
使い方
var menu = new PopupMenu( $, {ポップアップメニュー内容});でインスタンスを生成して、表示したい場所のclick()等でmenu.show(event, this)するのみ。
sample.html
<html lang="ja">
<head>
<title>Pupupメニューテスト</title>
<meta http-equiv="Content-Script-Type" content="text/javascript; charset=utf-8" />
<meta name="viewport" id="id_viewport" content="width=device-width" >
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="./popupmenu.js"></script>
<script language="JavaScript">
<!--
$(document).ready(function(){
var menu1 = new PopupMenu( $, [
{ "title" : "hoge",
"action" : function(){ alert("hoge!"); }
},
{ "title" : "ふが",
"action" : function(){ alert("ふが！"); }
}
]);
var menu2 = new PopupMenu( $, [
{ "title" : "piyo",
"action" : function(e, targetNode){
var target = $(targetNode);
alert( "piyo\r\nクリックエリアの内容：\r\n" + target.text() );
}
},
{ "title" : "foo",
"action" : function(){ alert("foo!"); }
}
]);
var menu3 = new PopupMenu( $, [
{ "title" : "右クリックコンテキストメニュー",
"action" : function(){ alert("スマホでは長押しに相当"); }
}
]);
$("#id_div1").click(function(event){
menu1.show(event, this);
});
$("#id_div2").click(function(event){
menu2.show(event, this);
});
$("#id_div3").click(function(){
menu1.hide(); // これでmenu2, menu3側も閉じる。
}).bind("contextmenu", function(event){
menu3.show(event, this);
return false; // デフォルトのコンテキストメニューを解除
});
});
//-->
</script>
</head>
<body bgcolor="#ccddff">
<div id="id_div1" style="background-color: green;">
<br>
<br>
<br>
ここでクリックするとポップアップ：その１する<br>
<br>
<br>
<br>
</div>
<div id="id_div2" style="background-color: yellow;">
<br>
<br>
<br>
ここでクリックするとポップアップ：その２する<br>
<br>
<br>
<br>
</div>
<div id="id_div3">
<br>
<br>
<br>
ここで（左）クリックすると閉じる。<br>
右クリック（か長押し）すると、ポップアップ：その３する。<br>
<br>
<br>
<br>
</div>
</body>
</html>
ポップアップメニューのクラス定義
上記で利用している、popupmenu.js の定義は以下。
popupmenu.js
/**
* @description ポップアップメニュー表示クラス
* @param{Object} jQueryCommon 利用するjQuery オブジェクトを渡す。静的に使いまわすので、2回目以降はNULL指定可能。
* @param{Object} menuList 表示するポップアップメニューリスト。title, action メンバを持つこと。
*/
function PopupMenu( jQueryCommon, menuList ){
/**
* @description ポップアップメニューに表示するリスト。title, action メンバを持つ。
*/
this.itsMenuList = menuList;
/**
* @description 設定されたポップアップメニューの最大文字列。デフォルト14文字。
*/
this.itsMaxStringLength = (function( list, defaultLength ){
var i, n = list.length, title, action;
for( i=0; i<n; i++ ){
title = list[i].title;
action = list[i].action;
if( (title && action) && ( defaultLength < title.length ) ){
defaultLength = title.length;
}
}
return defaultLength;
}(menuList, 14));
this.itsId = "_id_popup"; // ※init()の中で数字を付加してユニーク化される。
this.init( jQueryCommon );
};
(function(){
/**
* @description ポップアップメニューのdiv要素CSS
*/
var MENU_DIV_CSS = {
"position" : "absolute",
"min-width" : "200px",
"background-color" : "#eeeeee",
"border": "1pt solid #666666",
"box-shadow" : "2px 2px 4px 0px #666666"
};
/**
* @description ポップアップメニューのulタグのCSS
*/
var MENU_UL_CSS = {
"border": "0pt",
"margin" : "2px",
"padding" : "6px",
"line-height": "12pt",
"color": "#000",
"list-style" : "none",
"font-size" : "11pt"
};
/**
* @description ポップアップメニュー項目のCSS
*/
var LI_CSS = {
"padding" : "6px",
"background-color" : "#eeeeee",
"border" : "1px solid transparent"
};
/**
* @description ポップアップメニュー項目のHover時のCSS
*/
var LI_CSS_HOVER = {
"background-color" : "#d1e2f2",
"border" : "1px solid #78aee5"
}; // http://www.tohoho-web.com/wwwxx035.htm
/**
* @description このクラスで利用するjQuery。
*/
var jQ = null;
/**
* @description 生成されたポップアップメニューIDのリスト。
*/
var menuIds = [];
/**
* @description 全てのポップアップメニューを非表示にする。
* @param{String} exceptId 捜査対象外のID。null指定なら、全部を「非表示」にする。
*/
var hideAll = function( exceptId ){
var n = menuIds.length;
var target;
while( 0<n-- ){
target = jQ("#" + menuIds[n]);
if( (menuIds[n] != exceptId) && (target.size() > 0) ){
target.hide();
}
}
}
/**
* @description 最近のshow()で渡された、第一引数Eventと、第二引数。
*/
var staticLastEvent = null, staticLastParam = null;
/**
* @description 本クラスの初期化。
* @param{Object} initJQuery jQueryオブジェクトを渡す。初回以降はnullでも構わない。
*/
PopupMenu.prototype.init = function( initJQuery ){
var BIND_INDEX_ATTR = "data-action-index";
var i, list = this.itsMenuList, n = list.length, str, title, action;
var target, item;
jQ = (!jQ) ? initJQuery : jQ;
this.itsId += "_" + menuIds.length;
target = jQ("body");
target.append( "<div id='" + this.itsId + "' style='display:none;'><div>" );
target = jQ("#" + this.itsId);
target.css( MENU_DIV_CSS );
str = "<ul>";
for( i=0; i<n; i++ ){
title = list[i].title;
action = list[i].action;
if( title && action ){
str += "<li " + BIND_INDEX_ATTR + "='" + i + "'>" + title + "</li>";
}
}
str += "</ul>";
target.append( str );
target = target.children("ul").eq(0);
target.css( MENU_UL_CSS );
target = jQ("#" + this.itsId + " ul li" );
target.css( LI_CSS );
target.hover(
function(){ jQ(this).css( LI_CSS_HOVER ); },
function(){ jQ(this).css( LI_CSS ); }
);
target.click(function(event){
var item = jQ(this);
var index = item.attr( BIND_INDEX_ATTR );
hideAll(null);
list[ index ].action( staticLastEvent, staticLastParam );
})
menuIds.push( this.itsId );
}
/**
* @description ポップアップメニューを表示する。
* メニュー以外の場所をクリックすると消える。他のポップアップメニューが表示された時も、以前のは消える。
* @param{event} event jQuery.click(function(event){})で渡されるeventオブジェクトを指定する。
* 呼び出し先の関数の引数にそのまま渡す。
* @param{Object} paramObj newの際のactionパラメータに指定された関数呼び出し時の第二引数に渡される。
* 通常はthisを渡すこと。
*/
PopupMenu.prototype.show = function(event, paramObj){
/*
[メモ] click() はeventが渡される仕様。
---
jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。
このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います
http://semooh.jp/jquery/api/events/click/fn/
*/
var target = jQ("#" + this.itsId);
var isShowed = (target.css("display") == "none");
var pos;
hideAll( this.itsId );
if( isShowed ){
pos = this.getMenuPosition( event );
target.css({
"top" : pos.pageY + "px",
"left" : pos.pageX + "px",
});
target.slideDown("fast");
staticLastEvent = event;
staticLastParam = paramObj;
}else{
target.hide();
}
};
/**
* @description ポップアップメニュー表示毎に、表示位置決めのためにcallbackされる。
* サブクラスで任意にオーバーライドのこと。
*/
PopupMenu.prototype.getMenuPosition = function( event ){
return { "pageX" : event.pageX, "pageY" : event.pageY };
};
/**
* @description 表示中のポップアップメニューを全て非表示にする。
*/
PopupMenu.prototype.hide = function(){
hideAll( null );
};
}());
表示位置の任意修正
ポップアップメニューの表示位置を変更する場合は、以下のように上記を継承したサブクラスを生成して行う。下記を用いて new PopupMenuMobile($,{}) すればOK。デモの2つ目のdivタグにはこちらを適用。
popupmenu_mobile.js
/**
* 表示位置を左側へずらしたポップアップメニュー
*/
var PopupMenuMobile = function( jQueryCommon, menuList ){
PopupMenu.call(this, jQueryCommon, menuList);
};
PopupMenuMobile.prototype = Object.create( PopupMenu.prototype );
PopupMenuMobile.prototype.getMenuPosition = function( event ){
var nX = event.pageX - this.itsMaxStringLength * 14 + 8;
nX = (nX > 0) ? nX : 0;
return { "pageX" : nX, "pageY" : event.pageY };
};
以上ー。
補足
hideAll() のタイミングで、無効なIDは削除した方が良いかもしれない。そこまで大量のメニューを定義するとは思えなかったので、実装しなかったけど。