Пятница, 03.05.2024, 21:56
Скрипты для Ucoz
Карта сайта
Главная | Скрипт "Два блока в одном" - Скрипты для Ucoz



Книги для вебмастера
Новые сообщения Участники Правила форума Поиск Лента новостей
  • Страница 1 из 1
  • 1
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Скрипт "Два блока в одном" (Скрипты для Ucoz)
Скрипт "Два блока в одном"
bandjukДата: Среда, 07.12.2011, 12:37 | Сообщение # 1
Генерал-лейтенант
Группа: Администраторы
Пол:
Награды: 22
Репутация: 22
Сообщений: 615
Бог сайта и форума За дизайнерские умения За уважение народа За хорошую посещаемость на форуме за 100 постов
Замечательный скрипт! Позволяет создать 2 блока в одном! Теперь в одном блоке можно поместить в 2 раза больше информации!



Установка:

Панель управления ---> Управление дизайном ---> Таблица стилей (CSS)
в самый низ вставляем код:

Code

/* UcoZ Tab */    
  .menuBg {background:#DEE7F6 !important;}    
  .Mactive {background:#DEE7F6;line-height:20px;border-right:1px solid #88A1C2;border-left:1px solid #88A1C2;border-bottom:1px solid #88A1C2;font-size:7pt;}    
  .Mactive a:link,.Mactive a:visited,.Mactive a:hover {color:#15428B;text-decoration:none;cursor:text;}    
  .MnotActive {display:block;line-height:16px;background:#F0F3F5;border-right:1px solid #88A1C2;border-bottom:1px solid #88A1C2;font-size:7pt;}    
  .MnotActive1 {display:block;line-height:16px;background:#F0F3F5;border-left:1px solid #88A1C2;border-bottom:1px solid #88A1C2;font-size:7pt;}    
  .MnotActive a:link,.MnotActive1 a:link {display:block;width:100%;color:#515151;text-decoration:none;}    
  .MnotActive a:visited,.MnotActive1 a:visited {display:block;width:100%;color:#515151;text-decoration:none;}    
  .MnotActive a:hover,.MnotActive1 a:hover {display:block;width:100%;color:#515151;text-decoration:none;background-color:#CAD9EC;cursor:pointer; }    
  /* ---------------- */


Разбираем этот код по строчкам:
1.
.menuBg {background:#DEE7F6 !important;} - цвет окна;
2.
.Mactive {background:#DEE7F6 - цвет активной кнопки;
line-height:20px;border-right:1px solid #88A1C2; - цвет и толщина правой границы кнопок;
border-left:1px solid #88A1C2; - цвет и толщина левой границы кнопок;
border-bottom:1px solid #88A1C2; - цвет и толщина нижней границы кнопок;
font-size:7pt; - размер текста активной кнопки.
3. Оформление ссылок.

4,5.
.MnotActive {display:block;line-height:16px;background:#F0F3F5;border-right:1px solid #88A1C2;border-bottom:1px solid #88A1C2;font-size:7pt;}
.MnotActive1 {display:block;line-height:16px;background:#F0F3F5;border-left:1px solid #88A1C2;border-bottom:1px solid #88A1C2;font-size:7pt;}
тоже что и пункт 2, только для неактивного блока.

Создаём новый блок

В вверху сайта в панели администратора выбираем:

Конструктор ---> Включить конструктор ---> Добавить блок+ ---> в настройках нового блока выбираем HTML и вставляем этот код туда:

Code

<script type="text/javascript">  
  // UcoZ Tab START  
  function showmods(t) {  
  if (t){  
  document.getElementById('instMods').className='MnotActive1';  
  document.getElementById('uninstMods').className='Mactive';  
  document.getElementById('isInMo').style.display='none';  
  document.getElementById('noInMo').style.display='';  
  document.body.focus();  
  } else {  
  document.getElementById('instMods').className='Mactive';  
  document.getElementById('uninstMods').className='MnotActive';  
  document.getElementById('noInMo').style.display='none';  
  document.getElementById('isInMo').style.display='';  
  document.body.focus();  
  }  
  }  
  // UcoZ Tab END  
  </script>

<div class="xw-tl"><div class="xw-tr"><div class="xw-tcc"></div></div></div>  
  <div class="xw-ml"><div class="xw-mr"><div class="xw-mc menuBg">  
   <div style="display:none;overflow:auto;height:250px;" id="noInMo">  
  <div align="center">
  Содержание 2-го окна
  </div></div>  
   <div style="overflow:auto;height:250px;" id="isInMo">  
  <div align="center">  
   Содержание 1-го окна
   </div>  
  </div>  
   </div></div></div>  
   <div class="xw-bl"><div class="xw-br"><div class="xw-bc"><div class="xw-footer"></div></div></div></div>  
   <table border="0" cellpadding="0" cellspacing="0" width="100%">  
  <tbody>  
  <tr>  
  <td width="6%"> </td>  
  <td align="center" valign="top" width="44%"><div id="instMods" class="Mactive"><a id="instModsL" href="javascript://" onclick="showmods(0);return false;">Название 1</a></div></td>  
   <td align="center" valign="top" width="43%"><div id="uninstMods" class="MnotActive"><a id="uninstModsL" href="javascript://" onclick="showmods(1);return false;">Название 2</a></div></td>  
  <td width="7%"> </td>  
  </tr>  
  </tbody>  
  </table>


Не забудьте поменять названия блоков 1,2 на свои!

Материалы на эту же тему:

Скрипт "Описание групп в статистике форума"
Скрипт "Новый вид бокового ползунка (полосы прокрутки)"
Скрипт "Кнопка Google+ для форума Ucoz"
Индикатор символов в мини-чате Ucoz
Скрипт "Счётчик символов и слов в тексте"
Скрипт "bb-код для форума "Мигающий текст"
Скрипт "Уведомление о новом сообщении в мини-чате"
Скрипт "Раздвижной Вид материалов для форума Ucoz"
Скрипт "Новая кнопка добавить новость"
Скрипт "Красивая иконка ленты новостей RSS"
Скрипт "Иконка NEW"
Скрипт "Классные медали на форум"
 
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Скрипт "Два блока в одном" (Скрипты для Ucoz)
  • Страница 1 из 1
  • 1
Поиск:

Яндекс.Метрика
Copyright Глюк Рекордс © 2024

Создать бесплатный сайт с uCoz