Как разделить ul (li) на столбцы в шаблоне Django?

Question

У меня есть раздел ul, созданный в шаблоне Django:

<ul>
    {% for item in items %}
        <li>{{ item.name }}</li>
    {% endfor %}
</ul>

И я хочу разделить его на столбцы, содержащие, например, 10 элементов.Как мне это сделать?

Answer 1

И я хочу разделить его на столбцы, содержащие, например, 10 элементов. Как мне это сделать?

Вы имели в виду «Разделить на 10 столбцов» или «Разделить на n столбцов, содержащих не более 10 строк в каждом»? Часто лучше исправить количество столбцов (поскольку горизонтальное пространство имеет тенденцию быть ограниченным). В любом случае, вы можете сделать это с помощью пользовательского тега шаблона, например:

from django import template
from itertools import chain, izip
import math

register = template.Library()

@register.tag
def colgroup(parser, token):
    """
    Usage:: {% colgroup items into 3 cols as grouped_items %}

    <table border="0">
        {% for row in grouped_items %}
        <tr>
            {% for item in row %}
            <td>{% if item %}{{ forloop.parentloop.counter }}. {{ item }}{% endif %}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </table>

    Outputs::
    ============================================
    | 1. One   | 1. Eleven   | 1. Twenty One   |
    | 2. Two   | 2. Twelve   | 2. Twenty Two   |
    | 3. Three | 3. Thirteen | 3. Twenty Three |
    | 4. Four  | 4. Fourteen |                 |
    ============================================
    """
    class Node(template.Node):
        def __init__(self, iterable, num_cols, varname):
            self.iterable = iterable
            self.num_cols = num_cols
            self.varname = varname

        def render(self, context):
            iterable = template.Variable(self.iterable).resolve(context)
            num_cols = self.num_cols
            context[self.varname] = izip(*[chain(iterable, [None]*(num_cols-1))] * num_cols)
            return u''

    try:
        _, iterable, _, num_cols, _, _, varname = token.split_contents()
        num_cols = int(num_cols)
    except ValueError:
        raise template.TemplateSyntaxError("Invalid arguments passed to %r." % token.contents.split()[0])
    return Node(iterable, num_cols, varname)

Большая часть этого должна быть знакома, если вы знакомы с тегами пользовательских шаблонов Django .

Answer 2

Думаю, лучшее решение - использовать для этой задачи функцию столбцов css3 - она ​​будет иметь лучшую семантику и SEO-ребята будут рады:)

Современные браузеры уже могут разбивать ваши библиотеки на столбцы.

Я решил ту же проблему, как это:

.columns-x {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;

    column-gap: 20px;
    -moz-column-gap: 20px;    
    -webkit-column-gap: 20px;
}

Хорошо, а как насчет старых браузеров?Я использовал Modernizr , чтобы получить, если broser поддерживает css3-столбцы.Если это не так - я использую jquery-columnizer

Итак, вот что я делаю в своем html:

<script type='text/javascript'>
    Modernizr.load({
        test:Modernizr.csscolumns,
        yep:'{{ STATIC_URL }}_b/columns/css/columns-pure.css', // this is .columns-x - you've seen it above
        nope:[ 
             // load columnizer plugin
            '{{ STATIC_URL }}_b/columns/js/jquery.columnizer.min.js', 
            //  tell it what to do
            '{{ STATIC_URL }}_b/columns/js/columns-trick.js'
        ]
    })
</script>

И вот что я говорю columnizer дляdo (columns-trick.js):

$(document).ready(function() {
    $('.columns-x').columnize({columns: 3});
});