136 Вся прелесть и удобство этой кнопки в том, что она написана только на CSS и JavaScript. Конечно, чтобы довести до совершенства такой виджет, требуется достаточно много часов программирования, но если уже есть готовый код, то почему бы и не воспользоваться им.
Давайте, мы вам покажем, как можно реализовать функционал этой кнопки с помощью популярных JavaScript библиотек: MooTools, jQuery и Dojo.
Примечание: В статье показана только клиентская часть кнопки. Никаких серверных скриптов на PHP/MySQL нет.
HTML структура
|
1 2 3 4 5 6 |
<form class="follow-form" method="post" action="twitter-follow.php"> <input type="hidden" name="followID" value="123456" /> <button type="submit" value="Actions" class="btn follow" title="123456"> <i></i><span>follow</span> </button> </form> |
HTML код для кнопки достаточно прост. Структура построена таким образом, что в элементе BUTTON содержатся два элемента: I элемент и SPAN элемент. Вы наверное думаете: «Элемент I? WTF?!» Мы знаем, что делаем. Дело в том, что этот элемент считается устаревшим напрасно. Его плюс в его размере. И думаем, что в Twitter тоже не прочь сэкономить пару байтов.
CSS стили
|
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 |
/* twitter button and its children */ button.btn { -moz-border-radius:4px; -webkit-border-radius:4px; background-attachment:scroll; background-color:#ddd; background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif); background-position:0 0; background-repeat:repeat-x; border:1px solid #ddd; border-bottom:1px solid #ccc; color:#333; cursor:pointer; font-family:"Lucida Grande",sans-serif; font-size:11px; line-height:14px; padding:4px 8px 5px 8px; text-shadow:1px 1px 0 #fff; vertical-align:top; } button.btn:hover { border:1px solid #999; border-bottom-color:#888; color:#000; background-color:#d5d5d5; background-position:0 -6px; } button.btn:active { background-image:none !important; text-shadow:none !important; } button.btn i { background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png); background-position:-176px -32px; background-repeat:no-repeat; display:inline-block; height:13px; margin-right:5px; width:15px; } button.btn i.active { background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); } /* properties for the element that is generated *after* following */ span.following { background:#ffd; padding:5px 10px; } span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat; } |
Основное оформление кнопки прописывается в самом элементе BUTTON. Присутствуют модные CSS3 свойства закругления бордюров и конечно же не обошлось без спрайтов. Чего и вам советуем не забывать...
MooTools 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 |
/* with mootools */ window.addEvent('domready',function() { /* fetch elements */ $$('form.follow-form').each(function(form) { /* stop form event */ form.addEvent('submit',function(e) { /* stop event */ if(e) e.stop(); /* send ajax request */ var i = form.getElement('i'); new Request({ url: 'twitter-follow.php', method: 'post', data: { followID: form.getElement('input').value }, onRequest: function() { i.addClass('active'); }, onSuccess: function() { var button = form.getElement('button'); button.setStyle('display','none'); new Element('span',{ html: '<span></span>Following!', 'class': 'following' }).inject(button,'after'); }, onComplete: function() { i.removeClass('active'); } }).send(); }); }); }); |
Первый шаг состоит в перехвате всех элементов FORM с CSS классом follow-form. Останавливаем стандартный функционал формы, для того чтобы зайдействовать Ajax. Запрос Ajax генерируется с использованием ID элемента INPUT. Как только запрос начал работу, фоновое изображение элемента I переключается на изображение спинера(spinner). Запрос выполнен, кнопка прячется и появляется новый SPAN элемент, информирующий пользователя о том, что он теперь следует за выбранным пользователем!
jQuery JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Idiomatic jQuery by Doug Neiner jQuery(function ($) { /* fetch elements and stop form event */ $("form.follow-form").submit(function (e) { /* stop event */ e.preventDefault(); /* "on request" */ $(this).find('i').addClass('active'); /* send ajax request */ $.post('twitter-follow.php', { followID: $(this).find('input').val() }, function () { /* find and hide button, create element */ $(e.currentTarget) .find('button').hide() .after('<span class="following"><span></span>Following!</span>'); }); }); }); |
Код основан на MooTools фреймворке. Функционал тот же.
Dojo 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 |
/* when the DOM is ready */ dojo.ready(function() { /* fetch elements */ dojo.query('form.follow-form').forEach(function(form) { /* stop form event */ dojo.connect(form,'onsubmit',function(e) { /* stop event */ dojo.stopEvent(e); /* active class */ dojo.query('i',form).addClass('active'); /* get button */ var button = dojo.query('button',form)[0]; /* ajax request */ dojo.xhrPost({ form: form, load: function() { dojo.style(button,'display','none'); dojo.create('span',{ innerHTML: '<span></span>Following', className: 'following' },button,'after'); } }); }); }); }); |
Код основан на MooTools. Рабочий процесс точно такой же.
