СКРИПТЫ
ТЕГИ:
php (285)
js (155)
html (135)
css (109)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (30)
fonts (27)
ruweb.net (23)
foto (22)
online (20)
atom (20)
forum (19)
svg (18)
Показать еще :
hosting (17)
board (17)
js method (16)
html book (16)
php file (16)
color (15)
php date (15)
link (15)
js events (14)
input (14)
osclass (13)
table (13)
htaccess (13)
dw block (12)
path (12)
select (12)
php img (11)
form (11)
php time (11)
jsphp (11)
icon (11)
js delete (11)
download (11)
notepad (11)
mouse (10)
img (10)
url (10)
js time (9)
info (9)
yandex (9)
dosite (7)
hover (7)
cookie (7)
comment (7)
task (7)
php url (7)
js url (6)
mysql (6)
year (6)
click (6)
list (6)
iframe (6)
browser (5)
search (5)
ftp (5)
chart (5)
adminka (5)
php get (5)
value (5)
mb (5)
week (4)
console (4)
vk (4)
bbcode (4)
symbols (4)
js form (4)
js id (4)
mounth (4)
submit (4)
reg.ru (4)
scandir (3)
line (3)
pages (3)
https (3)
js post (3)
ucoz (3)
js img (3)
padding (3)
day (3)
captcha (3)
vs code (3)
ssl (3)
second (2)
cursor (2)
tag hr (2)
money (2)
рся (2)
height (2)
js vars (2)
title (2)
counter (2)
typeof (2)
details (2)
youtube (2)
video (2)
base64 (2)
seo (2)
qr kod (2)
arrows (2)
sitemap (2)
smile (1)
google (1)
windows (1)
archive (1)
domen (1)
numbers (1)
speed (1)
books (1)
scroll (1)
header (1)
days (1)

DW-Блок "hide & show"

dw hide & showПродолжение темы : , по смыслу, но не по форме. Нужен скрипт, который будет работать по определенному алгоритму, с основной задачей !

DW-Блок : HIDE & SHOW

  1. Техническое задание на создание скрипта "hide & show"
  2. Условия для работы скрипта "hide & show"
  3. Пример работы скрипта "hide & show"
  4. Блок №2 не закрывать
  5. Вторая часть алгоритма.
  6. Скачать можно здесь


  1. Техническое задание на создание скрипта "hide & show"

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

    Описание алгоритма скрипта "hide & show"

    Первая часть алгоритма :

    При нажатии на блок №1, должен открыться блок №1.1.

    При следующем клике есть несколько вариантов развития :

    Если нажать на блок №1, то блок №1.1 должен закрыться.

    Если нажать на блок №1.1, то :

    Блок может закрыться.

    Или по условию не закрываться!

    Если нажать на любую точку страницы, блок №1.1 должен закрыться.

    Если нажать на блок №2, то :

    Блок №1.1 должен закрыться.

    Блок №2.1 должен открыться.

    После нажатия на блок №2, возвращаемся к началу алгоритма и весь алгоритм должен повторится с изменением на произвольный номер блока.


    Вторая часть алгоритма :

    Требуется(в некоторых случаях) :

    Внутри блока №1 написать некоторый текст, например(ключ) "Открыть".

    После нажатия на блок №1 открывается блок №1.1.

    И текст в внутри блока №1 меняется на(значение) "Закрыть"

    Набор слов(ключ => значение) можно добавлять. Например...

    Показать.

    Скрыть.

    Количество вариаций(ключ => значение) неограниченно.

    При нажатии на любую точку страницы - "значение" должно вернуться в первый нажатый блок.


  2. Условия для работы скрипта "hide & show"

    Первое сам скрипт:

    Вы можете его подключить, как подключают любой внешний скрипт

    <script src="https://dwweb.ru/js/dw_hide_show.js"></script>

    Либо :

    Скачать можно здесь
    Стили css:

    На страницу/сайт требуется добавить пару строк стилей css :

    Либо с помощью тега style - на одну, несколько страниц(пример кода ниже).

    Если нужно поставить на весь сайт, то нужно найти главный файл file css, и стили нужно поместить туда(естественно без тега <style>):

    <style>

      div[data-display=none] {

      display: none;

      }

      div[data-display=block] {

      display: block;

      }

    </style>

    Html код:

    Перейдем к html коду:

    Блок номер 1(видимый), нужно добавить два атрибута :

    Атрибут id:

    id="first"

    Атрибут data, с id второго блока:

    data-openmore="second"

    Блок номер 1 должен получиться вот такой:

    <div id="first" data-openmore="second">Блок номер 1</div>

    Блок номер 2(невидимый), нужно добавить два атрибута :

    Атрибут id второго блока:

    id="second"

    Атрибут data, что он скрыт:

    data-display="none"

    Второй блок должен получиться:

    <div id="second" data-display="none">Скрытый текст</div>

    Соберем весь html код в одно целое:

    <div id="first" data-openmore="second">Блок номер 1</div>
    <div id="second" data-display="none">Блок номер 2</div>

    Выведем код прямо здесь:
    Блок номер 1
    Блок номер 2


  3. Пример работы скрипта "hide & show"

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

    Блок два:

    <div id="first_1" data-openmore="second_1">Блок номер 1_1</div>
    <div id="second_1" data-display="none">Блок номер 2_1</div>

    Блок три:

    <div id="first_2" data-openmore="second_2">Блок номер 1_2</div>
    <div id="second_2" data-display="none">Блок номер 2_2</div>

    И вы можете протестировать, поочередно/случайно нажимая на:

    На блок 1(см. выше пунктом).

    На блок 2.

    На блок 3.

    На пустое местно на странице.

    Блок два:
    Блок номер 1_1
    Блок номер 2_1
    Блок три:
    Блок номер 1_2
    Блок номер 2_2


  4. Блок №2 не закрывать

    Как вы уже наверное протестировали, но при нажатии на второй блок... он закрывается.

    Как сделать, чтобы он не закрывался? Для этого нам опять понадобится четвертый код html.

    Добавим еще один атрибут во второй блок:

    data-click="no_close"

    И чтобы увидеть края блока 2 добавим border

    style="border: 1px solid;"

    Весь код:

    <div id="first_3" data-openmore="second_3">Блок номер 1_3</div>
    <div id="second_3" data-display="none" data-click="no_close" style="border: 1px solid;">Блок номер 2_3</div>

    Блок четыре :
    Блок номер 1_3
    Блок номер 2_3


  5. Вторая часть алгоритма.

    Как работает вторая часть алгоритма, описание в первом пункте.

    Сейчас массив заменяемых слов состоит из:

    var hide_open_arr = {
    'показать' : 'скрыть' ,
    'Показать еще :' : 'Скрыть :' ,
    'Показать еще' : 'Скрыть',
    'подробнее...' : 'закрыть',
    'Изменить' : 'Отменить',
    'Посмотреть ответ :': 'Скрыть ответ.'
    };

    Обращаю ваше внимание! Если вы захотите добавить свой ключ и значение... Ключ и значение должно быть уникальным и к ключам и значенням... иначе может не работать...

    Как это работает?

    Внутрь блока №1 помещаем ключ из массива(текст слева, массив смотри выше)... пример... вот три блока с разным текстом(ключем) внутри тега.

    При нажатии на блок №1, ключ будет заменяться на "значение ключа"(текст справа).

    При любом следующем нажатии ключ вернется в первоначальное состояние!


    Блок 5:
      <div id="first_4" data-openmore="second_4">показать</div>
      <div id="second_4" data-display="none">Блок номер 2_4</div>
    Блок 6:
      <div id="first_5" data-openmore="second_5">подробнее...</div>
      <div id="second_5" data-display="none">Блок номер 2_5</div>
    Блок 7:
      <div id="first_6" data-openmore="second_6">Посмотреть ответ :</div>
      <div id="second_6" data-display="none">Блок номер 2_6</div>

    Выведем данный пример:

    Понажимайте и вы получите результат!

    Блок 5:
    показать
    Блок номер 2_4
    Блок 6:
    подробнее...
    Блок номер 2_5
    Блок 7:
    Посмотреть ответ :
    Блок номер 2_6

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Название скрипта :DW - Блок: HIDE & SHOW
Ссылка на скачивание : Все скрипты на одной странице
Теги :
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
28.04.2022 19:20
У меня на сайте - все скрипты рабочие! Приходите…
подробнее.
Игорь :
05.04.2022 03:52
Спасибо Большое Вам за счетчик скачиваний файлов! Вы единственный, кто выложил действительно рабочий код!…
подробнее.
Марат :
03.04.2022 11:16
Вы обратились не по адресу... Предположим... что у вас есть паравоз...на дровах... И вы обращаетесь в автосервис, …
подробнее.
Good_Serpent :
03.04.2022 08:18
Шара - "расшаренная", доступная для пользователей локальной сети папка. Там происходит обмен информацией,…
подробнее.
Марат :
02.04.2022 20:29
Я даже не знаю, что таоке "шара"... Думаю, что вам нужно искать на специализированном сайте посвященной…
подробнее.
Good_Serpent :
02.04.2022 19:54
Здравствуйте! Нужен скрипт, который бы закрывал файл на шаре, если он там открыт. Не удаётся его удалить для…
подробнее.
ruweb
Страница загружена за : 0.023995 секунд. Подробнее