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 をインストールするチュートリアル

推薦する

Linux/Mac に MySQL をインストールするときにパスワードを忘れた場合の解決策

序文この記事では主に、Linux/Mac に MySQL をインストールするときにパスワードを忘れた...

WeChatアプレットは日付と時刻に基づいた並べ替え機能を実装

最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...

JavaScript 配列 sort() メソッドの基本的な使い方と落とし穴

序文日常のコード開発では、配列のソートに関連する操作が多数あります。JavaScript では、so...

実践で遭遇するフロントエンドの基本（HTML、CSS）

1. div css マウスの手の形は cursor:pointer; です。 2. HTML の相...

WeChatアプレットがテキストスクロールを実装

この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...

子コンポーネントを通じて親コンポーネントのプロパティを変更するための Vue のさまざまな実装方法

目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...

JavaScript マクロタスクとマイクロタスクの実行順序についての簡単な説明

目次1. JavaScriptはシングルスレッドです1. 同期タスク2. 非同期タスク2. タスクキ...

MySQL でのワイルドカードを使用したファジークエリの実装に関する簡単な説明

MySQL データベースでは、あいまいクエリが必要な場合にワイルドカードを使用します。まず、演算子と...

PHP で JSON バックスラッシュを削除する例

1. 「stripslashes($_POST['json']);」メソッドを使用し...

Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブ ホットスタンバイ) を構築します。

Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...

React のクラスからフックへの移行

目次リアクトフック序文なぜフックなのか？クラス関数クラスとフックの比較フックはコンポーネントの状態を...

Ubuntu環境でPHPとNginxをコンパイルしてインストールする方法

この記事では、Ubuntu 環境で PHP と Nginx をコンパイルしてインストールする方法につ...

RoughViz を使用して Vue.js でスケッチされたチャートを視覚化する方法

導入チャートは、データ セットを読みやすくし、その各部分を区別しやすくするために使用されるデータのグ...

WeChat 8.0の爆発的な特殊効果を実現するために300行以上のCSSコードが必要

WeChat 8.0 アップデートの主な特徴は、アニメーション絵文字のサポートです。送信するメッセー...

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...