В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
dw block (12)



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

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.018166 секунд. Подробнее