Страница 10 из 10«128910
Модератор форума: JonMagon 
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » jQuery » TabControl (Реализация блока с вкладками на jQuery)
TabControl
AY1
Сообщений: 25
Репутация: 0

Сообщение # 136 | 20:57:39
Хорошо, вот страница с этим табом: http://doc-planet.net/news/vtoraja_mirovaja_vojna/2015-07-01-769
Код таба из заглавного сообщения этой темы.
Как сделать таб шириной 140, высотой 220?
Сообщение отредактировал AY1 - Среда, 01 Июл 2015, 20:58:08
killbit
Сообщений: 317
Репутация: 104

Сообщение # 137 | 21:11:50
Цитата AY1 ()
Как сделать таб шириной 140, высотой 220?


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

.sectiontable {
width: 100%;
background: #EFEFEF;
margin: 0 0 30px;
}
Сообщение отредактировал killbit - Среда, 01 Июл 2015, 21:12:29
AY1
Сообщений: 25
Репутация: 0

Сообщение # 138 | 21:16:45
Верно, а если нужны блоки разных размеров??
width: 100% - это сейчас в CSS стоит
Мне нужно создавать такие блоки разных размеров, как это можно реализовать?
Спасибо
killbit
Сообщений: 317
Репутация: 104

Сообщение # 139 | 21:20:23
Цитата AY1 ()
Мне нужно создавать такие блоки разных размеров, как это можно реализовать?
Спасибо

Меняйте на свое усмотрение ширину
что вам мешает задать например)
Код
width: 200px;
AY1
Сообщений: 25
Репутация: 0

Сообщение # 140 | 21:23:44
Где конкретно это задать?

В коде здесь?
<div class="sectiontable">
<ul class="tabs">

Пардон, я в сайтах не силен
killbit
Сообщений: 317
Репутация: 104

Сообщение # 141 | 21:26:05
Цитата AY1 ()
Пардон, я в сайтах не силен

вот здесь. в ксс
Код
.sectiontable {
width: 100%;
background: #EFEFEF;
margin: 0 0 30px;
}

например

Код
.sectiontable {
width: 200px;
background: #EFEFEF;
margin: 0 0 30px;
}
AY1
Сообщений: 25
Репутация: 0

Сообщение # 142 | 21:27:49
Но ведь если в CSS, то такого размера будут ВСЕ блоки?
killbit
Сообщений: 317
Репутация: 104

Сообщение # 143 | 21:29:45
если на одном сайте будет несколько табов , тогда соответственно меняйте классы и добавляйте эти классы в ксс

например
Код
<div class="sectiontable  first">


Код
<div class="sectiontable second">


Код
<div class="sectiontable third">


и в ксс

Код
.sectiontable.first {
width: 200px;
background: #EFEFEF;
margin: 0 0 30px;
}


Код
.sectiontable.second {
width: 250px;
background: #EFEFEF;
margin: 0 0 30px;
}


Код
.sectiontable.third {
width: 350px;
background: #EFEFEF;
margin: 0 0 30px;
}
Сообщение отредактировал killbit - Четверг, 02 Июл 2015, 19:01:23
AY1
Сообщений: 25
Репутация: 0

Сообщение # 144 | 21:49:51
killbit, большое спасибо, буду разбираться. Я думал можно в CSS не писать, а уже width прописывать при добавлении такого блока.
В ксс только этот блок ставить? Без ul.tabs, .tabs li и т.д.?
Спасибо
killbit
Сообщений: 317
Репутация: 104

Сообщение # 145 | 22:05:44
Цитата AY1 ()
В ксс только этот блок ставить? Без ul.tabs, .tabs li и т.д.?
Спасибо

если они уже есть то повторять не нужно.
Радужный
Сообщений: 2
Репутация: 3

Сообщение # 146 | 00:47:36
Уважаемые знатоки!
Помогите, пожалуйста!
Опробовал "вкладки", настроил все вот тут http://1221proba.ucoz.com/index/0-2
Далее скопировал весь код на нужный сайт, вот сюда http://www.uyut-nsk.ru/
Вкладки сместились вправо, одна ушла вниз.
Подскажите, как выровнять! методом тыка не могу найти причину(


Код
/* TabControl Start */  
p {padding: 7px 0;}  
.sectiontable {  
  width: 100%;  
  background: #ffffff;  
  margin: 0 0 30px;  
}  
ul.tabs {  
  height: 28px;  
  line-height: 25px;  
  list-style: none;  
  border-bottom: 1px solid #DDD;  
  background: #FFF;  
}  
.tabs li {  
  float: left;  
  display: inline;  
  margin: 0 1px -1px 0;  
  padding: 0 4px 1px;  
  color: #777;  
  cursor: pointer;  
  background: #F9F9F9;  
  border: 1px solid #E4E4E4;  
  border-bottom: 1px solid #F9F9F9;  
  position: relative;  
}  
.tabs li:hover,  
.vertical .tabs li:hover {  
  color: #030303;  
  padding: 0 4px;  
  background: #ffffff;  
  border: 1px solid #66a312;  
}  
.tabs li.current {  
  color: #444;  
  background: #ffffff;  
  padding: 0 13px 2px;  
  border: 1px solid #D4D4D4;  
  border-bottom: 1px solid #EFEFEF;  
}  
.box {  
  display: none;  
  border: 1px solid #D4D4D4;  
  border-width: 0 1px 1px;  
  background: #ffffff;  
  padding: 0 12px;  
}  
.box.visible {  
  display: block;  
}  

.section.vertical {  
  width: 440px;  
  border-left: 160px solid #FFF;  
}  
.vertical .tabs {  
  width: 160px;  
  float: left;  
  display: inline;  
  margin: 0 0 0 -160px;  
}  
.vertical .tabs li {  
  padding: 0 13px;  
  margin: 0 0 1px;  
  border: 1px solid #E4E4E4;  
  border-right: 1px solid #F9F9F9;  
  width: 132px;  
  height: 25px;  
}  
.vertical .tabs li:hover {  
  width: 131px;  
}  
.vertical .tabs li.current {  
  width: 133px;  
  color: #444;  
  background: #ffffff;  
  border: 1px solid #D4D4D4;  
  border-right: 1px solid #EFEFEF;  
  margin-right: -1px;  
}  
.vertical .box {  
  border-width: 1px;  
}  
/* TabControl End */
Сообщение отредактировал Радужный - Суббота, 29 Авг 2015, 00:48:22
akula-z
Сообщений: 203
Репутация: 43

Сообщение # 147 | 17:56:37
Уточните, пожалуйста, пункт номер 3. В шаблоне, где собираетесь использовать TabControl, перед вставляете приведенный ниже код
Перед чем надо вставлять этот код?
masterwind
Разработчик
Сообщений: 77
Репутация: 67

Сообщение # 148 | 12:11:02
Цитата akula-z ()
Перед чем надо вставлять этот код?
Нужно добавить перед тегом
Код
</body>
EMFBI
Сообщений: 1
Репутация: 0
Уровень замечаний:

Сообщение # 149 | 04:01:34
спасибо!

Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » jQuery » TabControl (Реализация блока с вкладками на jQuery)
Страница 10 из 10«128910
Поиск: