JavaScript で右クリック メニューを統合する layim のサンプル コード

JavaScript で右クリック メニューを統合する layim のサンプル コード

1. 効果の実証

1.1、友達の右クリックメニュー:

ここに画像の説明を挿入

1.2. グループの右クリックメニュー:

ここに画像の説明を挿入

1.3. グループの右クリックメニュー:

ここに画像の説明を挿入

2. 実装チュートリアル

次に、友達の右クリック メニューを例にとります。実装手順は次のとおりです。

2.1. フレンドの右クリックイベントをバインドする:

/* フレンドの右クリックイベントをバインド */
$('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" >&#xe611;</i>'+space_icon+'インスタント メッセージを送信</li>',
			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'プロフィールを表示</li>',
			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</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. ポップアップウィンドウの位置をリセットします。
次に、レイヤーがポップアップした後、成功したコールバックメソッドでポップアップボックスの位置をリセットします。デフォルトのポップアップボックスの位置を基準に、一定のピクセル数だけ左に移動し、ポップアップボックス内のliの数に応じて動的に下に移動します。返信の下部にあるポップアップボックスの場合は、ポップアップボックス全体が上に移動します。

レイヤー.ヒント(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 = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
 var html = [
  			'<ul id="contextmenu_'+uid + '" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="1">',
  			'<li data-type="menuChat"><i class="layui-icon" >&#xe611;</i>'+space_icon+'インスタント メッセージを送信</li>',
  			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'プロフィールを表示</li>',
  			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</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 = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	
	var html = [
  			'<ul id="contextmenu_'+uid+'" data-id="'+groupId+'" data-index="'+groupId +'">',
  			'<li data-type="menuReset"><i class="layui-icon" >&#xe669;</i>'+space_icon+'友達リストを更新</li>',
  			// '<li data-type="menuOnline"><i class="layui-icon">&#x1005;</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 = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
  			'<ul id="contextmenu_'+uid+'">',
  			'<li data-type="menuReset"><i class="layui-icon" >&#xe669;</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 = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
			'<ul id="contextmenu_'+uid+'" data-id="'+mineId+'" data-index="'+mineId+'" data-mold="2">',
			'<li data-type="menuChat"><i class="layui-icon" >&#xe611;</i>'+space_icon+'グループメッセージを送信</li>',
			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'グループ情報を表示</li>',
			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</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 = '&nbsp;&nbsp;';
	var space_text = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
	var html = [
  			'<ul id="contextmenu_'+uid+'">',
  			'<li data-type="menuResetGroup"><i class="layui-icon" >&#xe669;</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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 配列内のオブジェクトの属性値が存在するかどうかを確認する JS 実装例
  • JavaScript 正規表現と文字列検索メソッド
  • JS で実装された一般的な検索、並べ替え、重複排除アルゴリズムの例
  • JSバイナリ検索アルゴリズムの詳細な説明
  • 友達やグループを見つけるためのJavaScriptのLayim

<<:  Nginx シグナル制御

>>:  CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル

推薦する

reactにおけるstateの略語の詳細な説明

序文国家とは何か私たちは皆、React はステート マシンであると言います。それはどのように反映され...

ネイティブ JS カプセル化 vue タブ切り替え効果

この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有していま...

Dockerコンテナでの静的ウェブサイトレイアウトの実装

サーバーの配置数日間無料で使用できるクラウドサーバー（Alibaba Cloud、Huawei Cl...

MySQL で 2 つのテーブルをクエリする場合の from と join の違いの概要

序文MySQL では、複数テーブル結合クエリは非常に一般的な要件です。複数テーブルクエリを使用する場...

航空機戦争ゲームを実装するためのネイティブJS

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。...

スライドドアを実装するための CSS サンプルコード

いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...

Oracle10パーティションとMySQLパーティションの違いの詳細な説明

一般的に使用される Oracle10g パーティションは、範囲 (範囲パーティション)、リスト (リ...

Linux システムの最適化 (カーネルの最適化) に関するいくつかの提案

スワップを無効にするサーバーがデータベース サービスまたはメッセージ ミドルウェア サービスを実行し...

HTML テーブル マークアップ チュートリアル (37): 背景画像属性 BACKGROUND

テーブル ヘッダーの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できま...

Linux で rpm パッケージを見つけるために CD をマウントする方法

前面に書かれたLinux を使用する際にソフトウェアをインストールする必要がある場合があります。もち...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...

Ubuntu システムログで /var/log/messages を設定する方法

1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...

VueはPCカメラを呼び出して写真機能を実現します

この記事の例では、VueがPCカメラを呼び出して写真機能を実現する具体的なコードを参考までに共有して...

VueはAmapを使用して都市の位置特定を実現

この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...

MySQL データベースの基本的な SQL ステートメントの概要

この記事では、例を使用して、Mysql データベースの基本的な SQL ステートメントについて説明し...