В предыдущем посте я описывал процесс создания анимированной кнопки для сайта с помощью программы Photoshop, но сделать кнопку – это только полдела. Ведь мы ее создавали не для того чтобы ею любоваться, а дать возможность пользователю установить ее себе на сайт. В данном же посте я покажу, как предоставить пользователю код вашей кнопки для вставки у себя на сайте. При этом сам код будет спрятан, а при клике по ссылке «показать код кнопки» он плавно откроется.
Для таких целей нам необходима библиотека jQuery. В последнее время я ею только и пользуюсь, потому как, в отличие от обычного JavaScript, облегчается доступ к html-элементам и различные приемы и эффекты выглядят более красиво. Так что первым делом подключим ее между тегами <head> нашего сайта:
Ну вот и все, как работает данный код можете посмотреть у меня на блоге внизу левой колонки. Если есть желание, можете добавить мою кнопку к себе на сайт, буду благодарен. :)
Для таких целей нам необходима библиотека jQuery. В последнее время я ею только и пользуюсь, потому как, в отличие от обычного JavaScript, облегчается доступ к html-элементам и различные приемы и эффекты выглядят более красиво. Так что первым делом подключим ее между тегами <head> нашего сайта:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js'></script><img src="АДРЕСС_ИЗОБРАЖЕНИЯ" width="88" height="33" border="0" alt="ОПИСАНИЕ_САЙТА" />
<br />
<div>
<a class="showButtonCode">показать код кнопки</a>
<br />
<div class="buttonCode">
<textarea name="mybutton" cols="23" rows="7" readonly="readonly"><a href="АДРЕСС_САЙТА" target="_blank"><img src="АДРЕСС_ИЗОБРАЖЕНИЯ" width="88" height="33" border="0" alt="ОПИСАНИЕ_САЙТА" /></a></textarea>
</div>
</div>.buttonCode {
display:none;
}
.showButtonCode {
cursor: pointer;
}$(document).ready(function(){
$('.showButtonCode').click(function(){
$block_div = $(this).parent().children('div.buttonCode').css("display");
if ($block_div == "block") {
$(this).text("показать код кнопки");
}
else
{
$(this).text("скрыть код кнопки");
}
$(this).parent().children('div.buttonCode').toggle('normal');
$(this).blur();
return false;
});
});Ну вот и все, как работает данный код можете посмотреть у меня на блоге внизу левой колонки. Если есть желание, можете добавить мою кнопку к себе на сайт, буду благодарен. :)
Комментариев нет:
Отправить комментарий