Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.10.2010, 18:43
Интересующийся
Отправить личное сообщение для wwwboy Посмотреть профиль Найти все сообщения от wwwboy
 
Регистрация: 12.10.2010
Сообщений: 22

Нужна помощь: Tabs на dl dt dd
Посмотрел реализацию Tabs на Ul li -http://www.linkexchanger.su/2009/99.html
Мне кажется что с семантической точки зрения данный список неверно испльзуется - задавать заголовки табов в отдельном списке - как-то некошерно

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

<dl>

  <dt>Первая закладка</dt>
  <dd><p>Содержимое первой закладки</p></dd>

  <dt>Вторая закладка</dt>
  <dd><p>Содержимое второй закладки</p></dd>

</dl>


Встает лишь вопрос создание css для реализации Tabs как на прилагаемой картинке

Кто может - подскажите реализацию css для такого табс
Изображения:
Тип файла: jpg tabPager.jpg (6.1 Кб, 17 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 16.10.2010, 21:36
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 60

wwwboy, попробуй так, сам не делал, но по идее должно сработать.
Для DL задаешь position: relativ, absolut или fixed. Для всех DT - float: left. Для всех DD - display: none и position: absolut. И координаты для позиционированных DD задаешь, чтобы они друг под другом были (стопкой лежали).
По клику в ссылке указанной в определенном DT с помощью JavaScript меняешь в соответствующем DD display на значение block.
Как вариант, можно попробовать вместо display использовать z-index и просто его зачение менять, ставя нужный слой наверх.
Ответить с цитированием
  #3 (permalink)  
Старый 16.10.2010, 22:21
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Да, помоему все верно, только position: absolute тут создаст проблему. лучше display: none; для всех кроме активного tab-sheet'а. Или z-index. Кстати, если tab-sheet'ы проименованы(имеют айдишники) то можно для полного счастья прописать dd:target{display: block;} Тогда будет работать даже с отключенным js
Ответить с цитированием
  #4 (permalink)  
Старый 17.10.2010, 00:38
Интересующийся
Отправить личное сообщение для wwwboy Посмотреть профиль Найти все сообщения от wwwboy
 
Регистрация: 12.10.2010
Сообщений: 22

Сообщение от danik.js Посмотреть сообщение
Да, помоему все верно, только position: absolute тут создаст проблему. лучше display: none; для всех кроме активного tab-sheet'а. Или z-index. Кстати, если tab-sheet'ы проименованы(имеют айдишники) то можно для полного счастья прописать dd:target{display: block;} Тогда будет работать даже с отключенным js
а что это за конструкция - dd:target
первый раз такое вижу
Ответить с цитированием
  #5 (permalink)  
Старый 17.10.2010, 00:43
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

http://htmlbook.ru/css/target
Ответить с цитированием
  #6 (permalink)  
Старый 17.10.2010, 00:45
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Что вы все так рветесь UI использовать, 5 минут не можете потратить чтобы самим эти табы написать?


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#tabs {margin: 0px auto;overflow: hidden;width: 204px;}
#tabs div {border-left: 1px solid #DDD;overflow: hidden;width: 205px;height: 22px;}
div a {display: block;float: left;width: 48px;border: 1px solid #DDD;border-left: none;text-align: center;text-decoration: none;}
div a:hover {background: #FBFBFB;}
ul {display: block;margin: 0px;padding: 0px;width: auto;height: auto;}
li {border: 1px solid #DDD;border-top: none;display: none;float: left;list-style-type: none;width: 195px;height: 50px;}
.display, .first {background: #EBFAFE;display: block;}
</style>

<script type="text/javascript">
$(function(){
	$('div a').each(function(i){
		$(this).click(function(){
			$(this).toggleClass('display').siblings().removeClass('display first');
			$('ul').each(function(){
				$(this).find('li:eq('+i+')').toggleClass('display').siblings().removeClass('display first');
			});
		});
	});
});
</script>
<div id="tabs">
	<div>
		<a class="first" href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
	</div>
	<ul>
		<li class="first">#text_tab_1</li><li>#text_tab_2</li><li>#text_tab_3</li><li>#text_tab_4</li>
	</ul>
</div>
Ответить с цитированием
  #7 (permalink)  
Старый 17.10.2010, 00:49
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

в одном проекте использовал, не помню где нашел:
$('ul.tabs').delegate('li:not(.current)', 'click', function() {
				$(this).addClass('current').siblings().removeClass('current')
				.parents('div.tab-container').find('div.box').hide().eq($(this).index()).show();
		});

В сотни(или мож тыщи) раз меньше чем ui tabs))
Ответить с цитированием
  #8 (permalink)  
Старый 17.10.2010, 10:01
Интересующийся
Отправить личное сообщение для wwwboy Посмотреть профиль Найти все сообщения от wwwboy
 
Регистрация: 12.10.2010
Сообщений: 22

Сообщение от monolithed Посмотреть сообщение
Что вы все так рветесь UI использовать, 5 минут не можете потратить чтобы самим эти табы написать?
Спасибо за работающий пример, но он семантически неверен - какое отношение div имеет к конкретному li ? - правильно они связаны только логикой разработчика при помощи js, а правильно должно быть чтобы они были и семантически связаны - добавил элемент в список, а он автоматом страницей отобразился!
Ответить с цитированием
  #9 (permalink)  
Старый 17.10.2010, 10:57
Аспирант
Отправить личное сообщение для eddin Посмотреть профиль Найти все сообщения от eddin
 
Регистрация: 11.10.2010
Сообщений: 60

Сообщение от danik.js Посмотреть сообщение
Да, помоему все верно, только position: absolute тут создаст проблему. лучше display: none; для всех кроме активного tab-sheet'а.
Согласен, но тогда содержимое "активного" DD может тоже всплыть и залезет на линию DT. Короче, либо position, либо ширину всех блоков четко контролировать... Ну еще clear есть конечно.
Ответить с цитированием
  #10 (permalink)  
Старый 17.10.2010, 10:57
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от wwwboy
Спасибо за работающий пример, но он семантически невере
Пример представлен наиболее семантично, корректно и логично чем могло бы быть (с любой стороны).

Элемент <div/> не имеет никакого отношения к <li/>, за исключением того что он является родительским для элементов <a/>, которые в свою очередь имеют прямое отношение к <li/>.

Часто встречающиеся структуры для табов и пр. меню.

1.
<div>
    <ul>
        <div>
             <a></a>
         </div>
         <li></li>
    </ul>
</div>

2.
<div>
    <ul>
         <li>
              <div>
                  <a></a>
              </div> 
         </li>
         <li>
             <ul>
                 <li></li>
             </ul>
         </li>
    </ul>
</div>



и теперь моя структура:

<div id="#">
     <div>
         <a></a> - каждый элемент 'a' соответствует элементу 'li'
     <div>
     <ul>
         <li></li>
     </ul>
</div>


Что в ней нелогичного, то разве она не прозрачней или семантически не связана?
Если вас смущает что элементы а не являются дочерними 'ul', то переместите их туда, в чем проблема?

Последний раз редактировалось monolithed, 17.10.2010 в 11:12.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
нужна помощь в JavaScript михаил Общие вопросы Javascript 26 30.10.2013 12:07
Нужна помощь, если можно Fox-WNT Общие вопросы Javascript 3 27.07.2010 11:38
Очень нужна помощь с Ext JS dcbal ExtJS 1 09.07.2010 13:15
нужна помощь Sergiy Серверные языки и технологии 2 31.03.2010 20:16
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17