Splitter

Ke skrytí málo využívaných forem ve formuláři, nebo rozdělení stránky na dva funkční celky, je možné použít vertikální nebo horizontální oddělovač (dále jen splitter). Tento umožňuje rozdělení stránky na dva panely a jeden z nich skrývat. Výchozí nastavení zobrazení se prování ve stránce, ale při následné manipulaci se rozložení ukládá, jak do lokální uložiště prohlížeče, tak do aplikační databáze.

Struktura stránky

HTML

Jednotlivé formy jsou uloženy do struktury DIVů. V id=SplitterFrame jsou dvě části id=SplitterFrame-master a id=SplitterFrame-slave. tyto dvě části tvoří levou/pravou nebo horní/dolní část. Jednotlivá id prvků jsou volitelná, jen je třeba je správně uvést v inicializačním skriptu.

<body>
  <div style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;">
    <div id="SplitterFrame" style="border:0;">
      <div id="SplitterFrame-master" style="overflow: auto;">
        <form method="POST" name="HDOK">
        ...
        </form>
      </div>
      <div id="SplitterFrame-slave" style="overflow: auto;">
        <form method="POST" name="DokumentNahled">
        ...
        </form>
      </div>
    </div>
  </div>
</body>

SCRIPT

Inicializační skrit je nutné dát na konec stránky. Typicky na konec sekce body.

<body>
  ....
  <script>
    eso9.splitterInit({"id": "SplitterFrame",
      "params": {
        "width": "100%",
        "height": "100%",
        "resizable": true,
        "splitBarSize": 2,
        "orientation": "vertical",
        "panels": [
          {
            "size": "60%",
            "collapsible" : false 
          },
          {
            "collapsible" : true 
          }
        ]
      },
      "source": {
        "id" : "SplitterFrame-master"
      },
      "target": {
        "id" : "SplitterFrame-slave",
      },
      "static": true,
      "bigclosebutton": true
      });
  </script>
</body>

Funkci eso9.splitterInit se předávají parametry pro vytvoření splitteru formou JSON stringu. Jednotlivé parametry jsou následující:

id id hlavního divu splitteru

params JSON parametry pro vytvoření spliteru za pomoci komponenty jqxSplitter https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm#demos/jqxsplitter/defaultfunctionality.htm

width - šířka. Pro zobrazení na celou stránku „100%“ jinak velikost v px „300“ = 300px
height - výška. Pro zobrazení na celou stránku „100%“ jinak velikost v px „300“ = 300px
resizable - true/false. jestli je povoleno uživatelské zvětšování/zmenšování panelu
splitBarSize - šířka rozdělovacího pruhu v px.
touchSplitBarSize - šířka rozdělovacího pruhu v px pro mobilní zařízení.
orientation - „horizontal“/„vertical“ orientace rozdělení.
panels - definice jednotlivých panelů. jedná se o pole dvou objektů s parametry:
- size - šířka. Zádá se v procentech nebo pixelech jen u jednoho z panelů a druhý je dynamicky dopočítán
- collapsible - true/false Jestli je povoleno zvětšování a zmenšování. Std je levý/horní panel colapsible=true. Pokud je třeba nastavit skrývací pravý/dolní, tak se u prvního nastaví false a u druhého true.
- collapsed true/false zda je skrývací panel defaultně otevřený nebo zavřený.

source JSON parametry zdrojové části splitteru (levý/horní). Pokud je vyplněn V případě, že je parametr static=false, jsou veškeré url adresy v source divu jsou směrovány do target divu.

id - id divu
ajaxurl - url stránky, která se má vepsat do source divu. Používá se v případě, že nerozděluji splitterem aktivní formulář, ale mám stránku rozdělenou na dvě části a potřebuji do panelu vložit html kód. Je použito například ve stránce .ok/esoframe.htm kde jsou takto vloženy činnosti nebo navigační menu.
contextmenu - true/false povolí nebo zakáže kontextové menu IDC/HTX sestavy která je do splitteru vložena pomocí ajaxurl
enablemanageurl - true/false povolí nebo zakáže modifikaci url adres. Pokud je povoleno, každá url zobrazená v panelu se vykoná na pozadí a výsledek se zobrazí v target panelu.
enablemanageform - true/false povolí nebo zakáže modifikaci formy. Pokud je povoleno, submit formuláře v source, zobrazí výsledek v target panelu.

target JSON parametry cílové části splitteru (pravý/dolní).

id - id divu
contextmenu - true/false povolí nebo zakáže kontextové menu IDC/HTX sestavy která je do splitteru vložena pomocí ajaxurl

static - true/false určuje, jestli při inicializaci splitteru dochází k načtení obsahu panelů dle ajaxurl nebo zůstává obsah dle definice stránky.

enableSave - true/false určuje zda se ukládá nastavení panelů. V případě true se uloží nastavení a při dalším přístupu na stránku se použije toto uložené rozložení.

bigclosebutton Zobrazovat u splitteru button, který umožňuje zavření a otevření slitteru. Bez tohoto buttonu lze otevírat a zavírat splitter kliknutím na střední zvýrazněnou část splitteru, ale ta je u úzkých splitterů hůře viditelná a klikatelná.