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 спасибо всем кто читал!!!
Комментарии