هل يمكن لـ CSS التعامل مع هذا الوضع الذي يشبه الساعة الرملية؟

StackOverflow https://stackoverflow.com/questions/2096639

  •  21-09-2019
  •  | 
  •  

سؤال

أواجه صعوبة في التفكير في حل للمشكلة التالية.
اسمحوا لي أن أوضح ذلك أولاً:

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>
هل كانت مفيدة؟

المحلول

حسنًا ، من الواضح أن هذا لا يمكن حله باستخدام CSS/HTML فقط ..

لذلك ، لحلها ، استخدمت بعض CSS (مع كتلة مضمنة عبر المتصفح) وبعض 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>

.. و ال لغة البرمجة

    <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/

نصائح أخرى

قد يكون من المفيد استخدام JavaScript لموقف هذا المجمع. المكتبات مثل jQuery يمكن أن تجعلها غير مؤلمة. سيكون تحديد قواعد التفاف هذه بشكل صريح في JS أكثر وضوحًا وأسهل في الحفاظ عليه من القيام بذلك ضمنيًا مع الكثير من قواعد CSS.

اعمل ال li باستثناء الملاحة مثل display: inline-block وربما تحرك الملاحة li حتى نهاية القائمة؟

دون رؤية الكود الخاص بك ، لا أستطيع التأكد. ومع ذلك ، هل حاولت وضع العناصر الخضراء في علامات ووضع علامة عليها على أنها واضحة: كلاهما ؛؟ هذا قد ينقلهم إلى الصف الثالث رغم ذلك. إنه شيء يجب عليك الخروج.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top