Может ли CSS справиться с ситуацией, похожей на песочные часы? - PullRequest
Новая
       26

Может ли CSS справиться с ситуацией, похожей на песочные часы?

5 голосов
/ 19 января 2010

Мне трудно подумать над решением следующей проблемы.
Позвольте мне сначала проиллюстрировать это:

Navigation Interface - Hourglass like

Положение
У меня 26 предметов (в этом примере, в общем, число неизвестно ..), но только 12 могут быть видны одновременно .. У меня также есть некоторые элементы навигации (зеленые поля)

Фиксированная ширина фиолетовых и зеленых коробок, но высота фиолетового может варьироваться в зависимости от содержимого.

Все нормально, и я могу сделать это с помощью CSS.

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

Задача
Но теперь мне нужно, чтобы зеленые элементы были во втором ряду (или последнем, если эта концепция помогает, поскольку будет только два ряда)

Я хочу иметь возможность скрывать первые элементы X и показывать следующие элементы X, и они сами занимают свои позиции ..

Чтобы перефразировать вопрос, могу ли я расположить некоторые элементы (зеленые) таким образом, чтобы контролировать их положение, но при этом позволить им мешать потоку из их новых местоположений?

Надеюсь, это понятно. Если не спросите, и я предоставлю как можно больше информации.

Вещи, которые я пробовал, не работали

  • Перемещение зеленого элемента с отрицательным нижним полем или положительным верхним полем. Они переместятся со своего места, но другие элементы не будут занимать свою позицию.
  • Использование абсолютного положения, но затем элементы полностью удаляются из потока, и они не влияют на другие элементы, поэтому они перекрываются с другими элементами.

[ скрытые серым цветом предметы скрыты, я просто показываю их, чтобы вы знали, что они существуют .. ]

Код для начала работы 

<style type="text/css">
    ul,li{padding:0;margin:0; list-style-type:none;}
    ul{
        width:155px;
        position:relative;
        height:125px;
        border:1px solid red;
    }
    li{
        float:left;
        background-color:purple;
        margin-left:5px;
        margin-top:5px;
        width:25px;
        text-align:center;
        line-height:25px;
        color:white;
    }
    .prev{
        color:black;
        background-color:green;
    }
    .next{
        color:black;
        float:right; 
        margin-right:5px;
        background-color:green;
    }
</style>

и 

<body>
    <ul>
        <li class="prev">&lt;</li>
        <li class="next">&gt;</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
    </ul>
</body>

Ответы [ 4 ]

5 голосов
/ 20 января 2010

ОК, очевидно, это не может быть решено только с Css / Html ..

Итак, чтобы решить эту проблему, я использовал немного CSS (с inline-block crossbrowser ) и немного jQuery для перемещения навигационных кнопок, чтобы они всегда оставались в нужной точке их ..

Для справки вот решение ..

CSS 

<style type="text/css">
    ul,li{padding:0;margin:0; list-style-type:none;}
    #performances{
        width:155px;
        border:1px solid red;
        line-height:0;
        font-size:0;
    }
    #performances li{
        font-size:12px;
        background-color:purple;
        margin-left:5px;
        margin-bottom:5px;
        margin-top:5px;
        width:25px;
        text-align:center;
        line-height:25px;
        color:white;
        display:none;
        vertical-align:top;
    }
    #performances .prev{
        color:black;
        background-color:green;
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .next{
        color:black;
        background-color:green;
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .shown{
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .placeholder{visibility:hidden;}
</style>
<!--[if lte IE 7]><style>
    #performances .prev,#performances .next,#performances .shown{zoom:1;*display:inline;}
</style><![endif]-->

Javascript (jQuery) 

<script type="text/javascript">
    function resetNextPrev( ){
        $next.insertAfter('#performances li.shown:eq('+ ($perpage-1) +')');
        $prev.insertAfter('#performances li.shown:eq('+ ($perline-1) +')');
    }
    $(document).ready(function(){
        $perpage = 8;
        $perline = ($perpage+2) / 2;
        $page = 1;
        $itemcount = $('#performances li.performance').length;
        $pages = Math.ceil ( $itemcount / $perpage);
        $next = $('#performances li.next');
        $prev = $('#performances li.prev');

        $('#performances li.performance').slice(0,$perpage).addClass('shown');

        if (($pages * $perpage) > $itemcount )
                for (var i =0;i< ($pages * $perpage)-$itemcount;i++) 
                        $('<li class="performance placeholder">test</li>').appendTo('#performances');
        resetNextPrev();

        $('li.next').click(function(){
            if ($page < $pages)
                $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (++$page-1),$perpage * $page).addClass('shown');
            resetNextPrev( $perline );

        });
        $('li.prev').click(function(){
            if ($page > 1)
                $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (--$page-1),$perpage * $page).addClass('shown');
            resetNextPrev( $perline );

        });
    });
</script>

.. и HTML 

    <ul id="performances">
        <li class="prev">&lt;</li>
        <li class="next">&gt;</li>
        <li class="performance">1</li>
        <li class="performance">2</li>
        <li class="performance">3</li>
        <li class="performance">4 dfs s sf</li>
        <li class="performance">5</li>
        <li class="performance">6</li>
        <li class="performance">7</li>
        <li class="performance">8</li>
        <li class="performance">9</li>
        <li class="performance">10</li>
        <li class="performance">11</li>
        <li class="performance">12</li>
        <li class="performance">13</li>
        <li class="performance">14</li>
        <li class="performance">15</li>
        <li class="performance">16</li>
        <li class="performance">17</li>
        <li class="performance">18</li>
        <li class="performance">19</li>
    </ul>

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

Спасибо всем за руководство:)

Рабочий пример ( для тех, кто хочет увидеть его в действии ): http://www.jsfiddle.net/gaby/Ba3UT/

4 голосов
/ 19 января 2010

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

2 голосов
/ 19 января 2010

Сделать li кроме навигационных единиц как display: inline-block и, возможно, переместить навигацию li в конец списка?

1 голос
/ 19 января 2010

Не видя ваш код, я не могу быть уверен. Однако пытались ли вы поместить зеленые элементы в теги и пометить их как понятные: оба ;? Это может переместить их в 3-й ряд, хотя. Это то, что вы должны проверить.

...