YUI: extention

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

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

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


<html>
<head>
...
</head>
<body>
...
</body>
</html>

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


<link rel="stylesheet" type="text/css" href="lib/yui-ext/resources/css/yui-ext.css" /><!-- подключаем стили -->

<script type="text/javascript" src="lib/yui/utilities/utilities.js"></script><!-- yui -->
<script type="text/javascript" src="lib/yui-ext/yui-ext.js"></script><!-- yui-ext -->

<!-- добавляем собстенные стили -->

<style type="text/css">
	body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
	.ylayout-panel-north {
	    border:0px none;
	    background-color:#c3daf9;
	}
	#nav {
	}
	#autoTabs, #center1, #center2, #west {
	    padding:10px;
	}
	#north, #south{
	    font:normal 8pt arial, helvetica;
	    padding:4px;
	}
	.ylayout-panel-center p {
	    margin:5px;
	}
	#props-panel .ygrid-col-0{
	}
	#props-panel .ygrid-col-1{
	}
</style>

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

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


<div id ="container">...</div>
</code></pre>
<p>а в него по очереди все блоки которые нам понадобятся</p>
<pre><code class="html">
<div id="west" class="ylayout-inactive-content">west</div>
<div id="north" class="ylayout-inactive-content">north</div>
<div id="autoTabs" class="ylayout-inactive-content">autoTabs</div>
<div id="center2" class="ylayout-inactive-content">center2</div>
<div id="center1" class="ylayout-inactive-content">center1</div>
  
<div id="content1" class="ylayout-inactive-content">content1</div>
<div id="content2" class="ylayout-inactive-content">content2</div>
<div id="content3" class="ylayout-inactive-content">content3</div>
  
<div id="inner1" class="ylayout-inactive-content">inner1</div>
<div id="inner2" class="ylayout-inactive-content">inner2</div>
<div id="inner3" class="ylayout-inactive-content">inner3</div>
<div id="sqldebug" class="ylayout-inactive-content">sqldebug</div>
<div id="gpcdebug" class="ylayout-inactive-content">gpcdebug</div>

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


        // определяем функцию которая будет стартовать наш скрипт
	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 спасибо всем кто читал!!!