Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript

Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript

1. Wirkungsdemonstration

1.1. Rechtsklickmenü „Freunde“:

Bildbeschreibung hier einfügen

1.2. Gruppen-Rechtsklickmenü:

Bildbeschreibung hier einfügen

1.3. Gruppen-Rechtsklickmenü:

Bildbeschreibung hier einfügen

2. Implementierungs-Tutorial

Als nächstes nehmen wir das Rechtsklickmenü eines Freundes als Beispiel. Die Implementierungsschritte sind wie folgt:

2.1. Rechtsklick-Ereignis „Freund binden“:

/* Rechtsklick-Ereignis „Freund binden“ */
$('body').on('mousedown', '.layim-list-friend li ul li', Funktion(e){
 // Filtere Ereignisse, die keine Rechtsklick-Ereignisse sind, if(3 != e.which) {
 	zurückkehren;
 }
	// Stoppen Sie das Versenden von Ereignissen e.stopPropagation();
	
	var othis = $(dies);
 // Holen Sie sich die Freundesnummer, um die spätere Verwendung von Funktionen zu erleichtern (Sie müssen den Quellcode von layim.js ändern, um die Freundesnummer zu binden, oder die Freundesnummer direkt in der Klasse abfangen. Sie können sie durch Drücken von F12 auf der Seite anzeigen.)
	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+'Sofortnachricht senden</li>',
			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'Profil anzeigen</li>',
			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'Nachrichtenverlauf</li>',
			'<li data-type="menuDelete">'+space_text+'Freunde löschen</li>',
			'<li data-type="menuMoveto">'+space_text+'Verschieben nach</li></ul>'
		].verbinden('');
	// Popup-Fenster layer.tips(html, othis, {
  	Tipps: 1
  	,Zeit: 0
  	,Schicht: 5
  	,fix: wahr
  	, Skin: „ayui-Box layui-layim-Kontextmenü“
 });
});

Das Rechtsklickereignis wurde hier erfolgreich gebunden, aber das Popup-Fenster blockiert direkt den Namen und den Avatar des Freundes, was nicht sehr benutzerfreundlich ist. Wie kann man es optimieren? Lesen wir weiter.

Bildbeschreibung hier einfügen

2.2. Position des Popup-Fensters zurücksetzen:
Als Nächstes setzen wir die Position des Popup-Fensters in der erfolgreichen Rückrufmethode zurück, nachdem die Ebene angezeigt wurde. Basierend auf der Standardposition des Popup-Fensters verschieben wir es um eine bestimmte Anzahl von Pixeln nach links und dynamisch entsprechend der Anzahl der Li im Popup-Fenster nach unten. Wenn es sich um ein Popup-Fenster am Ende der Antwort handelt, wird das Popup-Fenster als Ganzes nach oben verschoben.

layer.tips(html, othis, {
 	Tipps: 1
 	,Zeit: 0
 	,Schicht: 5
 	,fix: wahr
 	, Skin: „ayui-Box layui-layim-Kontextmenü“
 	,Erfolg: Funktion(Layero){
 		// -----#Start---------- Position des Popup-Fensters zurücksetzen----------------
 	var stopmp = Funktion (e) { stope(e); };
 	layero.aus('mousedowm',stopmp).ein('mousedowm',stopmp);
 	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
 		// Nummer der Rechtsklickfelder abrufen li var liCount = (html.split('</li>')).length;
 	 // Ursprüngliche Position des Popup-Felds abrufen var top = layerobj.css('top').toLowerCase().replace('px','');
		var left = layerobj.css('left').toLowerCase().replace('px','');
		// Position Persönlichkeitsanpassung top = getTipTop(1, top, liCount);
		links = 30 + parseInt(links);
 	// Position des Aufzählungsfelds verschieben layerobj.css({'width':'150px', 'left':left+'px', 'top':top+'px'});
		$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 		// -----#Ende---------- Position des Popup-Fensters zurücksetzen----------------
 	}
});

// Höhe des Dokumentanzeigebereichs des Fensters abrufen var currentHeight = getViewSizeWithScrollbar();
Funktion getViewSizeWithScrollbar(){
	var Clienthöhe = 0;
	wenn(Fenster.innereBreite){
		Clienthöhe = Fenster.Innenhöhe;
	}sonst wenn(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
		Clienthöhe = Dokument.Dokumentelement.Offsethöhe;
	}anders{ 
		clientHeight = document.documentElement.clientHeight + getScrollWith();
	} 
	Clienthöhe = Clienthöhe - 180;
	Clienthöhe zurückgeben;
}

/**
 * Berechnen Sie die Höhe des Trinkgeldstandorts * @param Typtyp (1 Freund, Gruppe, 2 Gruppen)
 * @param top ursprüngliche Höhe des Aufzählungsrahmens* @param liCount Anzahl der Li in der Ebene des Aufzählungsrahmens*/
var getTipTop = Funktion (Typ, oben, liCount) {
	liAnzahl--;
	wenn(oben > (aktuelleHöhe-45*LiAnzahl)){
		oben = parseInt(oben) – 45;
	}anders{
		wenn(Typ == 1){
			oben = parseInt(oben) + 30*liCount - 10;
		}anders{
			oben = parseInt(oben) + 30*(liCount - 1);
		}
	}
	zurück nach oben;
};

Nach dem Zurücksetzen der Position des Pop-Up-Rahmens sieht dieser viel schöner aus, wie auf dem Bild gezeigt.

Bildbeschreibung hier einfügen

2.3. Optimieren Sie das Popup-Ereignis bei Rechtsklick:
Wenn der Benutzer andere Funktionen ausführt, ist die Rechtsklick-Popup-Fensterebene weiterhin in der Benutzeroberfläche vorhanden. Um das Benutzererlebnis zu verbessern, werden im Folgenden Mausereignisse und Mausradereignisse überwacht, um die Rechtsklick-Popup-Fensterebene rechtzeitig zu schließen.

// Verhindert standardmäßig das Klicken mit der rechten Maustaste im Browser document.oncontextmenu = function() {
 gibt false zurück;
}
// Klicken Sie auf das Ereignis der Hauptschnittstelle des Chats $('body').on('click', '.layui-layim', function(e){
 leereTipps();
});
// Rechtsklick-Ereignis der Hauptschnittstelle des Chats $('body').on('mousedown', '.layui-layim', function(e){
 leereTipps();
});
// Auf Mausradereignisse achten $('body').on('mousewheel DOMMouseScroll', '.layim-tab-content', function(e){
 leereTipps();
});
// Alle Rechtsklick-Popups löschen var emptyTips = function () {
	// Rechtsklickmenü schließen layer.closeAll('tips');
};

2.4. Binden Sie das Klickereignis der Option im Rechtsklickmenü:
Der letzte Schritt besteht darin, das Klickereignis der Optionen im Rechtsklickmenü zu binden, am Beispiel von „Sofortnachricht senden“.

var $ = layui.jquery, aktiv = {
	MenüChat: Funktion(){
		/*Eine Sofortnachricht senden*/
	 var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('Form');
		Konsole.log(MineId);
	 layim.chat({
			Typ: moldId == 1 ? "Freund" : "Gruppe",
	 	Name: 'Xiao Huan',
			Avatar: „Freund-Avatar, aktuelle Anwendung dynamische Bindung“,
			ID: meineID,
			Status: „Aktueller Offline-Status des Freundes“
		});
 },
 Menüverlauf: Funktion(){
 	/*Nachrichtendatensatz*/
		var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('Form');
		Konsole.log(MineId);
 }
};
$('body').on('click', '.layui-layer-tips li', function(e){
 var Typ = $(this).data('Typ');
 aktiv[Typ] ? aktiv[Typ].call(this) : '';
	// Alle Rechtsklick-Popup-Fenster löschen emptyTips();
});

Herzlichen Glückwunsch, Sie sind fertig!

3. Zum Schluss den kompletten Code anhängen

// Verhindert standardmäßig das Klicken mit der rechten Maustaste im Browser document.oncontextmenu = function() {
 gibt false zurück;
}
// Klicken Sie auf das Ereignis der Hauptschnittstelle des Chats $('body').on('click', '.layui-layim', function(e){
 leereTipps();
});
// Rechtsklick-Ereignis der Hauptschnittstelle des Chats $('body').on('mousedown', '.layui-layim', function(e){
 leereTipps();
});
/* Auf Mausrad-Ereignisse achten*/
$('body').on('Mausrad DOMMouseScroll', '.layim-tab-content', Funktion(e){
 leereTipps();
});
/* Rechtsklick-Ereignis „Freund binden“ */
$('body').on('mousedown', '.layim-list-friend li ul li', Funktion(e){
	// Alle Rechtsklick-Popup-Fenster löschen emptyTips();
 wenn(3 != e.welche) {
 	zurückkehren;
 }
	// Stoppen Sie das Versenden von Ereignissen e.stopPropagation();
	
	var othis = $(dies);
 wenn (othis.hasClass('layim-null')) return;
 
	// Alle ausgewählten Stile entfernen $('.layim-list-friend li ul li').removeAttr("style","");
 // Als ausgewählt markieren 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+'Sofortnachricht senden</li>',
  			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'Profil anzeigen</li>',
  			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'Nachrichtenverlauf</li>',
  			'<li data-type="menuDelete">'+space_text+'Freunde löschen</li>',
  			'<li data-type="menuMoveto">'+space_text+'Verschieben nach</li></ul>'
  		].verbinden('');
 
 layer.tips(html, othis, {
  	Tipps: 1
  	,Zeit: 0
  	,Schicht: 5
  	,fix: wahr
  	, Skin: „ayui-Box layui-layim-Kontextmenü“
  	,Erfolg: Funktion(Layero){
  	 var liCount = (html.split('</li>')).Länge;
  	var stopmp = Funktion (e) { stope(e); };
  	layero.aus('mousedowm',stopmp).ein('mousedowm',stopmp);
  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
  	// Position des Popup-Felds verschieben var top = layerobj.css('top').toLowerCase().replace('px','');
 			var left = layerobj.css('left').toLowerCase().replace('px','');
 			top = getTipTop(1, top, liCount);
 			links = 30 + parseInt(links);
 			layerobj.css({'Breite':'150px', 'links':links+'px', 'oben':oben+'px'});
 			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
  	}
	});
});

// Alle Rechtsklick-Popups löschen var emptyTips = function () {
	// Entferne die von allen Freunden ausgewählten Stile $('.layim-list-friend li ul li').removeAttr("style", "");
	// Entfernen Sie die ausgewählten Stile aller Gruppen $('.layim-list-group li').removeAttr("style","");
	// Rechtsklickmenü schließen layer.closeAll('tips');
};

// Höhe des Dokumentanzeigebereichs des Fensters abrufen var currentHeight = getViewSizeWithScrollbar();
Funktion getViewSizeWithScrollbar(){
	var Clienthöhe = 0;
	wenn(Fenster.innereBreite){
		Clienthöhe = Fenster.Innenhöhe;
	}sonst wenn(document.documentElement.offsetWidth == document.documentElement.clientWidth){ 
		Clienthöhe = Dokument.Dokumentelement.Offsethöhe;
	}anders{ 
		clientHeight = document.documentElement.clientHeight + getScrollWith();
	} 
	Clienthöhe = Clienthöhe - 180;
	Clienthöhe zurückgeben;
}

/**
 *Berechne die Höhe des Trinkgeldstandorts* @param Typ Typ (1 Freund, Gruppe, 2 Gruppen)
 * @param top ursprüngliche Höhe des Aufzählungsrahmens* @param liCount Anzahl der Li in der Ebene des Aufzählungsrahmens*/
var getTipTop = Funktion (Typ, oben, liCount) {
	liAnzahl--;
	wenn(oben > (aktuelleHöhe-45*LiAnzahl)){
		oben = parseInt(oben) – 45;
	}anders{
		wenn(Typ == 1){
			oben = parseInt(oben) + 30*liCount - 10;
		}anders{
			oben = parseInt(oben) + 30*(liCount - 1);
		}
	}
	zurück nach oben;
};

// Binden Sie das Klickereignis der Rechtsklickmenüoption var $ = layui.jquery, active = {
	MenüChat: Funktion(){
		/*Eine Sofortnachricht senden*/
	 var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('Form');
		Konsole.log(MineId);
	 layim.chat({
			Typ: moldId == 1 ? "Freund" : "Gruppe",
	 	Name: 'Xiao Huan',
			Avatar: „Freund-Avatar, aktuelle Anwendung dynamische Bindung“,
			ID: meineID,
			Status: „Aktueller Offline-Status des Freundes“
		});
 },
 Menüverlauf: Funktion(){
 	/*Nachrichtendatensatz*/
		var mineId = $(this).parent().data('id');
	 var moldId = $(this).parent().data('Form');
		Konsole.log(MineId);
 }
};
$('body').on('click', '.layui-layer-tips li', function(e){
 var Typ = $(this).data('Typ');
 aktiv[Typ] ? aktiv[Typ].call(this) : '';
	// Alle Rechtsklick-Popups löschen emptyTips();
});

4. Andere Rechtsklickmenü-Codeerweiterungen

4.1. Gruppen-Rechtsklickmenü:

/* Rechtsklickereignis für Gruppe binden */
$('body').on('mousedown', '.layim-list-friend li h5', Funktion(e){
	// Alle Rechtsklick-Popup-Fenster löschen emptyTips();
 wenn(3 != e.welche) {
 	zurückkehren;
 }
	// Stoppen Sie das Versenden von Ereignissen e.stopPropagation();
	
	var othis = $(dies);
 wenn (othis.hasClass('layim-null')) return;
 
 var groupId = othis.data('Gruppen-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+'Freundesliste aktualisieren</li>',
  			// '<li data-type="menuOnline"><i class="layui-icon">&#x1005;</i>'+space_icon+'Online-Freunde anzeigen</li>',
  			'<li data-type="menuInsert">'+space_text+'Gruppe hinzufügen</li>',
  			'<li data-type="menuRename">'+space_text+'Umbenennen</li>',
  			'<li data-type="menuRemove" data-mold="1">'+space_text+'Gruppe löschen</li></ul>',
  		].verbinden('');
	
 layer.tips(html, othis, {
 	Tipps: 1
 	,Zeit: 0
 	,Schicht: 5
 	,fix: wahr
 	, Skin: „ayui-Box layui-layim-Kontextmenü“
 	,Erfolg: Funktion(Layero){
 	 var liCount = (html.split('</li>')).Länge;
	  	var stopmp = Funktion (e) { stope(e); };
	  	layero.aus('mousedowm',stopmp).ein('mousedowm',stopmp);
	  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
	  	// Position des Popup-Felds verschieben var top = layerobj.css('top').toLowerCase().replace('px','');
			var left = layerobj.css('left').toLowerCase().replace('px','');
			top = getTipTop(2, top, liCount);
			links = 30 + parseInt(links);
			layerobj.css({'Breite':'150px', 'links':links+'px', 'oben':oben+'px'});
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
 });
});

4.2. Rechtsklick-Menü im leeren Bereich der Freundesliste:

/* Rechtsklick-Ereignis an leeren Bereich in der Freundesliste binden */
$('body').on('mousedown', '.layim-list-friend', Funktion(e){
	// Alle Rechtsklick-Popup-Fenster löschen emptyTips();
 wenn(3 != e.welche) {
 	zurückkehren;
 }
	// Stoppen Sie das Versenden von Ereignissen e.stopPropagation();

	var othis = $(dies);
 wenn (othis.hasClass('layim-null')) return;
  
	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+'Freundesliste aktualisieren</li>',
  			'<li data-type="menuInsert">'+space_text+'Gruppe hinzufügen</li></ul>',
  		].verbinden('');
  
 layer.tips(html, othis, {
 	Tipps: 1
 	,Zeit: 0
 	,Schicht: 5
 	,fix: wahr
 	, Skin: „ayui-Box layui-layim-Kontextmenü“
 	,Erfolg: Funktion(Layero){
 	 var liCount = (html.split('</li>')).Länge;
	  	var stopmp = Funktion (e) { stope(e); };
	  	layero.aus('mousedowm',stopmp).ein('mousedowm',stopmp);
	  	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
	  	var top = e.seiteY;
	  	var left = e.seiteX;
	  	var Bildschirmbreite = Fenster.Bildschirmbreite;
	  	// Passe die Position der Entity-Situation an if(screenWidth-left > 150){
	  		links = links - 30;
	  	}sonst wenn(Bildschirmbreite-links < 110){
	  		links = links - 180;
	  	}anders{
	  		links = links - 130;
	  	}
	  	wenn(oben > 816){
				oben = oben - 140;
	  	}anders{
				oben = oben - 60;
	  	}
			layerobj.css({'Breite':'150px', 'links':links+'px', 'oben':oben+'px'});
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
 });
});

Bildbeschreibung hier einfügen

4.3. Rechtsklickmenü der Gruppe:

/* Rechtsklick-Ereignis für Gruppenchat binden*/
$('body').on('mousedown', '.layim-list-group li', Funktion(e){
	// Alle Rechtsklick-Popup-Fenster löschen emptyTips();
 wenn(3 != e.welche) {
 	zurückkehren;
 }
	// Stoppen Sie das Versenden von Ereignissen e.stopPropagation();
	
	var othis = $(dies);
 wenn (othis.hasClass('layim-null')) return;
  
	// Alle ausgewählten Stile entfernen $('.layim-list-group li').removeAttr("style","");
 // Als ausgewählt markieren 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+'Gruppennachricht senden</li>',
			'<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>'+space_icon+'Gruppeninformationen anzeigen</li>',
			'<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>'+space_icon+'Nachrichtenverlauf</li>',
			'<li data-type="menuUpdate">'+space_text+'Gruppensymbol ändern</li>',
			'<li data-type="menuRemove" data-mold="2">'+space_text+'Gruppe auflösen</li>',
			'<li data-type="menuSecede">'+space_text+'Gruppe verlassen</li></ul>',
		].verbinden('');
layer.tips(html, othis, {
 	Tipps: 1
 	,Zeit: 0
 	,Schicht: 5
 	,fix: wahr
 	, Skin: „ayui-Box layui-layim-Kontextmenü“
 	,Erfolg: Funktion(Layero){
 	 var liCount = (html.split('</li>')).Länge;
 	var stopmp = Funktion (e) { stope(e); };
 	layero.aus('mousedowm',stopmp).ein('mousedowm',stopmp);
 	var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
 	// Position des Popup-Felds verschieben var top = layerobj.css('top').toLowerCase().replace('px','');
		var left = layerobj.css('left').toLowerCase().replace('px','');
		top = getTipTop(1, top, liCount);
		links = 30 + parseInt(links);
		layerobj.css({'Breite':'150px', 'links':links+'px', 'oben':oben+'px'});
		$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
 	}
});

4.4. Klicken Sie mit der rechten Maustaste auf das Menü im leeren Bereich der Gruppenliste:

/* Rechtsklick-Ereignis an leeren Bereich des Gruppenchats binden */
$('body').on('mousedown', '.layim-list-groups', Funktion(e){
	// Alle Rechtsklick-Popup-Fenster löschen emptyTips();
 wenn(3 != e.welche) {
 	zurückkehren;
 }
	// Stoppen Sie das Versenden von Ereignissen e.stopPropagation();

	var othis = $(dies);
 wenn (othis.hasClass('layim-null')) return;
 
	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+'Gruppenchatliste aktualisieren</li>',
  			'<li data-type="menuInsertGroup">'+space_text+'Gruppenchat erstellen</li></ul>',
  		].verbinden('');
  
	layer.tips(html, othis, {
		Tipps: 1
		,Zeit: 0
		,Schicht: 5
		,fix: wahr
		, Skin: „ayui-Box layui-layim-Kontextmenü“
		,Erfolg: Funktion(Layero){
		 var liCount = (html.split('</li>')).Länge;
			var stopmp = Funktion (e) { stope(e); };
			layero.aus('mousedowm',stopmp).ein('mousedowm',stopmp);
			var layerobj = $('#contextmenu_'+uid).parents('.layui-layim-contextmenu');
			var top = e.seiteY;
			var left = e.seiteX;
			var Bildschirmbreite = Fenster.Bildschirmbreite;
			if(Bildschirmbreite-links > 150){
				links = links - 30;
			}sonst wenn(Bildschirmbreite-links < 110){
				links = links - 180;
			}anders{
				links = links - 130;
			}
			wenn(oben > 816){
				oben = oben - 140;
			}anders{
				oben = oben - 60;
			}
			layerobj.css({'Breite':'150px', 'links':links+'px', 'oben':oben+'px'});
			$('.layui-layim-contextmenu li').css({'padding-left':'18px'});
		}
	});
});

Bildbeschreibung hier einfügen

V. Fazit

Aus Interesse war ich ziemlich neugierig auf Instant Messaging und begann dann, mit layim in Kontakt zu treten. Am Anfang stieß ich jedes Mal, wenn ich eine Funktion erstellte, auf verschiedene kleine Probleme. Wenn das Problem nicht rechtzeitig gelöst werden konnte, konnte ich in dieser Nacht nicht schlafen. Ich konnte nur weiter nach Informationen suchen und den Quellcode lesen, aber schließlich konnte ich die süßen Früchte ernten. Bei der Implementierung der Funktion habe ich mich an den Blogbeiträgen von Online-Experten orientiert, wenn Sie also auf ähnliche Dinge stoßen, erinnern Sie die jüngere Generation bitte daran!
Sollten im Artikel und im Code unangemessene Ausdrücke vorkommen, können Sie mich aufgrund meiner begrenzten Kenntnisse gern korrigieren.

Damit ist dieser Artikel über den Beispielcode für die Rechtsklickmenüintegration von layim in JavaScript abgeschlossen. Weitere Informationen zur Rechtsklickmenüintegration von layim finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • JS-Implementierungsbeispiel zum Ermitteln, ob der Attributwert eines Objekts in einem Array vorhanden ist
  • JavaScript-reguläre Ausdrücke und String-Suchmethoden
  • Beispiele für gängige Such-, Sortier- und Deduplizierungsalgorithmen, die in JS implementiert sind
  • Detaillierte Erklärung des JS-Binärsuchalgorithmus
  • Layim in Javascript, um Freunde und Gruppen zu finden

<<:  So ändern Sie das Root-Passwort von MySQL unter Linux

>>:  Nginx-Signalsteuerung

Artikel empfehlen

JavaScript zum Erreichen eines Mouse-Tailing-Effekts

Mauseffekte erfordern die Verwendung von setTimeo...

Tutorial-Diagramm zur kostenlosen 64-Bit-Installationsversion von MySQL 5.7.31

1. Herunterladen Download-Adresse: https://dev.my...

Das Phänomen des Margin-Top-Collapses und die spezifische Lösung

Was ist ein Margin-Top-Collaps? Der Margin-Top-Co...

So starten Sie ein Vue.js-Projekt

Inhaltsverzeichnis 1. Node.js und Vue 2. Führen S...

Implementierung der QR-Code-Scanfunktion über Vue

Hinweis Auf dieses Plugin kann nur unter dem http...

Element verwendet Skripte, um automatisch neue Komponenten zu erstellen

Inhaltsverzeichnis Hintergrund Wie funktioniert d...

Eine kurze Diskussion über mehrere aufgetretene Browserkompatibilitätsprobleme

Hintergrund Das Lösen von Browserkompatibilitätsp...

Detaillierte Erläuterung der Keep-Alive- und Unified-Routing-Verarbeitung von Vue3-Cache-Seiten

Inhaltsverzeichnis 1. Einleitung 2. Verwendung 1....

30 kostenlose hochwertige englische Ribbon-Schriftarten

30 kostenlose englische Ribbon-Schriftarten in hoh...

jQuery realisiert den Shuttle-Box-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Schritte zum Erweitern der LVM-Festplatte unter Linux

1. Fügen Sie eine Festplatte hinzu 2. Überprüfen ...

So erstellen Sie einen vollständigen Samba-Server unter Linux (CentOS-Version)

Vorwort smb ist der Name eines Protokolls, das fü...

Implementierungscode für unendliches Scrollen mit n Containerelementen

Szenario So rendern Sie Listen mit bis zu 10.000 ...

So verwenden Sie Provide zur Implementierung der Statusverwaltung in Vue3

Inhaltsverzeichnis Vorwort So implementieren Sie ...

Installation und Bereitstellung des MySQL Routers

Inhaltsverzeichnis 01 Einführung in MySQL Router ...