1. 効果の実証1.1、友達の右クリックメニュー: 1.2. グループの右クリックメニュー: 1.3. グループの右クリックメニュー: 2. 実装チュートリアル次に、友達の右クリック メニューを例にとります。実装手順は次のとおりです。 /* フレンドの右クリックイベントをバインド */ $('body').on('mousedown', '.layim-list-friend li ul li', function(e){ // 右クリック以外のイベントをフィルタリングする if(3 != e.which) { 戻る; } // イベントのディスパッチを停止します e.stopPropagation(); var othis = $(this); // 後で関数を使いやすくするために友達番号を取得します (友達番号をバインドするには、layim.js ソース コードを変更する必要があります。または、クラス内で友達番号を直接インターセプトする必要があります。これは、ページで F12 を押すと表示されます) var mineId = $(this).data('mineid'); var uid = Date.now().toString(36); var space_icon = ' '; var space_text = ' '; var html = [ '<ul id="contextmenu_'+uid+'" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="1">', '<li data-type="menuChat"><i class="layui-icon" ></i>'+space_icon+'インスタント メッセージを送信</li>', '<li data-type="menuProfile"><i class="layui-icon"></i>'+space_icon+'プロフィールを表示</li>', '<li data-type="menuHistory"><i class="layui-icon" ></i>'+space_icon+'メッセージ履歴</li>', '<li data-type="menuDelete">'+space_text+'友達を削除</li>', '<li data-type="menuMoveto">'+space_text+'移動</li></ul>' ]。参加する(''); // ポップアップウィンドウlayer.tips(html, othis, { ヒント: 1 、時間: 0 、シフト: 5 、修正: 真 、スキン: 'ayui-box layui-layim-contextmenu' }); }); ここでは右クリック イベントが正常にバインドされていますが、ポップアップ ウィンドウによって友人の名前とアバターが直接ブロックされており、あまり使いやすくありません。最適化するにはどうすればよいでしょうか。読み進めてみましょう。 2.2. ポップアップウィンドウの位置をリセットします。 レイヤー.ヒント(html, othis, { ヒント: 1 、時間: 0 、シフト: 5 、修正: 真 、スキン: 'ayui-box layui-layim-contextmenu' 、成功: function(layero){ // -----#Start---------- ポップアップウィンドウの位置をリセットする---------------- var stopmp = function (e) { stope(e); }; レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp); var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu'); // 右クリックボックス li の数を取得します。 var liCount = (html.split('</li>')).length; // 元のポップアップ ボックスの位置を取得します。var top = layerobj.css('top').toLowerCase().replace('px',''); var left = layerobj.css('left').toLowerCase().replace('px',''); // 位置パーソナリティ調整 top = getTipTop(1, top, liCount); 左 = 30 + parseInt(左); // 箇条書きボックスの位置を移動します。layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'}); $('.layui-layim-contextmenu li').css({'padding-left':'18px'}); // -----#End---------- ポップアップウィンドウの位置をリセットします---------------- } }); // ウィンドウのドキュメント表示領域の高さを取得します。 var currentHeight = getViewSizeWithScrollbar(); 関数 getViewSizeWithScrollbar(){ var クライアントの高さ = 0; if(window.innerWidth){ クライアントの高さ = window.innerHeight; }そうでない場合、(document.documentElement.offsetWidth == document.documentElement.clientWidth){ クライアントの高さ = document.documentElement.offsetHeight; }それ以外{ クライアントの高さ = document.documentElement.clientHeight + getScrollWith(); } クライアントの高さ = クライアントの高さ - 180; clientHeight を返します。 } /** * 先端位置の高さを計算します * @param type type (1 友達、グループ、2 グループ) * @param top 元の箇条書きフレームの高さ* @param liCount 箇条書きフレームレイヤー内のliの数*/ var getTipTop = 関数 (type, top, liCount) { liCount--; if(トップ > (現在の高さ-45*liCount)){ 上部 = parseInt(上部) - 45; }それ以外{ if(type == 1){ 上部 = parseInt(上部) + 30*liCount - 10; }それ以外{ 上部 = parseInt(上部) + 30*(liCount - 1); } } 先頭に戻る; }; ポップアップフレームの位置をリセットすると、写真のようにさらに美しく見えます。 2.3. 右クリックのポップアップイベントを最適化します。 // ブラウザがデフォルトで右クリックできないようにする document.oncontextmenu = function() { false を返します。 } // チャットメインインターフェースイベントをクリックします $('body').on('click', '.layui-layim', function(e){ 空のヒント(); }); // 右クリックチャットメインインターフェースイベント $('body').on('mousedown', '.layui-layim', function(e){ 空のヒント(); }); // マウスホイールイベントをリッスンします $('body').on('mousewheel DOMMouseScroll', '.layim-tab-content', function(e){ 空のヒント(); }); // 右クリックポップアップをすべてクリアする var emptyTips = function () { // 右クリックメニューを閉じる layer.closeAll('tips'); }; 2.4. 右クリックメニューのオプションのクリックイベントをバインドします。 var $ = layui.jquery、アクティブ = { メニューチャット: 関数(){ /*インスタントメッセージを送信*/ var mineId = $(this).parent().data('id'); var moldId = $(this).parent().data('mold'); コンソールにログ出力します。 layim.chat({ タイプ: moldId == 1 ? "友達" : "グループ", 名前: 'シャオ・フアン'、 アバター: '友達アバター、実際のアプリケーションの動的バインディング'、 ID: 鉱山ID、 ステータス: 「友達の現在のオフラインステータス」 }); }, メニュー履歴: 関数(){ /*メッセージレコード*/ var mineId = $(this).parent().data('id'); var moldId = $(this).parent().data('mold'); コンソールにログ出力します。 } }; $('body').on('click', '.layui-layer-tips li', function(e){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; // 右クリックのポップアップボックスをすべてクリアします emptyTips(); }); おめでとうございます、完了です! 3. 最後に、完全なコードを添付します// ブラウザがデフォルトで右クリックできないようにする document.oncontextmenu = function() { false を返します。 } // チャットメインインターフェースイベントをクリックします $('body').on('click', '.layui-layim', function(e){ 空のヒント(); }); // 右クリックチャットメインインターフェースイベント $('body').on('mousedown', '.layui-layim', function(e){ 空のヒント(); }); /* マウスホイールイベントをリッスンする*/ $('body').on('マウスホイール DOMMouseScroll', '.layim-tab-content', function(e){ 空のヒント(); }); /* フレンドの右クリックイベントをバインド */ $('body').on('mousedown', '.layim-list-friend li ul li', function(e){ // 右クリックのポップアップボックスをすべてクリアします emptyTips(); if(3 != e.which) { 戻る; } // イベントのディスパッチを停止します e.stopPropagation(); var othis = $(this); othis.hasClass('layim-null') の場合、戻り値: // 選択したスタイルをすべて削除します $('.layim-list-friend li ul li').removeAttr("style",""); // 選択済みとしてマーク othis.css({'background-color':'rgba(0,0,0,.05)'}); var mineId = $(this).data('mineid'); var uid = Date.now().toString(36); var space_icon = ' '; var space_text = ' '; var html = [ '<ul id="contextmenu_'+uid + '" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="1">', '<li data-type="menuChat"><i class="layui-icon" ></i>'+space_icon+'インスタント メッセージを送信</li>', '<li data-type="menuProfile"><i class="layui-icon"></i>'+space_icon+'プロフィールを表示</li>', '<li data-type="menuHistory"><i class="layui-icon" ></i>'+space_icon+'メッセージ履歴</li>', '<li data-type="menuDelete">'+space_text+'友達を削除</li>', '<li data-type="menuMoveto">'+space_text+'移動</li></ul>' ]。参加する(''); レイヤー.ヒント(html, othis, { ヒント: 1 、時間: 0 、シフト: 5 、修正: 真 、スキン: 'ayui-box layui-layim-contextmenu' 、成功: function(layero){ var liCount = (html.split('</li>')).length; var stopmp = function (e) { stope(e); }; レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp); var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu'); // ポップアップ ボックスの位置を移動します。 var top = layerobj.css('top').toLowerCase().replace('px',''); var left = layerobj.css('left').toLowerCase().replace('px',''); 先頭 = getTipTop(1, 先頭, liCount); 左 = 30 + parseInt(左); レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。 $('.layui-layim-contextmenu li').css({'padding-left':'18px'}); } }); }); // 右クリックポップアップをすべてクリアする var emptyTips = function () { // すべての友達が選択したスタイルを削除します $('.layim-list-friend li ul li').removeAttr("style", ""); // すべてのグループの選択されたスタイルを削除します $('.layim-list-group li').removeAttr("style",""); // 右クリックメニューを閉じる layer.closeAll('tips'); }; // ウィンドウのドキュメント表示領域の高さを取得します。 var currentHeight = getViewSizeWithScrollbar(); 関数 getViewSizeWithScrollbar(){ var クライアントの高さ = 0; if(window.innerWidth){ クライアントの高さ = window.innerHeight; }そうでない場合、(document.documentElement.offsetWidth == document.documentElement.clientWidth){ クライアントの高さ = document.documentElement.offsetHeight; }それ以外{ クライアントの高さ = document.documentElement.clientHeight + getScrollWith(); } クライアントの高さ = クライアントの高さ - 180; clientHeight を返します。 } /** *先端位置の高さを計算します* @param type type (1 friend, group, 2 group) * @param top 元の箇条書きフレームの高さ* @param liCount 箇条書きフレームレイヤー内のliの数*/ var getTipTop = 関数 (type, top, liCount) { liCount--; if(トップ > (現在の高さ-45*liCount)){ 上部 = parseInt(上部) - 45; }それ以外{ if(type == 1){ 上部 = parseInt(上部) + 30*liCount - 10; }それ以外{ 上部 = parseInt(上部) + 30*(liCount - 1); } } 先頭に戻る; }; // 右クリックメニューオプションのクリックイベントをバインドする var $ = layui.jquery, active = { メニューチャット: 関数(){ /*インスタントメッセージを送信*/ var mineId = $(this).parent().data('id'); var moldId = $(this).parent().data('mold'); コンソールにログ出力します。 layim.chat({ タイプ: moldId == 1 ? "友達" : "グループ", 名前: 'シャオ・フアン'、 アバター: '友達アバター、実際のアプリケーションの動的バインディング'、 ID: 鉱山ID、 ステータス: 「友達の現在のオフラインステータス」 }); }, メニュー履歴: 関数(){ /*メッセージレコード*/ var mineId = $(this).parent().data('id'); var moldId = $(this).parent().data('mold'); コンソールにログ出力します。 } }; $('body').on('click', '.layui-layer-tips li', function(e){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; // 右クリックのポップアップをすべてクリアします emptyTips(); }); 4. その他の右クリックメニューコード拡張4.1、グループの右クリックメニュー: /* グループの右クリックイベントをバインド */ $('body').on('mousedown', '.layim-list-friend li h5', function(e){ // 右クリックのポップアップボックスをすべてクリアします emptyTips(); if(3 != e.which) { 戻る; } // イベントのディスパッチを停止します e.stopPropagation(); var othis = $(this); othis.hasClass('layim-null') の場合、戻り値: var グループ ID = othis.data('グループ ID'); var uid = Date.now().toString(36); var space_icon = ' '; var space_text = ' '; var html = [ '<ul id="contextmenu_'+uid+'" data-id="'+groupId+'" data-index="'+groupId +'">', '<li data-type="menuReset"><i class="layui-icon" ></i>'+space_icon+'友達リストを更新</li>', // '<li data-type="menuOnline"><i class="layui-icon">စ</i>'+space_icon+'オンラインの友達を表示</li>', '<li data-type="menuInsert">'+space_text+'グループを追加</li>', '<li data-type="menuRename">'+space_text+'名前の変更</li>', '<li data-type="menuRemove" data-mold="1">'+space_text+'グループを削除</li></ul>', ]。参加する(''); レイヤー.ヒント(html, othis, { ヒント: 1 、時間: 0 、シフト: 5 、修正: 真 、スキン: 'ayui-box layui-layim-contextmenu' 、成功: function(layero){ var liCount = (html.split('</li>')).length; var stopmp = function (e) { stope(e); }; レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp); var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu'); // ポップアップ ボックスの位置を移動します。 var top = layerobj.css('top').toLowerCase().replace('px',''); var left = layerobj.css('left').toLowerCase().replace('px',''); 先頭 = getTipTop(2, 先頭, liCount); 左 = 30 + parseInt(左); レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。 $('.layui-layim-contextmenu li').css({'padding-left':'18px'}); } }); }); 4.2. 友達リストの空白領域での右クリックメニュー: /* 右クリックイベントをフレンドリストの空白領域にバインドします */ $('body').on('mousedown', '.layim-list-friend', function(e){ // 右クリックのポップアップボックスをすべてクリアします emptyTips(); if(3 != e.which) { 戻る; } // イベントのディスパッチを停止します e.stopPropagation(); var othis = $(this); othis.hasClass('layim-null') の場合、戻り値: var uid = Date.now().toString(36); var space_icon = ' '; var space_text = ' '; var html = [ '<ul id="contextmenu_'+uid+'">', '<li data-type="menuReset"><i class="layui-icon" ></i>'+space_icon+'友達リストを更新</li>', '<li data-type="menuInsert">'+space_text+'グループを追加</li></ul>', ]。参加する(''); レイヤー.ヒント(html, othis, { ヒント: 1 、時間: 0 、シフト: 5 、修正: 真 、スキン: 'ayui-box layui-layim-contextmenu' 、成功: function(layero){ var liCount = (html.split('</li>')).length; var stopmp = function (e) { stope(e); }; レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp); var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu'); var top = e.pageY; var left = e.pageX; var 画面の幅 = window.screen.width; // エンティティの状況に応じて位置を調整する if(screenWidth-left > 150){ 左 = 左 - 30; }それ以外の場合(画面幅左 < 110){ 左 = 左 - 180; }それ以外{ 左 = 左 - 130; } if(トップ > 816){ トップ = トップ - 140; }それ以外{ トップ = トップ - 60; } レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。 $('.layui-layim-contextmenu li').css({'padding-left':'18px'}); } }); }); 4.3. グループの右クリックメニュー: /* グループチャットの右クリックイベントをバインド*/ $('body').on('mousedown', '.layim-list-group li', function(e){ // 右クリックのポップアップボックスをすべてクリアします emptyTips(); if(3 != e.which) { 戻る; } // イベントのディスパッチを停止します e.stopPropagation(); var othis = $(this); othis.hasClass('layim-null') の場合、戻り値: // 選択したスタイルをすべて削除します $('.layim-list-group li').removeAttr("style",""); // 選択済みとしてマーク othis.css({'background-color':'rgba(0,0,0,.05)'}); var mineId = $(this).data('mineid'); var uid = Date.now().toString(36); var space_icon = ' '; var space_text = ' '; var html = [ '<ul id="contextmenu_'+uid+'" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="2">', '<li data-type="menuChat"><i class="layui-icon" ></i>'+space_icon+'グループメッセージを送信</li>', '<li data-type="menuProfile"><i class="layui-icon"></i>'+space_icon+'グループ情報を表示</li>', '<li data-type="menuHistory"><i class="layui-icon" ></i>'+space_icon+'メッセージ履歴</li>', '<li data-type="menuUpdate">'+space_text+'グループアイコンの変更</li>', '<li data-type="menuRemove" data-mold="2">'+space_text+'グループを解散する</li>', '<li data-type="menuSecede">'+space_text+'グループを退出</li></ul>', ]。参加する(''); レイヤー.ヒント(html, othis, { ヒント: 1 、時間: 0 、シフト: 5 、修正: 真 、スキン: 'ayui-box layui-layim-contextmenu' 、成功: function(layero){ var liCount = (html.split('</li>')).length; var stopmp = function (e) { stope(e); }; レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp); var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu'); // ポップアップ ボックスの位置を移動します。 var top = layerobj.css('top').toLowerCase().replace('px',''); var left = layerobj.css('left').toLowerCase().replace('px',''); 先頭 = getTipTop(1, 先頭, liCount); 左 = 30 + parseInt(左); レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。 $('.layui-layim-contextmenu li').css({'padding-left':'18px'}); } }); 4.4. グループリストの空白領域での右クリックメニュー: /* グループチャットの空白領域に右クリックイベントをバインドする */ $('body').on('mousedown', '.layim-list-groups', function(e){ // 右クリックのポップアップボックスをすべてクリアします emptyTips(); if(3 != e.which) { 戻る; } // イベントのディスパッチを停止します e.stopPropagation(); var othis = $(this); othis.hasClass('layim-null') の場合、戻り値: var uid = Date.now().toString(36); var space_icon = ' '; var space_text = ' '; var html = [ '<ul id="contextmenu_'+uid+'">', '<li data-type="menuResetGroup"><i class="layui-icon" ></i>'+space_icon+'グループチャットリストを更新</li>', '<li data-type="menuInsertGroup">'+space_text+'グループチャットを作成</li></ul>', ]。参加する(''); レイヤー.ヒント(html, othis, { ヒント: 1 、時間: 0 、シフト: 5 、修正: 真 、スキン: 'ayui-box layui-layim-contextmenu' 、成功: function(layero){ var liCount = (html.split('</li>')).length; var stopmp = function (e) { stope(e); }; レイヤーo.off('mousedowm',stopmp).on('mousedowm',stopmp); var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu'); var top = e.pageY; var left = e.pageX; var 画面の幅 = window.screen.width; if(画面幅左 > 150){ 左 = 左 - 30; }それ以外の場合(画面幅左 < 110){ 左 = 左 - 180; }それ以外{ 左 = 左 - 130; } if(トップ > 816){ トップ = トップ - 140; }それ以外{ トップ = トップ - 60; } レイヤーオブジェクトに、レイヤーの横幅を 150 ピクセルに設定します。 $('.layui-layim-contextmenu li').css({'padding-left':'18px'}); } }); }); V. 結論興味からインスタント メッセージングにかなり興味を持ち、layim と連絡を取り始めました。最初は、関数を作成するたびにさまざまな小さな問題に遭遇しました。私の場合、問題が時間内に解決されなければ、その夜は眠れませんでした。情報を探し続けてソース コードを読むことしかできませんでしたが、最終的には甘い果実を収穫することができました。機能を実装するにあたり、ネットの専門家のブログ記事を参考にさせていただきましたので、同じようなものを見つけたら、ぜひ若い世代に思い出させてください! これで、JavaScript での layim の右クリック メニュー統合のサンプル コードに関するこの記事は終了です。layim の右クリック メニュー統合の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル
序文国家とは何か私たちは皆、React はステート マシンであると言います。それはどのように反映され...
この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有していま...
サーバーの配置数日間無料で使用できるクラウドサーバー(Alibaba Cloud、Huawei Cl...
序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...
この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...
いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...
一般的に使用される Oracle10g パーティションは、範囲 (範囲パーティション)、リスト (リ...
スワップを無効にするサーバーがデータベース サービスまたはメッセージ ミドルウェア サービスを実行し...
テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...
前面に書かれたLinux を使用する際にソフトウェアをインストールする必要がある場合があります。もち...
目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...
1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...
この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...
この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...
この記事では、例を使用して、Mysql データベースの基本的な SQL ステートメントについて説明し...