Bymas | html скрипти

Топ дня:

AbaloN

Скидавайте силки на сайте где можно скачать html скрипти

________
посл. ред. 18.04.2018 в 15:49; всего 1 раз(а); by Cool

html скриптов не существует

________
посл. ред. 18.04.2018 в 16:02; всего 1 раз(а); by dober

нет такого

Только это есть
https://bym.guru/downloads/view/75516

https://ru.m.wikipedia.org/wiki/HTML

Гм, хтмл-скрипты?
Не не слышал

А так хтмл может шаблоны нужны?
Вот
https://html-templates.info/templates

Cool (18.04.2018 в 15:49)
Скидавайте силки на сайте где можно скачать html скрипти

Возможно ты имел ввиду скрипты которые можно поставить на html?

Для реализации подобных спойлеров в одну строку (по горизонтали) Вам потребуется подключение на Вашем сайте библиотеки jQuery. Сделать это можно следующим образом:

JavaScript код:

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Далее Вам необходимо будет разместить коды спойлеров и их содержимого, которые будут располагаться в одну строку:

HTML код:

<div align="center">
<div class="spoilers">
<div>Спойлер №1<div><img src="image/img_1.png" alt=""></div></div>
<div>Спойлер №2<div><img src="image/logo.png" alt=""></div></div>
<div>Спойлер №3<div>Текст...</div></div>
<div>Спойлер №4<div>Еще один текст...</div></div>
<div>Спойлер №5<div>Много текста<br>Много текста<br>Много текста</div></div>
</div>

<div class="spoilers">
<div>Спойлер №11<div><img src="image/img_1.png" alt=""></div></div>
<div>Спойлер №12<div><img src="image/img_2.png" alt=""></div></div>
<div>Спойлер №13<div><img src="image/img_3.png" alt=""></div></div>
<div>Спойлер №14<div><img src="image/img_4.png" alt=""></div></div>
</div>
</div>

Так же не забываем о размещении на страничке кнопок "Вперед" и "Назад" для переключения между спойлерами одного ряда:

HTML код:

<img src="image/sp_back.png" alt="Назад" class="sp_back">
<img src="image/sp_forward.png" alt="Вперед" class="sp_forward">

Отметим, что каждой из кнопок "Вперед" и "Назад" может быть несколько на одной страничке и располагаться они могут в удобном для Вас месте. Все кнопки независимо от их расположения будут выполнять одну и ту же функцию - переход к соседнему спойлеру от выбранного в данный момент.

Далее в шапку сайта между тегами <head> и </head> необходимо добавить стили для первоначального скрытия содержимого спойлеров и правильного их отображения:

HTML код:

<style type="text/css">
.spoilers>div { display:inline-block; width:105px; margin:3px; padding:2px;
border-radius:8px; font-size:14px; text-align:center; font-weight:bold;
color:#0000FF; border:1px solid #808080; cursor:pointer; }
.selected { background-color:#CCCCCC; }
.spoilers>div>div, .clone { display:none; }
.sp_back { float:left; cursor:pointer; }
.sp_forward { float:right; cursor:pointer; }
</style>

Теперь остается лишь добавить JavaScript код, который будет показывать и скрывать содержимое спойлеров расположенных в одну строку, а так же осуществлять переходы между спойлерами при кликах по кнопкам "Вперед" и "Назад":

JavaScript код:

<script type="text/javascript">
$(document).ready(function(){
$('.sp_back, .sp_forward').click(function() {
group=$('.selected').parent().children('div');
this_elem=group.index($('.selected'));
});

$('.sp_back').click(function() {
if (this_elem==0) group.eq(group.length-1).trigger('click');
else group.eq(this_elem-1).trigger('click');
});

$('.sp_forward').click(function() {
if (this_elem==group.length-1) group.eq(0).trigger('click');
else group.eq(this_elem+1).trigger('click');
});

$('.spoilers>div').click(function(){
time=400;
$('.clone').clearQueue().fadeOut(time);
if ($(this).hasClass('selected')!=true) {
$('.spoilers>div').removeClass('selected');
$(this).addClass('selected');
$(this).children('div').clone().insertAfter($(this).parent()).addClass('clone')
.delay(time).fadeIn(time);
}
else $('.spoilers>div').removeClass('selected');
});
});
</script>

Данный скрипт расположения спойлеров в один ряд будет очень полезен тем, у кого на страничке много разных данных, которые необходимо как-то систематизировать и показывать только по клику.

Изображение

------

55877_kdfndunkdexx.png (28.0 Kb)
Скачиваний: 81

Cool (18.04.2018 в 15:49)
Скидавайте силки на сайте где можно скачать html скрипти

html скриптов нету, только wml