JQuery knihovna pro tvorbu layoutu webových aplikací

Ono vlastně „nyní“ je trochu silné slovo. Je to už pár let staré řešení. Před víc než půl rokem jsem jej mírně upravil pro aktuální verzi jQuery, očistil s tím, že jej uvolním jako opensource. Založil jsem na to projekt na http://code.google.com/p/moonjs/, vzápětí jsem na to zapomněl a nikomu o tom neřekl :). Dneska jsem si na to vzpomněl, tak o tom aspoň napíšu sem.

Takže o co jde: je to něco jako layoutovací modul z ExtJS, jenže mnohem jednodušší. Oproti ExtJS je to jednoduchoučká jednoúčelová nevtíravá knihovnička, která je psána tak, aby co nejméně ovlivňovala okolí. Ostatně podívejte se na demo a uvidíte sami.

Jak to funguje

Základem layoutu je hierarchický (binární) strom panelů. Každý panel může (ale nemusí) být rozdělen na dvě části, a to buď horizontálně nebo vertikálně. Každá z těchto částí může být zase rozdělená a tak dál až donekonečna. Chování panelů lze ovlinit několika parametry, které popíšu dále.

Zajímavou vlastností (kterou jsem u podobných řešení postrádal) je možnost kombinování šířek (výšek) panelů zadaných v pixelech a v procentech. Pokud má panel šířku zadanou v procentech, pak se při změně velikosti okna prohlížeče (nebo změně velikosti nadřazeného panelu) přepočítá skutečná šířka panelu tak, aby procenta seděla. Pokud má však šířku zadanou v pixelech, zůstává zadaná šířka přesně zachována.

Ačkoliv jsem využil knihovnu jQuery, není řešení implementováno jako jQuery plugin, ale jako klasické javascriptové konstruktory („třídy“ chcete-li) ve vlastním jmenném prostoru (moon). Považuju to za flexibilnější.

K dispozici jsou následující dva konstruktory moon.Panel a moon.PanelSplit. Způsob použití je nejlépe patrný z dema:

$(document).ready(function()
{
    // Vytvoření instance panelu:
    var panelMain = new moon.PanelSplit({
        axis: 'y',
        position: ' 10px',
        resizable: false,        
        showHandler: false,         
        firstPanel: {
            type: 'Panel',            
            sizing: 'contentHeight',             
            content: $("#header")       
        },        
        secondPanel: {            
            type: 'PanelSplit',            
            axis: 'y',              
            position: '60px',             
            masterPane: 'second',             
            handlerWidth: 15,            
            firstPanel: { … },             
            secondPanel: {                  
                type: 'Panel',                  
                content: $("#footer")          
            }        
        }  
    });
    
    // Panel připojím do dokumentu
    panelMain.outer.appendTo($('body'));    
    
    // Při resizování okna prohlížeče je nutno překreslit layout 
    $(window).bind('resize', function(){
        panelMain.redraw();
    });
    
    // Při načtení dokumentu zavoláme počáteční překreslení layoutu
    panelMain.redraw();
}

Každý konstruktor panelu má jako parametr konfigurační objekt, jehož vlastnosti ovlivňují chování a zobrazení panelu a handleru. Vlastnost type určuje typ panelu (nyní 'Panel' nebo 'PanelSplit'). Je to taková obezlička, aby se dal použít konfigurační objekt uložit jako JSON a nefigurovala v něm volání konstruktorů panelů. Možnosti konfigurace jsou následující:

Stylování panelů je 100% řízeno CSS třídami (viz CSS soubor, který je přilinkován k demu).

A to je vše. Nejedná se o nijak robustní řešení, naopak – hlavním cílem byla co nejjednodušší implementace. Jistě by se našla spousta vlastností, které by se hodily, např. perzistence stavu panelů apod. Na druhou stranu to v této podobě už nějakou dobu používám a celkem mi to vyhovuje. Funkčnost testována ve většině současných prohlížečů, od IE6 výš včetně. Licence MIT. Třeba se to někdy někomu bude hodit.

• Kód: http://code.google.com/p/moonjs/
• Demo