У меня есть список ресторанных кухонь (HABTM) – когда пользователь добавляет ресторан, они выбирают из всех флажков кухонь.
Входы флажков установлены на float: left; с заполнением / полями … и т. д., и все выглядит хорошо – хорошая сетка флажков.
Вопрос / проблема: флажки отображаются в алфавитном порядке, но не так, как ожидал пользователь – они слева направо повторяются строки (как и следовало ожидать, делая их все float).
Как я могу заставить их быть в алфавитном порядке, но в вертикальных столбцах? Итак, в алфавитном порядке, вы читали «Вверху вниз», затем переходите к следующему столбцу.
Я мог бы это сделать, просто найдя w / только обычный PHP, но в CakePHP мой вызов показать флажки:
<?php echo $this->Form->input('RestaurantCuisine', array('multiple'=>'checkbox')); ?> Сложение:
JS FIDDLE HERE (html в основном не редактируется, поскольку он генерируется CakePHP – может редактировать эхо CakePHP, если необходимо), но это не может быть в скрипке)
Основываясь на комментариях, я создал надежное решение jQuery.
См .: http://jsfiddle.net/svRmL/
var $element = $('#cuisines'); var $elementWidth = $element.find(' > .checkbox').outerWidth(true), elementCount = $element.find(' > .checkbox').length, $boxes = $element.find(' > .checkbox'); /* just for debug */ $boxes.each(function(i) { $(this).find('label').html(i); }); //set resize function $(window).resize(function() { var perRow = Math.floor($element.width() / $elementWidth), i, j, $thisColumn, inc; $boxes.appendTo($element); //move elements out of columns from previous resize $('.tempColumn').remove(); //destroy old columns for (i = 0; i < perRow; i++) { $thisColumn = $('<div class="tempColumn" />').appendTo($element).css({ width: $elementWidth, float: 'left' }); inc = Math.ceil(elementCount / perRow); for (j = inc * i; j < inc * (i + 1); j++) { $boxes.eq(j).appendTo($thisColumn); } } }).resize(); //trigger resize function immediately