Смайли в чаті як в Facebook або ICQ c допомогою JQuery
При розробці чатів часто необхідно реалізувати конвертацію деяких текстових конструкцій в картинки. У смайли якщо по простому. У цій статті буде описаний JQuery плагін, який дозволяє це. За допомогою нього можна реалізувати будь-які смайли. Наш же плагін буде мати можливість використовувати смайли від facebook або icq.
Вихідний код демо
Суть плагіна в тому, що ґрунтуючись на якійсь карті, він буде проводити пошук і заміну поєднань символів в тексті. Замінювати він буде на тег <span class = "emotions {emId}"> </ span>. Дане рішення дозволяє гнучко налаштовувати іконки і використовувати будь-які сети за допомогою CSS. Причому можливо використовувати як окремо картинки, так і спрайт для оптимізації завантаження сайту.
Структура проекту:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 ├── css │ ├── emotions │ ├── jquery.emotions.fb.css │ ├── jquery.emotions.icq.css │ └── main .css ├── js │ ├── index.js │ └── jquery.emotions.js ├── images │ └── smiles.png ├── fb.html ├── icq.html ├── index. html └── readme.txtJavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 //js/jquery.emotions.js (function ($) { $. emotions = function (text) {return $. emotions .parse (text);}; var $ t = $. emotions; $. extend ($. emotions, {settings: {replacement: '<span class = "emotions emo- {eId} "> </ span> ', map: {" o :) ":" angel "," oO ":" confused "," 3 :) ":" devil "," <3 ":" heart ",": * ":" kiss "," :-) ":" smile ",":] ":" smile "," 8 | " : "Sunglasses", ": /": "unsure", ";)": "wink", ": '(": "cry", "> :(": "grumpy", ":(": "frown "," 8) ":" glasses ",": p ":" tongue "," :) ":" smile "," =) ":" smile ",": D ":" grin "}}, shortcode : function (eId) {var $ s = $ t. settings; for (var pattern in $ s. map) {if ($ s. map [pattern] == eId) return pattern; } Return ""; }, Parse: function (text) {var $ s = $ t. settings; for (var pattern in $ s. map) {var encPattent = $ t. encode (pattern); if (text. indexOf (pattern) <0 && text. indexOf (encPattent) <0) {continue; } Var rep = $ s. replacement. replace (/ \ {eId \} / g, $ s. map [pattern]); text = text. replace (new RegExp ($ t. quote (pattern), "g"), rep). replace (new RegExp ($ t. quote (encPattent), "g"), rep); } Return text; }, Encode: function (str) {return (str + ''). replace (/ & / g, '& amp;'). replace (/ </ g, '& lt;'). replace (/> / g, '& gt;'). replace (/ "/ g, '& quot;');}, quote: function (str) {return (str + '') .replace (/ ([.? * + ^ $ [\] \\ () {} | -]) / g, "\\ $ 1");}}); $. fn .emotions = function (action, options) {this .each (function () {var el = $ (this); el. html ($. emotions (el. html ()));});};}) (jQuery);Робота плагіна проста. Він всього лише робить пошук і заміну за допомогою стандартних методу об'єкта рядки string.replace.
Використовувати даний плагін просто.
1 2 3 $ (selector). emotions (); // or var parsed = $. emptions (text); CSS
Таким чином оброблений тест буде містити html теги, за допомогою яких ми вставимо картинки.
Усе. Залишилося тільки реалізувати роботу плагіна на прикладі. Звичайно, плагін не ідеальний і він може порушити html верстку, якщо ним користуватися необережно. Але в правильних руках цей інструмент запрацює ідеально.
Те що вийшло ви можете подивитися в демонстрації. А також завантажити його вихідний приклад і поекспериментувати.
Поділитися посиланням з друзями
