Фильтры в админ-генераторе штука хорошая, но всегда думаешь куда бы их пристроить на странице. Если полей в модели больше чем 3-5 это становится проблемой. Предлагаю вашему вниманию небольшой трюк по этому поводу. Нам потребуется JQuery, любимый редактор и немного терпения:
Для начала посмотрим как выглядит DOM для блока админ-генератора:
И он же “вживую”:
Что мы хотим с этим сделать?
- Спрятать фильтры для этого и всех остальных админ-генераторов.
- Для отображения заиметь ссылку или кнопку.
- Потратить как можно меньше времени на это.
Как мы это будем делать? Для начала скачаем и подключим к проекту JQuery. Я это сделаю при помощи плагина sfJqueryReloadedPlugin. Вы же можете поступать как вам нравится.
Далее создадим ссылку, кликая на которую можно будет показать/скрыть фильтры:
jQuery(function() { // прячем/показываем фильтры var filter_show_hide = $('<a>') // создаем DOM элемент .attr('href','#') .attr('id','filter-show-hide') .html('toggle filters ∇') .css('fontWeight', 'bold') // немного стиля .css('margin', '5px') .click(function(){ $('#sf_admin_bar').toggle(); if( $("#filter-show-hide").html() == 'toggle filters ∇' ) // изменяем текст ссылки $("#filter-show-hide").html('toggle filters Δ'); else $("#filter-show-hide").html("toggle filters ∇"); return false; }); }); |
Обратите внимание на то что мы меняем html тело ссылки – дельта (свернуть) , набла (развернуть). Можно использовать картинки, стрелочки и все что вам нравится.
После этого нам остается добавить нашу кнопку-ссылку над фильтрами и скрыть фильтр по умолчанию:
jQuery(function() { // ... $('#sf_admin_bar') .before(filter_show_hide) // размещаем ссылку перед фильтром .hide(); // скрываем фильтры }); |
И добавить несколько стилей:
<style type="text/css"> #sf_admin_bar { float:none; /* чтобы блок не плавал справа - теперь он располагается над списком */ display: none; /* прячем фильтры средствами CSS - в принципе скриптом при загрузке можно и не прятать - это паранойя */ } #sf_admin_bar .sf_admin_filter form table { width: 700px; /* делаем немного пошире таблицу с фильтрами */ } </style> |
И вуаля:
Быстро, просто, не геморно. ))
Code with fun!
=) Сам давно уже думал такое сделать, а то не всегда хватает ширины страницы для данных. Но я хочу сделать чтобы справа выезжало
Ну это так, придумалось мимоходом )) Эффект и расположение можно менять по вкусу. Меня волнует ровно один вопрос – как я раньше без этого жил? )))
$(document).ready(function(){
$(‘#sf_admin_bar’).dialog({
‘title’: ‘Filter’,
position: ‘right’,
width: 400,
height: 300
});
});
используется jQuery-ui, довольно красиво вытаскивается все в модальное окно
Есть плагин – sfAdminThemejRollerPlugin кажется. Он тоже фильтры в JQueryUI dialog запихивает. Да это тоже выход. Хотя большие формы смотрятся весьма похабно. Но они и с моим методом смотрятся не лучше )