Пoкa рaзрaбoтчики твиттeрa нe принeсли нaм никaкиx стoящиx нoвoстeй, мы рeшили немного разнообразить twitter-рубрику каким-нибудь очередным интересным уроком. Поэтому, вслед за созданием удобной твиттер-ленты для блога, мы расскажем вам как сделать простую ленту упоминаний на jQuery.

Для начала разберем, что же такое лента упоминаний. Такая лента представляет собой небольшой список твиттов в которых вы, или любой другой твиттерянин, были отмечены. К упоминаниям, кроме простых сообщений, можно также отнести и ретвиты, сделанные другими пользователями.

Для примера мы создадим блок, который будет выводить 5 последних упоминаний любого пользователя, имя которого будет вводиться в форму. Для удобства описания, разобьем пример на 3 этапа и обсудим каждый по отдельности.

Этап 1 — XHTML1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Твитты

Тви-user:

На начальном этапе создадим каркас нашего будущего блока. Ключевым контейнером в нем является content, внутри которого будут выводиться твитты пользователей. Ниже расположен контейнер с формой, в которую мы будем вводить имя твиттерянина, упоминания о котором хотим прочитать.

Этап 2 — CSS

Теперь создадим внешний вид страницы. Класс twitter-mentions необходим для отображения упоминаний внутри блока. Сам класс, в дальнейшем, можно будет переименовать в любой другой в файле script.js.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 body {font-family:"Trebuchet MS", Arial, Helvetica,sans-serif;background:#474269url(img/top.jpg)repeat-x;color:#fff;font-size:13px;} #container{width:300px;margin:0pxauto;}#top-bar{height:45px;background:url(img/topbar.png)repeat-x;border-bottom:1pxsolid f5f5f5;position:relative; -moz-border-radius:6px6px00;}#icon{position:absolute;top:-21px;left:8px;width:64px;height:64px;}#top-bar h2 {color:#fff;font-size:16px;margin-left:95px;padding-top:10px;text-transform:uppercase;text-shadow:2px1px6px#333;} #content{background-color:#f5f5f5;padding:8px10px10px10px; -moz-border-radius:006px6px; -khtml-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;} ul.twitter-mentions{background-color:#FFF;list-style:none;padding:0;margin:0;} ul.twitter-mentions li {overflow:hidden;padding:5px;margin:5px0;color:#000;border:1pxsolid#eee;background-color:#fff;} ul.twitter-mentions img {float:left;border:1pxsolid#eee;width:45px; heigth:45px;margin:07px00;} ul.twitter-mentions p {padding:05px053px;margin:0;} ul.twitter-mentions li.odd{background-color:#eee;border:1pxsolid#9ee;} ul a, ul a:visited {color:#00bbff;text-decoration:none;outline:none;} form {position:relative;margin:10px000;padding:10px;background-color:#333;color:#fff;overflow:hidden; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;} form p {line-height:normal;margin:0;padding:0;} form label {display:block;width:80px;text-align:left;margin:4px0012px;float:left;font-weight:bold;} form input#username{width:62%;float:left;padding:4px;background-color:#fff;border:1pxsolid#eee;color:#888;} form input#refresh{position:absolute;top:11px;left:80%;background:url(img/bg-btn-search.png)bottomleftrepeat-x;border:1pxsolid#fff;color:#fff;text-shadow:#333;padding:2px10px;}

Так же, при желании, можно добавить небольшой код для корректного отображения png картинки в шапке блока, который был разобран в прошлом уроке.

Этап 3 — jQuery

На последнем этапе мы подключим необходимые скрипты и рассмотрим основные параметры отображения твиттов в блоке. Подключаемых скриптов для нашей ленты всего два: это jquery.min.js, который можно подгружать как с собственного сервера так и со стороны, и script.js, необходимый для отображения упоминаний.

1 2

Скрипт, отвечающий за отображение, можно смело назвать универсальным, т.к. он весит всего 2Кб и имеет большое разнообразие в параметрах:

Возможность показывать при старте упоминания одного или нескольких пользователейВозможность выбора количества отображаемых твиттовПоказ или скрытие аватаровВозможность определения собственных классовСоздание эффекта зебры в списке

Изменять эти параметры можно как внутри самого скрипта, так и с помощью подключения небольшого кода в html файл. Параметры в script.js считаются базовыми и если не подключены аналогичные функции в html файле, то скрипт будет работать согласно заданным в нем настройкам.

1 2 3 4 5 6 7 jQuery.fn.twitterMentions.defaults={ maximum :5,// Количество отображаемых твиттов avatar :false,// Отображение аватаров ulClass :'twitter-mentions',// Класс для блока упоминаний odd :false,// Эффект "зебры" oddClass :'odd'// Класс для этого эффекта};

Эти же функции можно подключить добавив javascript код в html файл. Параметры перечисляются через запятую, а при необходимости отображения упоминаний при старте, пользователи указываются в квадратных скобках.

1 $('#content').twitterMentions(['womtec'],{ maximum :5, avatar :true, odd :true});Заключение

Теперь вы легко сможете сделать аналогичную ленту на своем сайте или блоге. Исходные файлы и пример работы списка упоминаний вы можете скачать и посмотреть ниже.

Смотреть пример | Скачать файлы

womtec.ru