СКРИПТЫ
ТЕГИ:
php (322)
js (242)
html (146)
css (127)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
fonts (30)
online (27)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
input (18)
hosting (18)
svg (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
js events (14)
js url (14)
js time (14)
img (13)
htaccess (13)
osclass (13)
info (13)
notepad (13)
select (13)
php path (12)
keyboard (12)
table (12)
знак (12)
php img (12)
dw block (12)
download (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
js delete (10)
mouse (10)
hover (9)
dosite (8)
php url (7)
browser (7)
cookie (7)
comment (7)
php get (6)
iframe (6)
list (6)
canvas (6)
mysql (6)
click (6)
tag a (5)
adminka (5)
value (5)
reg.ru (5)
search (5)
js math (5)
mb (5)
chart (5)
ftp (5)
year (5)
heading (5)
js id (5)
нок (4)
php var (4)
xml (4)
scandir (4)
ssl (4)
week (4)
day (4)
base64 (4)
bbcode (4)
js form (4)
task (4)
month (4)
console (4)
symbols (4)
pages (4)
vk (4)
submit (4)
https (3)
numbers (3)
js post (3)
js hash (3)
money (3)
vs code (3)
domen (3)
куб (3)
line (3)
captcha (3)
ucoz (3)
padding (3)
js img (3)
js vars (2)
рся (2)
youtube (2)
video (2)
sitemap (2)
tag hr (2)
prompt (2)
arrows (2)
details (2)
seo (2)
height (2)
google (2)
qr kod (2)
counter (2)
typeof (2)
speed (1)
rutube (1)
windows (1)
game (1)
header (1)
smile (1)
archive (1)
cursor (1)
jino (1)
scroll (1)
нод (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
Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
dwweb.ru есть здесь:
Последние комментарии :
Марат :
14.03.2023 21:07
Так... это когда было то... в 2018 году... мне не нравится(не нравилось), как поиск по файлам... как-то коряво было…
подробнее.
Moubrey :
14.03.2023 20:52
Их там два можно поставить, еще и по бокам, а в них еще друге окна станут вкладками, обычный проводник и…
подробнее.
Марат :
26.02.2023 12:20
Спасибо за внимательность!
подробнее.
V :
26.02.2023 11:49
В массиве месяцев пропущен октябрь!
подробнее.
Марат :
02.02.2023 10:48
Я не знаю, что это ... Такое понятие - "определена"... я не понимаю, что такое... есть такая фигня в Js, там, бывают…
подробнее.
Артур :
02.02.2023 06:51
При копировании всего кода из 3 главы "Вывод всех файлов из папки ссылками на них", при выполнении скрипта…
подробнее.
ruweb
Страница загружена за : 0.019389 секунд. Подробнее