CSS для панели инструментов с ползунком пользовательского интерфейса по центру между левой и правой кнопками - PullRequest
Новая
       13

CSS для панели инструментов с ползунком пользовательского интерфейса по центру между левой и правой кнопками

1 голос
/ 22 апреля 2010

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

Но теперь я хочу поместить в центр ползунок jQuery UI, который занимает все оставшееся пространство между кнопками слева и кнопками справа. У меня проблемы с поиском чистого CSS способа сделать это.

Я пробовал что-то вроде ниже, но я действительно не хочу иметь фиксированную ширину в процентах. Если слева есть только одна кнопка, а справа - одна, то я хочу, чтобы центрированный ползунок занимал полное пространство между ними, а не только 33% от полной ширины. 

.toolbar {width: 100%;}
.toolbar .toolbar-left {float: left;width: 33%;}
.toolbar .toolbar-right {float: right;width: 33%;}
.toolbar .toolbar-center {margin: 0 auto;width: 33%;}

Я использую кнопки интерфейса для своих кнопок и стиля - см. Пример . В этом примере есть панель инструментов, которая является полной шириной страницы. Представьте, что два правых набора кнопок выровнены по правому краю панели инструментов. Затем в середине пустого пространства я хочу поместить UI Slider и использовать все пространство между кнопками (за исключением некоторого отступа).

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

Решение

В случае, если это кому-нибудь поможет, вот что я придумал, чтобы сделать эту работу, основываясь на предложениях @ Ken. Обратите внимание, что он поддерживает несколько блоков toolbar-left и toolbar-right на панели инструментов, но только один toolbar-center. Я также добавил немного отступа в код, но это, вероятно, может быть обработано CSS. 

<div class="toolbar ui-helper-clearfix">
<div class="toolbar-left">Left buttons</div>
<div class="toolbar-right">Right buttons</div>
<div class="toolbar-Center">
    <div class="slider"></div>
    </div>
</div>

.toolbar .toolbar-left {float: left;}
.toolbar .toolbar-right {float: right;}
.toolbar .toolbar-center {position: relative;}

$(".toolbar").each(function() {
    var $this = $(this);
    var left = 0;
    $(".toolbar-left", $this).each(function() {
        left += $(this).outerWidth();
    });
    var width = $this.outerWidth() - left;
    $(".toolbar-right", $this).each(function() {
        width -= $(this).outerWidth();
    });
    var $center = $(".sz-toolbar-center", $this);
    width -= ($center.outerWidth() - $center.width());
    $center.width(width - 30);
    $center.css({"left": (left+15)+"px"});
});

Одна проблема, о которой следует знать, это то, что изменение размера окна браузера не пересчитывает размер панели инструментов. Поэтому убедитесь, что этот код вызывается при каждом изменении ширины панели инструментов, включая изменение размера окна браузера и т. Д.

1 Ответ

1 голос
/ 22 апреля 2010

Если вы не хотите, чтобы левая / правая части соответствовали их содержимому, вам нужно их плавать Если вы разместите их, вы не сможете получить центральный, чтобы заполнить оставшееся пространство так, как вы хотите.

Используйте JavaScript или используйте несемантический <table> элемент.

...