jqueryは右クリックメニューplug-in_jqueryを実装します

今日、プロジェクトを開発するときに、マウスの右クリック メニューをシミュレートする機能が必要です。つまり、Web ページ上でマウスを右クリックすると、システム メニューではなく、私たちが作成したコンテンツがポップアップします。これにより、右クリックの機能を拡張できます。実装プロセスについては特に言う必要はありません。コードと効果は次のとおりです。

js 部分:

コードをコピーします コードは次のとおりです:

//右クリックメニューを作成
var epMenu={
create:function(point,option){
var menuNode=document.getElementById('epMenu');
if(!menuNode){
// 誰もいない場合にメニュー ノードを作成します
menuNode=document.createElement("div");
menuNode.setAttribute('class','epMenu');
menuNode.setAttribute('id','epMenu');
}else $(menuNode).html('');// 内部のコンテンツをクリアします

$(menuNode).css({left:point.left 'px',top:point.top 'px'});
for(オプションの変数 x){
var tempNode=document.createElement("a");
$(tempNode).text(option[x]['name']).on('click',option[x].action);
menuNode.appendChild(tempNode);
}

$("body").append(menuNode);
}、
デストリー:function(){
$(".epMenu").remove();
}
};

コードの CSS 部分は次のとおりです:

コードをコピーします コードは次のとおりです:

/*右クリックメニュー*/
.epMenu{ 幅:120px; 位置:固定; 上:0; 2px 2px 2px #807878; .epMenu a{ 表示:ブロック; 高さ:25px; ボーダートップ:1px ソリッド #fff; -サイズ:14px; カーソル:デフォルト;}
.epMenu a:hover{background:#fff;}

次のように呼び出しコードを作成します:

コードをコピーします コードは次のとおりです:

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'画像コンポーネントを追加','アクション':addImage}]);

破壊呼び出しコードは次のとおりです:

コードをコピーします コードは次のとおりです:

epMenu.destory();

効果は次のとおりです:

呼び出し手順:

作成: epMenu.create(point,option);

point は整数型で、ブラウザの左上隅を基準としたメニューの位置を示します。

例: {左:100、上:500}

option json 配列タイプはメニュー項目を表し、name は名前を表し、action はクリックによってトリガーされるアクションを表します。

例: [{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'Add Image Component','action':addImage}]

破壊: epMenu.destory();

破壊にはパラメータは必要ありません。

これは実際には非常に簡単です。写真の追加や二次メニューなどの拡張も可能です。このプロジェクトの開発要件は比較的単純なので、それだけです。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。