Javascript / CSS решение требуется для div с неизвестной шириной - PullRequest
Новая
       1

Javascript / CSS решение требуется для div с неизвестной шириной

0 голосов
/ 14 сентября 2009

Это продолжение этого поста (www.stackoverflow.com/questions/1389029/two-divs-with-unknown-width-and-dynamic-scaling).

Вот иллюстрированное требование (/www.creativesplash.net/images/2.gif). Вот что я достиг до сих пор.

При изменении размера браузера должно произойти 2 вещи:

  1. Вкладки должны перейти вниз (уже достигнуто)
  2. Предпочтения должны занимать 100% ширины + должна быть применена граница, отделяющая себя от вкладок! Вот где мне нужна ваша помощь (либо чистое решение CSS, либо решение Javascript) !!

РЕДАКТИРОВАТЬ : Прототип решения было бы здорово!

Заранее спасибо за помощь!

Взант

Ответы [ 3 ]

2 голосов
/ 14 сентября 2009

JavaScript? Пшоу, я думаю, что мы можем справиться с этим простым CSS, не так ли?

Вот подтверждение концепции. Он опирается на то, что скрывает вторую границу за содержимым вкладки, когда помещается на одной строке Завершение стилевого оформления и соответствие его выбранному вами шрифту - это упражнение для кого-то менее ленивого. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
    <title> tabs test </title>
    <style type="text/css">
        #nav { border-bottom: 1px solid silver; }
        #prefs { float: right; padding: 0.7em 0; }
        #tabs { float: left; padding: 0.5em 0; white-space: nowrap; }
        #tabs a {
            display:-moz-inline-stack; display:inline-block;
            margin-right: 0.7em; padding: 0.3em 0;
            width: 7em; text-align: center; background: silver;
        }
        #tabs a.selected {
            position: relative; z-index: 2;
            background: white; border-width: 1px; border-style: solid; border-color: black black white;
        }
        #content { clear: right; border-top: 1px solid silver; }
        #content .wrap {
            clear: left; position: relative; z-index: 1; top: -0.6em;
            background: white; border: solid black 1px;
            padding: 1em;
        }
    </style>
</head><body>
    <div id="nav">
        <a href="n1">Sample links</a> |
        <a href="n2">blah</a>
    </div>
    <div id="prefs">
        <a href="p1">Preference 1</a> | <a href="p1">Preference 2</a>
    </div>
    <div id="tabs">
        <a href="t0" class="selected">Active Tab</a>
        <a href="t1">Tab 1</a>
        <a href="t2">Tab 2</a>
        <a href="t3">Tab 3</a>
    </div>
    <div id="content"><div class="wrap">
        Lorem ipsum dolor sit amet blah blah blah.
    </div></div>
</body></html>

При этом используются встроенные блоки, чтобы остановить перенос вкладок, когда они сами по себе не помещаются на экране. Вы можете или не хотите этого, я не знаю. Если нет, измените эту строку на простой тип с плавающей точкой.

1 голос
/ 14 сентября 2009

Я не знаю только о css, но в javascript вы можете получить ширину двух ul, сравнить ее с шириной родителя и, если больше, добавить новый стиль в ваши настройки ul, установив его в 100 % ширина и добавление нижней границы.

Быстрое решение jQuery / javascript (не тестировалось ...): 

$(document).ready(function() {
    $('.ArticleTabs').foreach(function(){
        if ( ($(this).find('.Preferences').width() + $(this).find('.tabs').width()) > $(this).width() ) {
            $(this).find('.tabs').addClass('underlined_class');
        }
    });
});

Вам нужно будет добавить jQuery перед этой частью javascript. Например, из Google (если вы не размещаете его самостоятельно): 

<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
0 голосов
/ 14 сентября 2009

Проблема с границей связана с тем, что на UL есть фон. Когда LIs переносится, вы получаете также фоновый перенос.

Кажется, вы хотите что-то подобное. 

#Features_Row{
   border-bottom:1px solid #D2E0C0;
   padding-bottom:3px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...