Twitter »

Список упоминаний на jQuery

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

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

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

Этап 1 — XHTML

<div id="container">
 
<!-- Контейнер с иконкой и заголовком -->
<div id="top-bar">
<div id="icon"><img src="img/womtec.png" width="64" height="64" alt="Twitter" /></div>
<h2>Твитты</h2>
</div>
 
<!-- Контейнер для вывода твиттов -->
<div id="content"></div>
 
<!-- Форма в которую будем вводить имя пользователя -->
<form action="" method="post">
<p>
<label for="username">Тви-user:</label>
<input type="text" name="username" id="username" />
<input type="submit" value="Ok" id="refresh" />
</p>
</form>
 
</div>

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

Этап 2 — CSS

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

body { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; background:#474269 url(img/top.jpg) repeat-x; color:#fff; font-size:13px; }
 
#container { width:300px; margin:0px auto; }
#top-bar { height:45px; background:url(img/topbar.png) repeat-x; border-bottom:1px solid f5f5f5; position:relative; -moz-border-radius:6px 6px 0 0; }
#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:2px 1px 6px #333; }
 
#content { background-color:#f5f5f5; padding:8px 10px 10px 10px; -moz-border-radius:0 0 6px 6px; -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:5px 0; color:#000; border:1px solid #eee; background-color:#fff; }
ul.twitter-mentions img { float:left; border:1px solid #eee; width:45px; heigth:45px; margin:0 7px 0 0; }
ul.twitter-mentions p { padding:0 5px 0 53px; margin:0; }
ul.twitter-mentions li.odd { background-color:#eee; border:1px solid #9ee; }
ul a, ul a:visited { color:#00bbff; text-decoration:none; outline:none; }
 
form { position:relative; margin:10px 0 0 0; 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:4px 0 0 12px; float:left; font-weight:bold; }
form input#username { width:62%; float:left; padding:4px; background-color:#fff; border:1px solid #eee; color:#888; }
form input#refresh { position:absolute; top:11px; left:80%; background:url(img/bg-btn-search.png) bottom left repeat-x; border:1px solid #fff; color:#fff; text-shadow:#333; padding:2px 10px; }

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

Этап 3 — jQuery

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

1 2	<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="script.js"></script>

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

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

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

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 });

Заключение

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

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

Постовой — создание сайта в Брянске