CTAPbIu_MABP's BLOG » layout

Демка для канадцев

CTAPbIu_MABP — Thu, 28 Oct 2010 09:01:49 +0000

Ну в общем все знают что я сейчас без работы, то есть на вольных хлебах. О том как я хлебаю я и буду рассказывать.

Вот давече нашел каких-то noname канадцев, склепал им демку, но договориться не удалось.

Собственно особенности демки: jqGrid, jsTree, Layouts. Без особой фантазии скреплено друг с другом - обычное бизнес приложение. Такие кстати на ExtJS, наверное, лучше делать. Самым примечательным является D&D между таблицей и деревом и изменение размеров аккордеона и таблицы при изменении размеров панели. Тыкайтесь :)

А ну и к случаю обновил пару статей: jqGrid, Paint, UI.Layout. И соответствующие библиотеки до последних версий.

UI.Layout

CTAPbIu_MABP — Thu, 10 Dec 2009 21:43:40 +0000

Обычно я так называю статьи в которых выкладываю собственные плагины, но сегодня не тот случай. Я буду рассказывать о плагине который написали Fabrizio Balliano и Kevin Dalman

Когда-то давно, когда только вышла первая бэтка YUI-Ext которая сейчас переросла в огромный фреймворк Ext JS, я увидел насколько красивыми могут быть лайауты ;) (кто знает как красиво перевести это слово, согласно контексту, милости прошу в каменты). Я скачал эту бэтку, сырую как подвал, открыл исходники блога Jack'a Slocum'a, потому что документации еще не было и наваял небольшой сайтик который НЕ стал моим блогом, как задумывалось, но перевернул мое отношение к javascript'y.

Работая в Инкоме, я хотел вернутся к этой красоте и простоте, но этот фреймворк идеально подходит для создания бизнес приложений с нуля и никаким боком не касался моего тогдашнего проекта - Киевстара. Раз выпало потрогать свежую версию Ext JS 2.3, когда к нам пришел проект от ГАИшников на создание веб-морды для базы данных угона. Куски того что получилось можно наблюдать тут и тут

А недавно я столкнулся с одним очень интересным дополнением к jQuery UI и как вы поняли это был jQuery UI.Layout Plug-in, который позволяет делать лайауты похожие на Ext JS. Конечно в силу молодости UI.Layout глючная и не много функциональная, но подает большие надежды. Под "не многофункциональностью" я понимаю отсутствие всяких всяких красивых плюшечек (табиков, кнопочек, менюшечек, панелек) как в Ext JS. Хотя это ведб не лайауты, а виджеты, правильно? UI.Layout интегрирована с табами (их даже можно сортировать) и аккордеоном из jQuery UI, а также есть пример создания кнопок для открывания (стрелочка) и удерживания (кнопка) блока. Это уже хорошо :)

Вот пример плагина на стандартных настройках, без какого либа дополнительного CSS, больше примеров вы сможете посмотреть на сайте плагина.

Center pane

North pane

West pane

South pane

East pane

Updated 08.07.11

К сожалению все потуги авторов зарелизить версию 1.3 тщетны :( Плагин сейчас находиться в версии 1.3RC29.15. Но не смотря на это плагин очень приятен в использовании. Он поддерживает возможность создавать неограниченного количество вложенных лайаутов, на каждую анимацию есть по два call-back'a в начале и в конце события, в следующей версии будет I18N, зачатки которой уже есть сейчас, 78 настроек (включая call-back) для каждого блока, возможность сохранения состояния в куках и многое другое.

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

YUI: extention

CTAPbIu_MABP — Mon, 11 Dec 2006 13:16:40 +0000

Автор Jack Locum предлагает верстать с помощью этой либы сайты. на самом деле это очень красиво но совершенно не удобно! сейчас я это докажу

Предположим что у нас есть localhost и у него по адресу /yui/ лежит YUI а по адресу /yui-ext/ собственно сама библиотека

Тогда создаем простой html код




...


...

В хедере мы разместим наш скрипт

Теперь представим, что мы хотим создать класическую трехполосную ленту, с шапкой и футером. в левой полосе прсто коллонка, по центру две закладки, две, а справа коллонка поделена на три части горизонтально; подвал по умолчанию отключен

для всего этого мы в body положим основной контейнер

...

а в него по очереди все блоки которые нам понадобятся


west
north
autoTabs
center2
center1
  
content1
content2
content3
  
inner1
inner2
inner3
sqldebug
gpcdebug

Теперь приспупаем писать инициализатор


        // определяем функцию которая будет стартовать наш скрипт
	Example = function(){
	        // в теле пусто 
	        return {
	            // зато она возвращает объект с одним свойством init
	            init : function(){
	               // определяем новый layout.
	               // кажждый объект BorderLayout имеет 5 свойств north west east south center
	               var layout = new YAHOO.ext.BorderLayout(document.body, {
	                    hideOnLayout: true,
	                    // говорим что north
	                    north: {
	                        // не resizable
	                        split:false,
	                        // с шириной 100
	                        initialSize: 100,
	                        // без титлбара
	                        titlebar: false
	                    },
	                    // west 
	                    west: {
	                        // resizable
	                        split:true,
	                        // появляется с размером 200
	                        initialSize: 200,
	                        // минимум при растягивании 175 
	                        minSize: 175,
	                        // максимум 400
	                        maxSize: 400,
	                        // с титл баром
	                        titlebar: true,
	                        // с кнопкой закрыть
	                        collapsible: true,
	                        // анимированный 
                            animate: true
	                    },
	                    east: {
	                        split:false,
	                        initialSize: 200,
	                        minSize: 175,
	                        maxSize: 400,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true
	                    },
	                    south: {
	                        split:true,
	                        initialSize: 100,
	                        minSize: 100,
	                        maxSize: 200,
	                        titlebar: true,
	                        collapsible: true,
                            animate: true,
	                    // с скролбаром если надо
                            autoScroll:true
	                    },
	                    center: {
	                        // закладки сверху
	                        tabPosition: 'top',
	                        autoScroll:true
	                    }
	                });
	                // начинаем создавать елементы слоя
	                layout.beginUpdate();
	                // северный (хедер)
	                layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
	                // западный с надписью в титлбаре Navigation Panel
			layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'Navigation Panel'}));
	                // перввая закладка центра
	                layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Main block', closable: false}));
	                // вторая закладка центра
	                layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
	                // по умолчанию открыта первая закладка
	                layout.getRegion('center').showPanel('center1');
	                
	                /*
	                Теперь рилическое отступление по поводу того чем неудобна эта либа
	                нельзя создать 5 блоков друг под другом можно только 3
	                но можно в каждом из трех еще по три и в каждом следующем еще по три
	                */

	                // создаем внутренний слой правого столбца
	                var innerLayout = new YAHOO.ext.BorderLayout('content1', {
	                    // нижняя часть
	                    south: {
	                        //split:true,
	                        initialSize: 100,
	                        collapsible:true,
	                        titlebar: true
	                    },
	                    // центр пуст
	                    center: { }
	                });
	                // создаем нутренний елемент внутреннего елемента 'юг'
	                var southInnerLayout  = new YAHOO.ext.BorderLayout('content2', {
	                    // только центр
	                    center: { }
	                });
	                
	                // добавляем во нутренний елемент внутреннего елемента 'юг' центральный блок
	                /*
	                вот тут былобы неплохо осознавать обектную модель 	                
	                происходящего потому что словами это обьяснять очень сложно
	                */

	                southInnerLayout.add('center', new YAHOO.ext.ContentPanel('inner1', {title:'More Information', closable:true}));

	                // создаем нутренний елемент внутреннего елемента 'центер'
	                var centerInnerLayout  = new YAHOO.ext.BorderLayout('content3', {
	                    south: {
	                        //split:true,
	                        initialSize: 100,
	                        collapsible:true,
	                        titlebar: true
	                    },
	                    center: { }
	                });
	                
	                // добавляем во нутренний елемент внутреннего елемента 'центер' центральный блок
	                centerInnerLayout.add('center', new YAHOO.ext.ContentPanel('inner2', {title:'More Information', closable:true}));
	                // добавляем во нутренний елемент внутреннего елемента 'центер' нижний блок
	                centerInnerLayout.add('south', new YAHOO.ext.ContentPanel('inner3', {title:'More Information', closable:true}));
	                // закрепляем к внутреннему елементу его 'детей' к блоку 'юг'
	                innerLayout.add('south', new YAHOO.ext.NestedLayoutPanel(southInnerLayout, {title:'More Information', closable:true}));
	                // закрепляем к внутреннему елементу его 'детей' к блоку 'центер'
	                innerLayout.add('center', new YAHOO.ext.NestedLayoutPanel(centerInnerLayout, {title:'More Information', closable:true}));

	                // закрепляем за елементов east (оноже левая коллонка) все то что мы токачто насоздавали, заголовок More Information, и кнопка закрыть
	                layout.add('east', new YAHOO.ext.NestedLayoutPanel(innerLayout, {title:'More Information', closable:true}));
	                // вот тут по вашему желанию подвал
	                if (false)
	                {
	                        // первая закладка
	                	layout.add('south', new YAHOO.ext.ContentPanel('sqldebug', {title: 'SQL-Debug', closable: true}));
	                        // и вторая
	                	layout.add('south', new YAHOO.ext.ContentPanel('gpcdebug', {title: 'GPC-Debug', closable: true}));
	                        // показываем вторую
	                	layout.getRegion('south').showPanel('gpcdebug');
	                }
	                // закрепляем елементы слоя
	                layout.endUpdate();
	           }
	     }
	       
	}();// конец функции  Example
       // стартуем Example при полной загрузке страницы 
	YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);

Теперь еще одна поправка: смотрите (кто сделал конечно) вся левая коллонка отезжает на лево, вся правая - на право.

А в правой коллонке начинаются чудеса. Вехний блок никуда не девается а вот нижнии два, каждый по очереди, отезжает вниз и могут быть закрыты, а вот кульминация, если закрыть средний блок то нижний оставшись без родителя (учим ООП) не сможет быть закрыт не имея ссылки на то откуда его надо удалить!

а и вот еще при скрытии/закрытии блока используется комманда


Example.layout.getRegion('center').hidePanel('center1');

где center и center1 координаты (id) радителей блока, также его можно и показать прилепив функцию на ссылку или кнопку


Example.layout.getRegion('center').showPanel('center1');

PS ну вот и все ребята, пример рабочий можете пробовать, писем, пожеланий, комментов и апллодисментов конечноже не надо!!!

PSS спасибо всем кто читал!!!