OOUI/Koncepce
| OOUI |
|---|
|
OOUI je v režimu údržby. Nový kód by měl používat Codex . |
| Úvod |
| Začínáme |
| Práce s widgety |
| Související odkazy |
| v · d · u |
Určité základní myšlenky nebo podobné možnosti konfigurace sdílejí různé prvky/widgety, které spolu přímo nesouvisejí. Tato stránka dokumentuje některé z nich.
Overlays
Prvky některých widgetů jsou umístěny mimo normální tok, "on top of" (nad vším ostatním na stránce), jejich rozměry jsou omezeny pouze zobrazovací oblastí prohlížeče – například vyskakovací okno PopupButtonWidget nebo nabídka DropdownWidget .
Omezení CSS tomu však občas brání. Například:
- Pokud je widget umístěn uvnitř kontextu překrývání (jiného než kořenového), vytvořeného např. pomocí vlastnosti
z-index, není možné zobrazit vyskakovací okno "na" obsahu mimo tento kontext překrývání. - Pokud je widget umístěn uvnitř posouvatelné oblasti vytvořené pomocí vlastnosti
overflow, není možné, aby se vyskakovací okno rozšířilo mimo své rozměry.- Speciální případ: Pokud je widget umístěn uvnitř OOUI dialogu.
Abyste se tomu vyhnuli, můžete zadat "překryvnou vrstvu" (pomocí konfigurační volby $overlay), uvnitř které bude vyskakovací okno umístěno (místo aby bylo uvnitř widgetu).
Překryv je prvek DOM, který by měl být mimo postiženou oblast, aby jeho obsah mohl být umístěn požadovaným způsobem.
Ve většině případů by měl být překryvný prvek přímým potomkem prvku <body>.
(Použití samotného těla je také podporováno, ale nedoporučuje se, protože ztěžuje sledování toho, co tam vložilo vyskakovací okna.) Můžete předat true pro automatické vytvoření takového prvku pomocí OO.ui.getDefaultOverlay().
Pro prvky uvnitř dialogových oken byste měli použít vlastnost dialogu this.$overlay.
Mezi widgety a další prvky podporující možnost konfigurace $overlay patří:
- PopupButtonWidget
- LookupElement
- CapsuleMultiselectWidget
- ComboBoxInputWidget
- DropdownWidget
- FieldLayout
- FieldsetLayout
Příklad
V tomto příkladu jsou uvnitř dialogového okna umístěna dvě téměř identická vyskakovací tlačítka. Jediný rozdíl je v tom, zda se použije překrytí, či nikoli. (Další podrobnosti o standardním kódu naleznete v OOUI/Windows/Dialogs a OOUI/Widgety/Tlačítka a přepínače#Vyskakovací tlačítka.)
functionMyDialog(config){ MyDialog.super.call(this,config); } OO.inheritClass(MyDialog,OO.ui.Dialog); MyDialog.static.name='myDialog'; MyDialog.static.title='Simple dialog'; MyDialog.prototype.initialize=function(){ MyDialog.super.prototype.initialize.call(this); varpopupButton1=newOO.ui.PopupButtonWidget({ label:'Popup button (without $overlay)', popup:{ $content:$('<p>Popup contents.</p><p>Popup contents.</p><p>Popup contents.</p>'), padded:true } }), popupButton2=newOO.ui.PopupButtonWidget({ $overlay:this.$overlay, label:'Popup button (with $overlay)', popup:{ $content:$('<p>Popup contents.</p><p>Popup contents.</p><p>Popup contents.</p>'), padded:true } }), panel=newOO.ui.PanelLayout({ padded:true, expanded:false }); panel.$element.append(popupButton1.$element,popupButton2.$element); this.$body.append(panel.$element); }; MyDialog.prototype.getBodyHeight=function(){ return100; }; varwindowManager=newOO.ui.WindowManager(); $(document.body).append(windowManager.$element); windowManager.addWindows([newMyDialog()]); windowManager.openWindow('myDialog');
Vyskakovací okno prvního tlačítka nemůže přesahovat rozměry dialogu, zobrazuje se pouze jeho malá část a pro zobrazení celého obsahu je nutné rolovat. Vyskakovací okno druhého tlačítka se může a je zobrazeno plně.
