УНИВЕРСАЛЬНАЯ КНОПКА СКРЫТИЯ
Админу часто необходима кнопочка скрытия с запоминанием своего положения после закрытия браузера, страницы... выключения компутера и т.д
В HTML верх
<!--Универсальная кнопка скрытия -->
<style class="Sbdcf5" id="Shoxa_01">.z-Hide{display:none!important;}</style>
<script src="http://hostjs-mybb2011.narod.ru/js/HidButton_v23_09_011.js"></script>
<!--//End /Универсальная кнопка скрытия -->
Туда где нужна кнопка
<span class="Show-Hide" alt="Селектор" style="cursor:pointer;">
<span class="b-Hide">Скрыть</span>
<span class="b-Show" style="display:none">Показать</span>
</span>
Код синим жирным - размножаем до нужного количества кнопок
Например можно Скрыть:
Ваши Банеры (Сейчас они скрыты всегда - тут же, при первом заходе они будут открыты
Объявления
Сайдбары
Чат
Уведомления и Всплывающие Окна
И т.д.
.
Пояснения к Коду Кнопки: (синим жирным)
1. Селектор - Код селектора скрываемого элемента(прописывается точно так же, как и для css кодов или кодов стиля.
Пример:
Для скрытия объявление вместо Селектор вставляем #pun-announcement
Для скрытия "Активные Темы" в юзер меню, - вместо Селектор вставляем #pun-ulinks .item2
Можно скрыть сразу несколько элементов, для этого их прописываем через запятую,
К примеру скрыть одной кнопой и объявление и "Активные Темы" =>
#pun-announcement,#pun-ulinks .item2
2. Вместо надписей Скрыть и Показать - можно поставить свои картинки...
Обычно код такой:
<img src="Ccылка на картинку"/>
3. Если нужно отпозиционировать кнопку в необходимое место вставляем её в такую конструкцию:
<div style="border:red 1px solid; top:200px;margin-left:380px;position:absolute;z-index:100;">
Тут Код Вашей Кнопки ...
</div>
200 - Отступ от верхнего края экрана (*Регулируем
380 - Отступ влево от текущего положения (*Регулируем - значение может быть как положительным, - так и отрицательным
Cинее - убираем, после успешного позиционирования
Для Скрытия cобственно изготовленных элементов HTML - прописываем им id и ..
вставлем вместо селектора - #Ваше_id
Или можно прописать class - тогда вместо решетки ставим точку => .Ваш_class
УНИВЕРСАЛЬНАЯ КНОПКА СКРЫТИЯ
ДОПОЛНЕНИЯ
Поскольку частая ошибка внедрение кнопки в скрываемый элемент(дабы было поближе к элементу воздействия и нажатие), - Естественно кнопка скрывается вместе с элементом
Дабы все таки внедрять кнопу как можно ближе, а не позиционировать её из HTML верх или HTML низ
Добавочный Код Позиционирования для
"Универсальной Кнопки" при помещениии её в сам скрываемый элемент
(Актуально для Объявления;Cайдбаров и Чата)
<div class="beforThis" style="border:red 1px solid; margin-top:-20px;margin-left:380px;z-index:100;position:absolute;">
Тут Код Вашей Кнопки ...
</div>
Кнопку(вместе с обрамлением) засовываем в сам скрываемый элемент (например - Объявление... 
Хотя и это не обязательно - можно с этим обрамлением - сунуть кнопку, к примеру в HTML низ или в HTML верх,(Но обязательно ниже части скрипта, идущей в HTML верх) , скрипт(при наличии class="beforThis"), всё равно переместит её перед скрываемым Элементом
Добавка Класса class="beforThis" в обрамляющем div-блоке - Укажет скрипту на необходимость переместить кнопку и поместить её перед самим элементом скрытия
Окончательную регулировку положения осуществляем изменением выделенных цифр
-20 - Перемещение вверх от текущего положения (*Регулируем - значение может быть как положительным, - так и отрицательным
380 - Отступ влево от текущего положения (*Регулируем - значение может быть как положительным, - так и отрицательным
Cинее - убираем, после успешного позиционирования
Примечания - Для данных случаев использования обрамления с классом class="beforThis"селектор в Атрибуте alt самой кнопки должен указывать на единственный элемент, в противном случае скрипт не сможет переместить кнопку в нужное место
Пример:
Cкрыть/Показать Объявление с запоминанием Скрытия!
В HTML верх
<!--Универсальная кнопка скрытия -->
<style class="Sbdcf5" id="Shoxa_01">.z-Hide{display:none!important;}</style>
<script src="http://hostjs-mybb2011.narod.ru/js/HidButton_v23_09_011.js"></script>
<!--//End /Универсальная кнопка скрытия --><div class="beforThis" style="border:red 1px solid; margin-top:-20px;margin-left:380px;z-index:100;position:absolute;">
<span class="Show-Hide" alt="#pun-announcement" style="cursor:pointer;">
<span class="b-Hide">Скрыть Объявление</span>
<span class="b-Show" style="display:none">Показать Объявление</span>
</span></div>
Теги: Новые Скрипты
Отредактировано Deff (2011-08-27 22:18:41)
