8 июня 2010
Список упоминаний на jQuery
Пока разработчики твиттера не принесли нам никаких стоящих новостей, мы решили немного разнообразить нашу категорию каким-нибудь очередным интересным уроком. Поэтому, вслед за созданием удобной твиттер-ленты для блога, мы расскажем вам как сделать простую ленту упоминаний на jQuery.
Для начала разберем, что же такое лента упоминаний. Такая лента представляет собой небольшой список твиттов в которых вы, или любой другой «твиттерянин», были отмечены. К упоминаниям, кроме простых сообщений, можно также отнести и ретвиты, сделанные другими пользователями. Для примера мы создадим блок, который будет выводить 5 последних упоминаний любого пользователя, имя которого будет вводиться в форму. Для удобства описания, разобьем пример на 3 этапа и обсудим каждый по отдельности.
Этап 1 — XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <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.
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:#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 файле, то скрипт будет работать согласно заданным в нем настройкам.
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 }); |
Заключение
Теперь вы легко сможете сделать аналогичную ленту на своем сайте или блоге. Исходные файлы и рабочий пример вы можете скачать и посмотреть ниже.
Смотреть пример | Скачать файлы
Добавить новый комментарий