Выдвижная кнопка для сайта на JavaScript
AyaMi
1
Всем привет друзья. Подскажите пожалуйста по поводу кнопки выдвижной.
Код
<script>
$(document).ready(function(){
$('.content_toggle').click(function(){
$('.content_block').slideToggle(300, function(){
if ($(this).is(':hidden')) {
$('.content_toggle').html('<button>О файле:</button>');
} else {
$('.content_toggle').html('<button>Скрыть</button>');
}
});
return false;
});
});
</script>
<table border="0" cellpadding="1" cellspacing="1" style="width:100%;"><tbody><tr>
<div style="float:right;font-size:12px;" class="screnload">
<a class="content_toggle" href="#"><button>О файле:</button></a>
<div class="content_block" style="display: none;">Добавил: <span style="color: #b9a65f;" itemprop="author"><a href="$PROFILE_URL$"><b>$USER$</b></a></span><br>
Автор: <span style="color: #b9a65f;" itemprop="author"><?if($AUTHOR_NAME$)?>$AUTHOR_NAME$<?else?>Неизвестен или указан в описании<?endif?></span><br>
Размер: <span style="color: #b9a65f;" itemprop="author"><?if($RFILE_SIZE$)?><b>$RFILE_SIZE$</b><?else?><b>Неизвестно</b><?endif?></span><br>
Версия: <span style="color: #b9a65f;" itemprop="author"><?if($VERSION$)?>$VERSION$<?else?>Неизвестно<?endif?></span><br>
Подробнее: <span style="color: #b9a65f;" itemprop="author"><?if($DOCPAGE_URL$)?><a style="color: #bfa56d;" href="$DOCPAGE_URL$">Тема на форуме</a><?else?>Неизвестно<?endif?></span><br>
Обновлен: <span style="color: #b9a65f;" itemprop="author">$MOD_DATE$ в $MOD_TIME$</span><br>
Категория: <span style="color: #b9a65f;" itemprop="author"><a href="$CAT_URL$">$SECTION_NAME$: $CAT_NAME$</a></span><br> Теги: <span style="color: #b9a65f;" itemprop="author">$TAGS$</span><br></div>
</div>
Страна: (RU )
Kosten
2
Вот CSS кнопки, и делайте берез браузер стиль дизайна, так как вам угодно.Код
button {color:#888888;border:1px solid #323232;background:#242424 linear-gradient(#242424,#222222);box-shadow:0 1px 2px rgba(0,0,0,.1);padding:4px;}
Страна: (RU )
Kosten
3
Вот пример, еще добавил курсор, при наведении.Код
button {
Страна: (RU )
AyaMi
4
Kosten, а кнопка не будет ходить туда-сюда?---Чтобы оно было в одном положении, то почитайте про свойства позиционирования в css (position:fixed или absolute). А так, то оно практически не отличается от системного спойлера (принцип работы идентичен), что вполне можно было даже взять html, что отдается прописанный системой uCoz исходник на bb-код spoiler , потом под себя поправить. С учётом того, что кнопке присвоен класс, а значит на него можно подключить желаемую стилизацию (css). И у вас там в исходниках полно ошибок, что браузер метит красным. Кнопку эту запихали не в положенное место, что уже браузер кидает её за пределы таблицы вверх на обложку материала (нельзя ставить div в tr, должен в table после tr быть td , а уже после можно ставить ваше содержимое).--- © -SAM-
Сообщение отредактировал-SAM- - Понедельник, 28 Августа 2023, 08:19
Страна: (RU )
Kosten
5
Цитата AyaMi (
)
Мне хотелось бы, чтобы кнопка всегда была в одном положении. Чтобы как бы из нее выползало окно с информацией.
---Если бы ТС нужно было выводить ту информацию в окне, то наверняка же он изначально поставил бы что-то подобное (или спросил бы про это в теме). А так, то идёт функционал по типу спойлера. В любом случае, на сайте подобных решений предостаточно выложено. Вот недавно разбирали модальное окно ---И снова тема не содержит вопроса по системе uCoz. P.S.: в общем, закрыто Можно перекинуть в надлежащий форум и открыть. А этот форум, что идут вопросы по системе uCoz - не нужно засорять такими темами, что "вопросы" идут такие, что "ответы" нужны лишь им задавшим (для других людей тема будет бесполезной, а в глазах ПС - просто мусорная, поскольку это всё настройки под себя в тех. плане и не дают каких-то конкретных познаний широкой аудитории).--- © -SAM- Сообщение отредактировал-SAM- - Понедельник, 28 Августа 2023, 08:17
Страна: (RU )
