jQuery, Smarty, CSS, HTML - два списка <UL>, управляемые несколькими разными способами - PullRequest
Новая
       5

jQuery, Smarty, CSS, HTML - два списка <UL>, управляемые несколькими разными способами

0 голосов
/ 16 декабря 2011

У меня следующая проблема. Таким образом, есть два списка - каждый отображает фотографии (особенности продуктов). Одна отображает каждую функцию размером менее 150 пикселей, а другая - каждую функцию размером более 150 пикселей. Теперь у нас есть три случая (в зависимости от особенностей определенного продукта): 1. Отображаются как большие, так и маленькие картинки. 2. Отображаются только маленькие картинки. 3. Отображаются только большие картинки. В первом случае картинки делятся на две колонки - слева меньше, а справа больше. Между ними также есть div (с position: absolute), который служит вертикальной границей. Я хотел бы изменить способ их отображения, когда у нас есть случай 2 или 3 - только с маленькой или большой картинкой, не должно быть этой вертикальной границы, и этот определенный UL, который видим, должен иметь ширину 100%. Каков наилучший способ достичь этого? Чистый CSS? JQuery? PHP? КСТАТИ. эти списки передаются через Smarty.

Пожалуйста, посмотрите на код:

JQuery: 

$(document).ready(function() {
    $("#idTab1Tags li").each(function() {
        var $this = $(this);
        $this.css({width: 'auto', height: 'auto'});
        var pic_real_width = $this.width();
        var pic_real_height = $this.height();
        if(pic_real_width<150){
                $(this).addClass("imgSmall");
        }
        else {
                $(this).addClass("imgBig");
        }
    });
 });

HTML / Smarty: 

{if $tags}
        <div id="idTab1Tags">
            <div id="idTab1TagsContainer">
                <ul id="tagsicons" class="tagsicons tagsSmall">
                    {foreach from=$tags item=tag}
                    <li>
                        {if $tag.link}<a href="{$tag.link}">{/if}

                        <img src="{$base_dir}modules/tagsicons/images/{$tag.id}.{$tag.extension}" onselectstart="return false;" ondragstart="return false;" alt="{$tag.tag|escape:'htmlall':'UTF-8'}" />

                        {if $tag.link}</a>{/if}


                        {if $tag.description}<span>{$tag.description}</span>{/if}
                    </li>
                    {/foreach}
                    <div class="clear"></div>
                </ul>
                <ul id="tagsicons" class="tagsicons tagsBig">
                    {foreach from=$tags item=tag}
                    <li>
                        {if $tag.link}<a href="{$tag.link}">{/if}

                        <img src="{$base_dir}modules/tagsicons/images/{$tag.id}.{$tag.extension}" onselectstart="return false;" ondragstart="return false;" alt="{$tag.tag|escape:'htmlall':'UTF-8'}" />

                        {if $tag.link}</a>{/if}


                        {if $tag.description}<span>{$tag.description}</span>{/if}
                    </li>
                    {/foreach}
                    <div class="clear"></div>
                </ul>
                <div class="clear"></div>
                <div id="idTab1TagsContainerBorder"></div>
            </div>
        </div>
    {/if}

CSS: 

ul#tagsicons {
    clear: both;
    list-style: none;
    padding-left: 0;
    width:456px;
    display:inline-block;
}
#idTab1Tags { margin:15px 0 0 0; }
ul#tagsicons li { display:inline-block; vertical-align:middle; position:relative; }
.tagsSmall { margin:0 7px 0 0; }
.tagsSmall li { margin:0 13px 13px 0; }
.tagsBig li { margin:0 0 13px; }
#idTab1TagsContainer {
    padding:0 0 0 20px;
    position:relative;
}
#idTab1TagsContainerBorder {
    position:absolute;
    background:#F5F5F5;
    width:1px;
    height:100%;
    top:0;
    left:459.5px;
}
.tagsSmall .imgBig, .tagsBig .imgSmall { display:none !important; }

Итак, граница #idTab1TagsContainerBorder, маленькие изображения внутри .tagsSmall, а большие внутри .tagsBig

Спасибо за вашу помощь.

EDIT:

Тем временем я нашел решение:

JQuery: 

var big = $( ".tagsBig li" );
var small = $( ".tagsSmall li" );
if (big.is(":visible")){ 
} else {
    $(".tagsSmall").addClass("wideSmall");
    $('#idTab1TagsContainerBorder').hide(1);    
}
if (small.is(":visible")){ 
} else {
    $(".tagsBig").addClass("wideBig");
    $('#idTab1TagsContainerBorder').hide(1);    
}

CSS: 

.wideSmall { width:100% !important; }
.wideBig { width:110% !important; }
.wideBig li { margin:margin:0 7px 13px 0 !important; }

Также ниже работает решение Serious.

1 Ответ

1 голос
/ 16 декабря 2011

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

var smallImages = [];
var bigImages = [];

$("#idTab1Tags li").each(function()
{
    var $this = $(this);

    $this.css({width: 'auto', height: 'auto'});
    var pic_real_width = $this.width();
    var pic_real_height = $this.height();
    if(pic_real_width<150)
    {
        smallImages.push($this);
        $(this).addClass("imgSmall");
    }
    else
    {
        bigImages.push($this);
        $(this).addClass("imgBig");
    }
}

if (smallImages.length == 0)
{
    $("ul .tagsSmall").hide();
}
if (bigImages.length == 0)
{
    $("ul .tagsBig").hide();
}
if (smallImages.length == 0 || bigImages.length == 0)
{
    $("#idTab1TagsContainerBorder").hide();
}
...