Текущее время: 28 мар 2024, 12:36


Форум временно переведен в режим "Только для чтения". По вопросам технической поддержки, обращайтесь, пожалуйста на admin@getbb.ru

 

Часовой пояс: UTC + 3 часа [ Летнее время ]




Начать новую тему Ответить на тему  [ Сообщений: 4 ] 
Автор Сообщение
 Заголовок сообщения: Spoiler для блока (в т.ч. и блоков главн.стр.портала)
СообщениеДобавлено: 30 июн 2013, 00:42 
Универсальный Гений
Аватара пользователя

Зарегистрирован: 03 мар 2008, 21:49
Сообщений: 891
Откуда: 07700, Украина, Киевская обл., г.Яготин.
Очков репутации: 51

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
Например у Вас есть блок такого вида:
Код:
<!-- Блок -->
<table class="tablebg" cellspacing="0" width="100%">
                <tr>
<th style="text-align:left; border: 1px solid #ADBAC6; padding-left:5px;"><span style="float:left"><img src="./styles/subsilver2/theme/images/portal/portal_menu.png" alt="" height="16px" width="16px"/> Название блока</span></th>
                </tr>
                <tr class="row1">
                <td style="padding: 8px; padding-left:5px; border: 1px solid #ADBAC6;">
                <center>
.......какой то код, текст, рисунок.....
                </center>
                </td>
                </tr>
                </table>
<!-- Блок -->

Нам нужно сделать с него Spoiler. И тут загвоздка в том, что в шапке блока идет рисунок в виде иконки, название блока и снова рисуночек в виде "+" и "-" и заливку шапки блока хотелось бы другую применить.. :roll: Доолгоо экспериментировал, часа 10. Но все же получилось. Довел код до ума. :pardon:
Привожу на своем примере. Напоминаю блок может быть не обязательно на самом портале, а где завгодно, так же как и в любом шаблоне. Ну я приведу на примере ./portal/portal_body.html
Заходим в админку-стили-компоненты стилей-шаблоны-Выбранный шаблон: subsilver2- ./portal/portal_body.html
Ищем в нем, как я писал выше текст:
Код:
                <table class="tablebg" cellspacing="0" width="100%">
                <tr>
                <th style="text-align:left; border: 1px solid #ADBAC6; padding-left:5px;"><span style="float:left"><img src="./styles/subsilver2/theme/images/portal/portal_menu.png" alt="" height="16px" width="16px"/> Меню</span></th>
                </tr>

Перед ним вставить:
Текст:
Код:
<!-- Меню  -->
<!-- 29.06.2013 Начало. Для спойлера меню -->
   <div id="menu_h" style="display: none;">
   <div style="height: 27px; text-align:left; border: 1px solid #ADBAC6; padding-left: 6px;"><div class="thh"><h4><span style="float:left"><img style="padding-top: 6px; padding-left: 10px;" src="./styles/subsilver2/theme/images/portal/portal_menu.png" alt="" height="16px" width="16px"/> Меню</span></h4><img style="padding-top: 9px; padding-right: 6px; float: right; cursor: pointer;" src="http://forum.iboards.ru/images/ranks/yagotin_1bbs_info/icon_maximize.gif" onclick="ShowHide('menu_nh', 'menu_h', 'menu');" alt="Меню" /></div>
   <table class="tablebg" width="100%" cellpadding="0" cellspacing="0" style="margin-top: 0px; display:none;">
   <tr><td class="row1"><span class="gensmall">&nbsp;</span></td></tr>
   </table>
   <div class="thh">&nbsp;</div></div>
   </div>

   <div id="menu_nh">
   <script type="text/javascript">
   <!--
   tmp = 'menu';
   if(GetCookie(tmp) == '2')
   {
      ShowHide('menu_nh', 'menu_h', 'menu_nh');
   }
   //-->
   </script>
   <div><div class="tht" style="height: 27px; text-align:left; border: 1px solid #ADBAC6; padding-left: 6px;"><h4><span style="float:left"><img style="padding-top: 6px; padding-left: 6px;" src="./styles/subsilver2/theme/images/portal/portal_menu.png" alt="" height="16px" width="16px"/> Меню</span></h4><img style="padding-top: 9px; padding-right: 6px; float: right; cursor: pointer;" src="http://forum.iboards.ru/images/ranks/yagotin_1bbs_info/icon_minimize.gif" onclick="ShowHide('menu_nh', 'menu_h', 'menu');" alt="Меню" /></div>
<!-- 29.06.2013 Конец. Для спойлера меню --> 

В конце ищем:
Код:
</td></tr></table>

и после вставляем:
Код:
<!-- 29.06.2013 Начало. Для спойлера меню -->
<div class="th">&nbsp;</div></div>
</div>
<!-- 29.06.2013 Конец. Для спойлера меню -->
<!-- Меню  -->


А сам
Код:
                <tr>
                <th style="text-align:left; border: 1px solid #ADBAC6; padding-left:5px;"><span style="float:left"><img src="./styles/subsilver2/theme/images/portal/portal_menu.png" alt="" height="16px" width="16px"/> Меню</span></th>
                </tr>
- удалить.
В админке-Стили-Компоненты стилей-Темы-Выбранная тема: subsilver2 добавить такие классы:
Код:
/* 29.06.2013 г. Шапка блоков на странице портала. Начало. */
.thh {
   background: url('http://forum.iboards.ru/images/ranks/yagotin_1bbs_info/Siniy2.gif') bottom left repeat-x;
   height: 29px;
   font-weight: bold;
   font-size: 1.1em;
   vertical-align: middle;
   margin: -2px 0px -2px -6px;
        padding: 1px;
        white-space: nowrap;
   overflow: hidden;
}
.tht {
   background: url('http://forum.iboards.ru/images/ranks/yagotin_1bbs_info/Siniy2.gif') bottom left repeat-x;
   height: 29px;
   font-weight: bold;
   font-size: 1.1em;
   vertical-align: middle;
   margin: 0;
        padding: 0px;
   white-space: nowrap;
   overflow: hidden;
}
/* 29.06.2013 г. Шапка блоков на странице портала. Конец. */

Если не делали ранее spoiler блока, то далее проделываем все, что будет писано ниже.
В администраторском разделе->Стили->Компоненты стилей->Шаблоны-> в overall_header.html в самый конец добавляем строку:
Код:
<!-- 21.06.2013. Джава скрипт, который подгружается из файла для активации спойлера, зависание куки - запоминание свертываемости-развертываемости и т.д. -->
<script src="http://forum.iboards.ru/images/ranks/yagotin_1bbs_info/scripts.js" type="text/javascript"></script>

Сам текст scripts.js скрипта даю ниже, его можно сохранить в блокнотике и залить через "Картинки и логотипы":
Текст:
Код:
var PreloadFlag = false;
var expDays = 90;
var exp = new Date();
var tmp = '';
var tmp_counter = 0;
var tmp_open = 0;

exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function SetCookie(name, value)
{
   var argv = SetCookie.arguments;
   var argc = SetCookie.arguments.length;
   var expires = (argc > 2) ? argv[2] : null;
   var path = (argc > 3) ? argv[3] : null;
   var domain = (argc > 4) ? argv[4] : null;
   var secure = (argc > 5) ? argv[5] : false;
   document.cookie = name + "=" + escape(value) +
      ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
      ((path == null) ? "" : ("; path=" + path)) +
      ((domain == null) ? "" : ("; domain=" + domain)) +
      ((secure == true) ? "; secure" : "");
}

function getCookieVal(offset)
{
   var endstr = document.cookie.indexOf(";",offset);
   if (endstr == -1)
   {
      endstr = document.cookie.length;
   }
   return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie(name)
{
   var arg = name + "=";
   var alen = arg.length;
   var clen = document.cookie.length;
   var i = 0;
   while (i < clen)
   {
      var j = i + alen;
      if (document.cookie.substring(i, j) == arg)
      {
         return getCookieVal(j);
      }
      i = document.cookie.indexOf(" ", i) + 1;
      if (i == 0)
      {
         break;
      }
   }
   return null;
}

function ShowHide(id1, id2, id3)
{
   var res = expMenu(id1);
   if (id2 != '')
   {
      expMenu(id2);
   }
   if (id3 != '')
   {
      SetCookie(id3, res, exp);
   }
}

function expMenu(id)
{
   var itm = null;
   if (document.getElementById)
   {
      itm = document.getElementById(id);
   }
   else if (document.all)
   {
      itm = document.all[id];
   }
   else if (document.layers)
   {
      itm = document.layers[id];
   }
   if (!itm)
   {
      // do nothing
   }
   else if (itm.style)
   {
      if (itm.style.display == "none")
      {
         itm.style.display = "";
         return 1;
      }
      else
      {
         itm.style.display = "none";
         return 2;
      }
   }
   else
   {
      itm.visibility = "show";
      return 1;
   }
}

function showMenu(id)
{
   var itm = null;
   if (document.getElementById)
   {
      itm = document.getElementById(id);
   }
   else if (document.all)
   {
      itm = document.all[id];
   }
   else if (document.layers)
   {
      itm = document.layers[id];
   }
   if (!itm)
   {
      // do nothing
   }
   else if (itm.style)
   {
      if (itm.style.display == "none")
      {
         itm.style.display = "";
         return true;
      }
      else
      {
//         itm.style.display = "none";
         return true;
      }
   }
   else
   {
      itm.visibility = "show";
      return true;
   }
}

function hideMenu(id)
{
   var itm = null;
   if (document.getElementById)
   {
      itm = document.getElementById(id);
   }
   else if (document.all)
   {
      itm = document.all[id];
   }
   else if (document.layers)
   {
      itm = document.layers[id];
   }
   if (!itm)
   {
      // do nothing
   }
   else if (itm.style)
   {
      if (itm.style.display == "none")
      {
//         itm.style.display = "";
         return true;
      }
      else
      {
         itm.style.display = "none";
         return true;
      }
   }
   else
   {
      itm.visibility = "hide";
      return true;
   }
}

function IsIEMac()
{
   // Any better way to detect IEMac?
   var ua = String(navigator.userAgent).toLowerCase();
   if( document.all && ua.indexOf("mac") >= 0 )
   {
      return true;
   }
   return false;
}


function select_text(obj)
{
   var o = document.getElementById(obj)
   if( !o ) return;
   var r, s;
   if( document.selection && !IsIEMac() )
   {
      // Works on: IE5+
      // To be confirmed: IE4? / IEMac fails?
      r = document.body.createTextRange();
      r.moveToElementText(o);
      r.select();
   }
   else if( document.createRange && (document.getSelection || window.getSelection) )
   {
      // Works on: Netscape/Mozilla/Konqueror/Safari
      // To be confirmed: Konqueror/Safari use window.getSelection ?
      r = document.createRange();
      r.selectNodeContents(o);
      s = window.getSelection ? window.getSelection() : document.getSelection();
      s.removeAllRanges();
      s.addRange(r);
   }
}

Результат: :Search: :twisted:
Изображение

Изображение

_________________
Єдина Країна / Единая Страна


Не в сети
 Профиль WWW Cпасибо сказано  
 
 Заголовок сообщения: Re: Spoiler для блока (в т.ч. и блоков главн.стр.портала)
СообщениеДобавлено: 30 июн 2013, 03:14 
Универсальный Гений
Аватара пользователя

Зарегистрирован: 09 фев 2009, 15:55
Сообщений: 1732
Очков репутации: 57

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
потом будет тема
спойлер для форума

Как запихнуть весь форум в спойлер :lol:


Не в сети
 Профиль Cпасибо сказано  
 
 Заголовок сообщения: Re: Spoiler для блока (в т.ч. и блоков главн.стр.портала)
СообщениеДобавлено: 30 июн 2013, 09:57 
Универсальный Гений
Аватара пользователя

Зарегистрирован: 03 мар 2008, 21:49
Сообщений: 891
Откуда: 07700, Украина, Киевская обл., г.Яготин.
Очков репутации: 51

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
DeDGimly писал(а):
потом будет тема
спойлер для форума

Как запихнуть весь форум в спойлер :lol:

Это была последняя статья насчет Spoiler. И тем более если Вы читали все мои статьи по Spoiler'ам , то весь форум получается уже под Spoiler'ом. :wink: :ROFL: П.С. А весь форум одним махом сразу низя, так как форум состоит не из одного шаблона :--: :crazy:

_________________
Єдина Країна / Единая Страна


Не в сети
 Профиль WWW Cпасибо сказано  
 
 Заголовок сообщения: Re: Spoiler для блока (в т.ч. и блоков главн.стр.портала)
СообщениеДобавлено: 30 июн 2013, 10:05 
Гуру
Аватара пользователя

Зарегистрирован: 19 фев 2009, 09:57
Сообщений: 510
Откуда: Краснодар
Очков репутации: 37

Добавить очки репутацииУменьшить очки репутации
Пол: Мужской
Neogotlic писал(а):
DeDGimly писал(а):
А весь форум одним махом сразу низя, так как форум состоит не из одного шаблона :--: :crazy:


Очень даже можно открываем Index_body.html и в самый верх добавляем
Код:
// Подключаем jQuery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
// Закроем все спойлеры изначально
jQuery('.spoiler-body').hide()
// по клику отключаем класс closed, включаем open, затем для следующего
// элемента после блока .spoiler-head (т.е. .spoiler-body) показываем текст спойлера
jQuery('.spoiler-head').click(function(){
jQuery(this).toggleClass("closed").toggleClass("open").next().toggle()
})
})
</script>
<div  class="spoiler-wrap">
<div class="spoiler-head folded">Внимание, спойлер!</div>
<div class="spoiler-body">

Теперь в самый низ добавляем
Код:
</div>
</div>


И все весь форум под спойлер)) :lol: :ROFL:

_________________
Дизайн и оформление форумов (Уникальные скрипты и помощь в настройке шаблона)
Уникальные шаблоны для вашего форума (Надоели однотипные шаблоны скачай супер шаблоны у нас)
Бесплатный заказ шаблонов (Не нашел подходящего шаблона закажи новый оригинальный)


Не в сети
 Профиль WWW Cпасибо сказано  
 
За это сообщение пользователю Morgan "Спасибо" сказали:
Neogotlic
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 4 ] 

 

Часовой пояс: UTC + 3 часа [ Летнее время ]



 Кто сейчас на конференции

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


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

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

 
cron