• Главная
  • Карта сайта
Не найдено

Смайли в чаті як в 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.txt

JavaScript:

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 теги, за допомогою яких ми вставимо картинки.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 / * css / jquery.emotions.icq.css * / .emotions {width: 20px; height: 20px; background: url ( "emotions / blank.gif") no-repeat center center; display: inline-block; vertical-align: bottom; } .Emo-angel {background: url ( "emotions / icq / angel.gif"); } .Emo-confused {background: url ( "emotions / icq / confused.gif"); } / * ... * /

Усе. Залишилося тільки реалізувати роботу плагіна на прикладі. Звичайно, плагін не ідеальний і він може порушити html верстку, якщо ним користуватися необережно. Але в правильних руках цей інструмент запрацює ідеально.

Те що вийшло ви можете подивитися в демонстрації. А також завантажити його вихідний приклад і поекспериментувати.

Поділитися посиланням з друзями

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью