СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (133)
css (96)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (17)
board (17)
hosting (17)
html book (17)
Показать еще :
svg (16)
js method (16)
php file (15)
ruweb.net (15)
color (14)
osclass (13)
htaccess (13)
path (12)
table (12)
input (11)
icon (11)
info (11)
online (11)
yandex (11)
php date (11)
notepad (11)
js delete (11)
php img (10)
url (10)
jsphp (10)
form (8)
task (7)
cookie (7)
comment (7)
php url (7)
click (6)
ftp (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
bbcode (4)
js form (4)
select (4)
search (4)
js copy (4)
vk (3)
captcha (3)
js time (3)
iframe (3)
vs code (3)
sitemap (2)
js post (2)
browser (2)
console (2)
seo (2)
tag hr (2)
ukoz (2)
header (1)
archive (1)
smile (1)
numbers (1)
ssl (1)
books (1)

DW-Блок "HIDE & SHOW"

dw hide & show Этот блок предназначен для . Я делал отдельную страницу про это, но требовался супер универсальный способ, который бы не зависел от стилей... в общем я не совсем был доволен предыдущим универсальным скриптом, поэтому выделяем в отдельный блок!

DW-Блок : HIDE & SHOW

  1. Что такое блок - "DW: HIDE & SHOW"
  2. Зачем нужно придумывать отдельное название для скрипта?
  3. Html код в блоке - "DW: HIDE & SHOW"
  4. Css в блоке - "DW: HIDE & SHOW"
  5. Алгоритм работы блока - "DW: HIDE & SHOW"
  6. Чтобы открытый блок не закрывался.
  7. Текст и заменяемый текст.
  8. А если требуется закрыть предыдущий открытый
  9. Возврат измененного текста (и замена текста).
  10. Скачать можно здесь

  1. Что такое блок - "DW: HIDE & SHOW"

    Прежде, чем перейти к теме абзаца, маленькое отступление...

    Как-то я написал универсальный блок, который заточен под . Но после некоторого использования выявилось множество недостатков такого подхода. На той же странице следующем пункте написал немного об этом.
    И далее собрался написать следующий абзац на эту тему, но тема начала разрастаться и вот - решил, что данную тему через атрибут , надо выделить в отдельный блок и тогда появился отдельный блок:
    DW: HIDE & SHOW

    Что таоке блок - "DW: HIDE & SHOW"

    Наверно вы уже догадались - блок - "DW: HIDE & SHOW" - это: через атрибут

    Т.е. основным атрибутом будет атрибут

    И второй атрибут - это: "Атрибут id"

    И да! Стилизацию тоже будет делать через атрибут


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

    Есть просто скрипты, которые...ммм...просто скрипты, которые просто работают и работают.

    А бывают скрипты, которые достойны отдельного названия!

    Отдельное название для скрипта и выделение его в отдельный блок DW-BLOCK - может происходить по многим причинам!
    Но одно точно!

    Что этот скрипт достоин отдельного имени!wall


  2. Html код в блоке - "DW: HIDE & SHOW"

    Начнем с демонстрации работы скрипта:

    Количество блоков может быть неограниченное количество:

    Нажмите по любой строчке ниже...

    Ссылка: показать
    Блок №1 красный бордер!

    Кнопка (button)
    Блок №2 синий бордер!

    div
    Показать еще
    Блок №1 оранжевый бордер!

    Разберем Html код:

    Разберем код на блоке "div": все будет завязано на атрибут "" - его можно использовать в разных способах и в неограниченном количестве! Поэтому - этот атрибут лучше всего подходит для различных многофункциональных целей и в том числе "показать скрыть блок при клике!"

    У нас должно существовать 2 элемента, первый - это тот, по которому будет сделан клик. У него будет атрибут с уникальным значением :

    <div -open="здесь id второго элемента">показать</div>

    У второго элемента должен существовать id - напоминаю, что он должен быть уникальным и начинаться с буквы. И атрибут -display="none". Соберем второй элемент:

    <div -display="none" id="hide_array1">Блок №1 красный бордер!</div>

    Соберем весь код вместе, как он представлен выше... в примере...

    <div data-open="hide_array3">Показать еще</div>

    <div data-display="none" id="hide_array3">Блок №1 оранжевый бордер!</div>

    Еще пример :

    Чтобы данный пример заработал здесь, изменим число 3 на число 4(не забываем про уникальность id).

    <div data-open="hide_array4">Показать еще</div>

    <div data-display="none" id="hide_array4">Блок №4!</div>

    Результат:

    Показать еще
    Блок №4!

  3. Css в блоке - "DW: HIDE & SHOW"

    Отдельно на стилях останавливаться не буду, отдельным пунктом выделил нужную нам информацию.

    Или так, если поленились читать:

    <style>

    div[data-display=none] {

    display: none;

    }

    div[data-display=block] {

    display: block;

    }

    </style>


  4. Алгоритм работы блока "DW: HIDE & SHOW"

    Алгоритм работы через атрибут элементарен, как и все в программирование wall
    Не знаю насколько вам нужен алгоритм работы но тем не менее:

    Разберем на блоке с оранжевым бордюром:

    <div data-open="hide_array3">Скрыть</div>

    <div data-display="block" id="hide_array3">Блок №1 оранжевый бордер!</div>

    Все обернуто в "click" смотри onclick:

    document.addEventListener("click", function(isclick)

    Выведем, что нам вернет консоль.log с target(isclick -аргумент в функции см выше):

    console.log(isclick.target);

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

    Алгоритм работы блока ‘DW: HIDE & SHOW‘

    Далее отсюда нам нужно получить содержимое атрибута data(hide_array3 - это значение идентификатора второго блока!):

    name_data = isclick.target.dataset;

    Далее проверка... а есть ли атрибут дата с флагом "open" в нажатой кнопке - это условие:

    if(name_data.open)

    Если прошли эту проверку, то получаем тег , который нужно открыть

    openclose = document.getElementById(name_data.open);
    Далее стандартная проверка на display_none_js, но только с некоторыми изменениями... поскольку, я столкнулся с проблемой использования класса, то вполне вероятно такое же с attribute style? поэтому будем использовать опять атрибут .

    Проверяем какое значение в данном атрибуте в полученном втором теге:

    if ( openclose.dataset.display != 'block' )

    В зависимости от выполнения или не выполнения данного условия отправляем либо "block" либо "none". Про стили.

    Если мы соберем весь описанный выше код, то получим вот(скачать можно будет по ссылке - но это еще не все...):

    Если ты, мой просвещенный друг, заметил, то вместо слов(в приведенном примере "Показать еще и Скрыть") у нас присутствует какой то... "key и key_value" смотри рядом с innerHTML. Рассмотрим это в следующем пункте...

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Алгоритм работы блока ‘DW: HIDE & SHOW‘


    Чтобы открытый блок не закрывался.

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

    data-click ="no_close" См. пример в этом пункте.


  5. Текст и заменяемый текст.

    Если вы обратили внимание, то во всех случаях текст меняется на свой...

    Это довольно просто... каждую строку не буду объяснять... в двух словах:

    У нас будет массив с ключом и значением!

    Главное условие!

    И ключи и значения должны быть уникальными, т.е. не повторяться! Иначе будет происходить ошибка. Вы можете написать сколько угодно много ключей и значений...

    Далее скрипт проверяет, какой текст в блоке по которому вы нажали(Показать еще) и ищет этот ключ и заменяет его на значение(Скрыть). И это значение передается в блок, по которому нажали? см. выше пункт с innerHTML

    При втором клике, когда надо закрыть блок - ранее уже из предыдущего массива ключей и значений создался новый массив(expand_hide_open_text), в котором были поменяны местами ключи и значения. И теперь, поскольку у нас в блоке, по которому мы нажали текст - "Скрыть", то естественно, что в первом массиве этого слова нет, см ключи в массиве "hide_open_text", но когда вы перевернули массив, то значение перекочевало в ключи и теперь слово "Скрыть" в ключе и вот теперь этот ключ меняем на значение "Показать еще"

    var hide_open_text = {

    'показать': 'скрыть' ,

    'Показать еще :': 'Скрыть :' ,

    'Показать еще': 'Скрыть'

    };

    if (hide_open_text[isclick.target.innerHTML])

    {

    var key = isclick.target.innerHTML;

    var key_value = hide_open_text[isclick.target.innerHTML];

    }


    const expand_hide_open_text = {}

    Object.entries(hide_open_text).forEach(([key, value]) => {

    expand_hide_open_text[value] = key

    })

    if (expand_hide_open_text[isclick.target.innerHTML])

    {

    var key = isclick.target.innerHTML;

    var key_value = expand_hide_open_text[isclick.target.innerHTML];

    }


  6. А если требуется закрыть предыдущий открытый?

    Выше был приведен пример, когда требуется именно такое решение с заменой текста!

    Но рано или поздно, при строительстве сайта вы встретите проблему повторяющихся элементов!

    И вот... мне в какой-то момент надоело в очередной раз искать где же этот скрипт, писать заново или переписывать скрипт.

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

    Здесь мы видим два повторяющихся элемента, один открывается при нажатии на три точки.

    А если требуется закрыть предыдущий открытый?

    Алгоритм работы скрипта.

    Если интересно, то пару слов об алгоритме...

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

    И в условиях добавлена проверка этой переменной(no_close)

    И иначе(последняя else) - закрытие открытого окна, если такое есть...

    DW-Блок "HIDE & SHOW"

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

    И второй скрипт, пример работы данного скрипта вы сможете посмотреть ниже!

    Состав архива DW-Блок "HIDE & SHOW"

    В архиве будут два файла.

    Html файл со стилями.

    И файл скрита DW "HIDE & SHOW".


    ...

    здесь информация текст и тд...

    ...

    здесь информация текст и тд...

    ...



  7. Возврат измененного текста (и замена текста).

    Иногда требуется в кнопке, либо в любом любом другом "элементе Doma-a" написать какой-то текст, например : "Показать."

    Естественно, что после нажатия, чтобы видеть, что вы нажали на эту кнопку... заменить надпись, например на "скрыть".

    И при нажатии на любую часть или на эту же кнопку... возвращался первоначальный текст.

    Добавили выше описанные действия в скрипт :

    Протестировать можно здесь :

    Открывающиеся блоки :
    Содержимое 1
    Содержимое 2
    Содержимое 3
    Пример добавлен в архив.

    Чтобы ранее приведенные примеры не перепутывались, этот пример выделен в отдельную страницу:

    replase_word.html

    Как добавить свои слова к замене и возврату?

    Открываем файл "dw_hide_show.js" - ищем массив. Где построчно записан ключ : значение. И добавляем свой ключ(заменяемое слово) и значение (на, что будем менять...)!

    И!

    Обращаю ваше внимание, что в массиве последняя строчка без запятой!

    Внимание!

    Ключи, как и значения должны быть уникальными! Поскольку массив переворачивается, то при "НЕУНИКАЛЬНЫХ" значениях, массив поломается и скрипт будет работать не так, как задумывался!

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!replace

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Название скрипта :DW - Блок: HIDE & SHOW
Ссылка на скачивание : Все скрипты на одной странице
Теги :

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.