info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 533

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 8 лет 8 месяцев 22 дня
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Скрипт открытия блоков 2

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

Посмотреть демо сего действа:

демо

Реализуется сия красивость очень просто:
В шапку сайта добавляем сам скрипт (перед </head>):

Код: Выделить всё

<script type="text/javascript">
 
function openbox(id){
    display = document.getElementById(id).style.display;
 
    if(display=='none'){
       document.getElementById(id).style.display='block';
    }else{
       document.getElementById(id).style.display='none';
    }
}
   </script>


(+, разумеется, у вас должна быть подключена библиотека)
вроде этой (подключается там же):

Код: Выделить всё

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


Затем прописываете ссылки-указатели. Если пропишите в шапке - они будут везде на сайте.
Ссылка выглядит так:

Код: Выделить всё

<a href="#" title="открыть" onclick="openbox('block1'); return false">ссылка</a>


либо, если вы используете картинку

Код: Выделить всё

<a href="#" title="открыть" onclick="openbox('block1'); return false"><img src="адрес картинки" class="info" /></a>


Блок вывода информации будет выглядеть так:

Код: Выделить всё

<div id="block1" style="display:none;">
     <a href="#" title="закрыть" onclick="openbox('block1'); return false" class="cloze">х</a>
      здесь находится информация блока
        </div>


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

Вроде бы всё... Изменяя в строке id="block1" и onclick="openbox('block1'); названия блоков (block1) - можно увеличивать количество независимых модулей.
Работает сия конструкция очень просто: скрипт открывает и закрывает блок под тэгом id, а в блок вывода введена функция "закрыт по умолчанию", т.е. display:none;. При клике на ссылку срабатывает скрипт и открывает содержимое блока под тегом id="".

Небольшая красивость. Можно ввести в <div id="block1" ... стилевой класс и сделать вывод блока информации в любое место странички и закрепить его там.
Предположим, вы используете класс focus. Тогда надо будет добавить в стилевой файл

Код: Выделить всё

.focus {
       width: 200px; /*Ширина блока */
       height: 100px; /* Высота блока */
       position: fixed; /* Фиксированное положение */
       right: 0px; /* Расстояние от правого края окна браузера */
       left: 5px; /* Расстояние от левого края окна браузера */
       top: 5px; /* Расстояние сверху */
       padding: 0px; /* Внутренний отступ текста от края */
       background: #ececec; /* Цвет фона */
       border: 1px solid #333; /* Параметры рамки */
       margin: 5px; /* Внешний отступ между блоком и остальным текстом */
       z-index: 3000; /* Поверх остальных слоёв. То есть это - 3000-ый слой */
}


а ваш блок будет выглядеть так:

Код: Выделить всё

<div id="block1" style="display:none;" class="focus">


class="cloze" в информационном блоке позволяет выводить "крестик закрытия" в правый верхний угол блока.
выглядит он так:

Код: Выделить всё

.cloze {
    float:right;
   margin-right:5px;
   margin-top:5px;
}


Удобная штука, однако. :-D

Скачать себе демо-версию:

Скачать из файлового архива сайта


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
javascript
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



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

Найти:
Перейти:  




cron

Текущее время: 14 июн 2024, 09:03

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид