Vorwort:
Da das Entwicklungsprojekt des Unternehmens die Verwendung von Emoticon-Plug-Ins erfordert, ist es seit langem auf Baidu. Viele Emoticon-Plug-Ins müssen auf viele JS-Dateien verweisen, und es gibt keine vorgefertigten Demos. Einige Plug-Ins beziehen sich auf viele Bilder, und jedes Emoticon muss erneut angefordert werden. Für eine solche Funktion ist es nicht die Mühe wert, viele JS und IMGs einzuführen ...
Daher hat der Blogger ein kleines "Expression-Plug-In" für die einfache Verwendung in Zukunft codiert.
Funktion
Funktion: Übergeben Sie das Zeichenformat, das dem Ausdruck an den Hintergrund entspricht, der Hintergrund gibt die Zeichenfolge zurück, und das vordere Ende analysiert die Zeichenfolge in den entsprechenden Ausdruck, um sie auf der Seite anzuzeigen.
Wie man verwendet:
Konfigurieren Sie die erforderlichen Parameter in der Option
var option = {emojiarray: ['Angry'], // füllen Sie das Array von Emoji-Zeichenfolgen aus, [Hinweis: Das Symbol unterhalb des Quelldateibildes müssen Sie nur die Zeichenfolge in der roten Box schreiben. Weitere Informationen finden Sie in der Abbildung unten. 'emojicontainer', // das Containerobjekt, das Emoji sendid speichert: 'send', // Die Schaltfläche zum Senden von Informationen ideemojitranslatecls: 'emoji-coment', // Containerklassenname, die zu einem zu küssenden Küssen konvertiert werden müssen: Küssen: Kissing: Küssen: Kissing. = neues Emoji (Option); text.init ();Screenshot der ungefähren Wirkung: (Die Benutzeroberfläche kann nach ihren Bedürfnissen verschönern)
Nach dem Klicken auf Senden sind die an den Hintergrund gesendeten Daten:
Drei Prinzipien des Emoticon-Plug-Ins:
• Wie zeigt ich Ausdrücke an?
CSS Sprites (Bildintegrationstechnologie), zuerst das Hintergrundsymbol festlegen, dann die Position, die Breite, die Höhe jedes kleinen Symbols definieren und den Ausdruck anzeigen, den Sie anzeigen möchten. In diesem Zeitraum aufgetroffene Probleme: Wie kann man die Größe des angezeigten Ausdrucks kontrollieren? Das erste, woran ich dachte, ist die Methode der Hintergrundgröße, aber es ist sehr "physisch", seine Position neu zu definieren. Später, als die Zukunft dunkel ist, fand ich eine Eigenschaftsveränderung: Skala (1,5); Um das aktuelle Element -Skalierungsverhältnis zu kontrollieren, wird eine Codezeile durchgeführt ~ Möchten Sie, dass der Ausdruck groß oder klein ist, und Sie sind nicht mit der Größe zufrieden? Treffen Sie den gesamten Code. • Wie werden Emoticons im Eingabefeld angezeigt?
Zuerst habe ich den Textbereich der Eingabe gewählt, aber als ich das Emoticon "Append" in das Eingabefeld einsetzte, wurde das Symbol nicht angezeigt. Später versuchte ich die DIV und dann "anhängen" und stellte fest, dass der Ausdruck erfolgreich angezeigt werden konnte, aber der DIV nicht in einen Text eintreten konnte, was fruchtlos war ...
Vor -Idee: Verwenden Sie das Hören Sie in Echtzeit ein textarea -Wert zum DIV. In ähnlicher Weise ist dies undankbar ~ weiter nach ...
Später entdeckte ich eine große Anzahl von Attributen. zufriedenbar = "True" und fröhlich ausgewählt hat.
Am Anfang verwenden Sie Span, um das Emoticon -Symbol zu hosten. Wenn Sie das Bild jedoch mit DIV- oder Span -Tags platzieren, wird das inhaltliche Intelligent zum letzten Div/Span standardmäßig hinzugefügt. Der letzte Text befindet sich im letzten Div/Span, was zu keinem Text angezeigt wird. OK ... ich bin so müde ...
Da Div/Span nicht möglich ist, verwenden Sie das IMG -Tag, um den Ausdruck zu hosten, und jetzt können Sie es endlich normal eingeben.
[Inhaltlich hat ein Problem, es unterstützt reichhaltigen Text, ist unsicher und verfügt über eine schlechte Benutzererfahrung. 】
Zum Beispiel: Wenn Benutzer einfügen, bringen sie das Format automatisch mit. Beispiele sind wie folgt:
Dies ist ein Code vom Online -Master, um die reichhaltige Textfunktion zu entfernen. Als spezifische Referenz: Ein Master -Blog -Beitrag
• Wie konvertiere ich Bilder und Text?
Zu diesem Zeitpunkt müssen Sie leistungsstarke Regeln verwenden. Verwenden Sie zuerst HTML (), um den Inhalt zu erhalten, und verarbeiten Sie dann den Inhalt. In Text konvertieren:
1 content
2 imgobj.push (Format + img [i] .GetAttribute ("Alt") + Format); // Ich verwende hier das Format: Es ist also ein ähnliches Format wie: Furcht: um es in ein Bild umzuwandeln:
var keys = '//+|-|||| Ball | A | AB | ABC | ABCD | ABCD | Akzeptieren ...' // Nur einige Regex sind hier aufgeführt. regex = new regexp (':(' + keys + '):', 'g'), // mit dem Format wie folgt übereinstimmen: $ (obj [i]). entsprechendes IMG -Format}Das Codeformat des gesamten Plug-Ins ist auch eine gemeinsame Kapitalmethode.
// Emoji -Objektveränderliche Attributfunktion Emoji (Option) {this.emoji = option.emojiarray, this.textareAid = option.textAreaid, this.loadid = option.loadid, this.sendid = option.sendid, this.emojicontain = option.emojicontainer, this.emojitranslatEclatel. option.emojitranslatecls;}// Jedes Mal, wenn eine Instanz generiert wird, werden die obigen Attribute regeneriert, so dass für feste Methoden mehr Speicher verbraucht. Dies ist weder umweltfreundlich noch effizient. Daher können diese unveränderten Eigenschaften und Methoden direkt im Prototypobjekt definiert werden. Zu diesem Zeitpunkt sind alle festen Methoden tatsächlich dieselbe Speicheradresse, was auf das Prototyp -Objekt hinweist und so die Betriebseffizienz verbessert.
Emoji.prototype = {init: function () {// einige Initialisierungsmethoden this.toemoji (); this.loademoji (); this.bindeDevent ();}, BindEvent: function () {}, Toemoji: function () {}, // Serverdaten in Emoticons TETEXT: function () {} // in Text loademoji: function () {} // Emoticons laden} laden}OK, auch wenn ein solches Ausdrucks-Plug-In abgeschlossen ist, ist es einfach, daran gebunden zu sein oder nicht? Derzeit müssen Sie sich vorerst auf JQuery verlassen. Wenn Sie die Energie haben, basteln Sie weiter mit O (∩_∩) o basierend auf nativen JS. Der spezifische Implementierungscode befindet sich auf GitHub. Schließlich fügen Sie die Github -Adresse bei: https://github.com/beidan/emoji
Das obige ist die JavaScript -Einführung, die der Herausgeber Ihnen ab 0 vorgestellt hat, und ich hoffe, dass es für alle hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!