Logo: gtkWeb Project

gtkWeb
Project

Documentation

To jest nikomu niepotrzebna, całkowicie bezużyteczna, niedokończona dokumentacja projektu gtkWeb-gtkDecorator.

This is unnecessary, completely useless, unfinished documentation of the gtkWeb project.

Dies ist eine unnötige, völlig nutzlose, unvollendete Dokumentation des gtkWeb-gtkDecorator-Projekts.

Last update: version: 2.7.16

Last update: version: 2.7.0

Last update: version: 2.5

1.1
gtkWindow

To element nadrzędny dla kolejnych elementów, bez którego mogą one być wyświetlane niepoprawnie.

Węzeł: dowolny kontener blokowy

Klasa: gtkWindow

Klasy pomocnicze (warianty): fullScrn

Widget



Code 
<section class="gtkWindow NOfullScrn">
	<!--// NOfullScrn class is NOT nececairry //-->
</section>

Widget



Code 
<section class="gtkWindow fullScrn">
	<!--// fullScrn class is variant of gtkWindow //-->
</section>

1.2
gtkDialog

Tworzy tzw. wyskakujace okno dialogowe.

Węzeł: dowolny kontener blokowy

Klasa: gtkDialog

Klasy pomocnicze (warianty):

Widget

Anuluj

Dialog Title

Description

Code 
<section class="gtkWindow gtkDialog NOinnSpace NOoutSpace">
  <header class="gtkHeaderBar">
    <div class="putLeft"><a href="#cancel" class="gtkButton btnClose"><span></span> Anuluj</a></div>
    <div class="putRight"><input class="gtkButton gtkSubmit" type="submit" name="continue" value="Kontynuuj"></div>
    <div>
      <h2>Dialog Title</h2>
      <p>Description</p>
    </div>
  </header>
  <div class="outSpace">
    <label class="gtkLabel">Option 1</label>
    <label class="gtkLabel">Option 2</label>
  </div>
</section>

1.3
gtkMessageDialog

Wygodne okno wiadomości

Węzeł: dowolny kontener blokowy

Klasa: gtkMessageDialog lub gtkDialog

Klasy pomocnicze (warianty):

Widget

Message Dialog

With secondary text

OK
Code 
<section class="gtkMessageDialog">
  <p>Message Dialog</p>
  <p>With secondary text</p>
  <a href="#ok" class="gtkButton">OK</a>
</section>

Widget

Message

Message content

Code 
<section class="gtkWindow gtkDialog NOinnSpace">
  <header class="gtkHeaderBar">
	<h2>Message</h2>
  </header>
  <p>Message content</p>
  <footer>
	<a class="gtkButton btnNorm" href="#back">Back</a>
	<a class="gtkButton btnSubmit" href="#submit">Submit</a>
  </footer>
</section>

1.5
gtkAssistant

Widget używany do poinstruowania użytkownika przez wielokrokowe operacje

Węzeł: dowolny kontener blokowy treści ARTICLE, SECTION, DIV

Klasa: gtkAssistantPage

Klasy pomocnicze (warianty): left panel pomocy z lewej strony, right panel pomocy z prawej strony

Atrybuty skryptów: data-assist dla przycisku .gtkBtn, data-assistant dla panelu pomocy .gtkAssistantPage

Widget

Assistant

Assistant Page

Assistant Content

Main Content
Code 
<section class="gtkWindow NOinnSpace NOfullScrn">
  <header class="gtkHeaderBar">
    <div class="putRight">
      <a href="#help" class="gtkBtn btnHelp" data-assist="helpId"><span></span></a></div>
      <div><h2>Assistant</h2></div>
  </header>
  <section class="gtkBox NOoutSpace">
    <section class="gtkAssistantPage left NOoutSpace" data-assistant="helpId">
      <h3 class="gtkLabelCateg">Assistant Page</h3>
      <p class="gtkLabel">Assistant Content</p>
    </section>
    <section class="gtkBox">Main Content</section>
  </section>
</section>

2.1
gtkBox

Kontener do pakowania widgetów w wiersz lub kolumnę

Węzeł: dowolny kontener blokowy, zalecany DIV

Klasa: gtkBox

Klasy pomocnicze: hor, ltr dla układu poziomego (od lewej do prawej) oraz rtl (od prawej do lewej), ver, ttb dla układu pionowego (od góry do dołu) oraz btt (od dołu do góry)

Widget

Code 
<SECTION class="gtkBox hor">
  <a href="#btn1" class="gtkBtn btnBack"><span></span></a>
  <a href="#btn2" class="gtkBtn btnReload"><span></span></a>
  <a href="#btn3" class="gtkBtn btnClose"><span></span></a>
</SECTION>

Widget

Kategorie Pobierz Zastosuj
Code 
<SECTION class="gtkBox ver">
  <a href="#btn1" class="gtkButton btnBack"><span></span></a>
  <a href="#btn2" class="gtkButton btnReload"><span></span></a>
  <a href="#btn3" class="gtkButton btnClose"><span></span></a>
</SECTION>

2.2
gtkListBox*

Kontener typu lista elementów

Węzeł: dowolny kontener blokowy

Klasa: gtkListBox

Węzły pomocnicze: H3

Klasy pomocnicze: active / selected dla hiperłącza A

Węzły pomocnicze: UL LI dla kontenera treści ---

Widget

Lista elementów

Code 
<SECTION class="gtkListBox">
  <H3>Lista elementów</H3>
  <UL>
    <LI>Element</LI>
    <LI>Element</LI>
    <LI><A class="active">Element</A></LI>
    <LI><A>Element</A></LI>
    <LI><LABEL>Element</LABEL></LI>
    <LI><LABEL class="active">Element</LABEL></LI>
  </UL>
</SECTION>

Widget

Lista elementów

2.3
gtkStackSwitcher

Kontroler przełączania dla treści umieszczonych w GtkStack

Węzeł: dowolny kontener blokowy

Klasa: gtkStackSw

Węzły pomocnicze: SECTION

Klasy pomocnicze: selected dla hiperłącza A

Węzły pomocnicze: DIV dla kontenera treści SECTION

Widgety pomocnicze: gtkButton dla kontenera przełączajacego gtkStackSw

Widget

Page 1Page 2Page 3
StackSwitcher
Code 
<SECTION class="gtkWindow fullScrn innSpace txtCenter">
  <DIV class="gtkStackSw">
    <A href="#page1" class="gtkButton selected">Page 1</A>
    <A href="#page2" class="gtkButton">Page 2</A>
    <A href="#page2" class="gtkButton">Page 3</A>
  </DIV>
  <SECTION>
    <DIV id="page1"></DIV>
    <DIV id="page2"></DIV>
    <DIV id="page3"></DIV>
  </SECTION>
  StackSwitcher
</SECTION>

Widget

Switch1Switch2

Code 
<HEADER class="gtkHeaderBar">
  <DIV class="gtkStackSw">
    <A href="#sw1" class="gtkButton selected">Switch 1</A>
    <A href="#sw2" class="gtkButton">Switch 2</A>
  </DIV>
</HEADER>

2.4
gtkStackSidebar*

Automatyczny pasek boczny

Węzeł: dowolny kontener blokowy

Klasa: gtkSideBar

Węzły wymagane: UL

Węzły opcjonalne: SECTION x Pages

Klasy pomocnicze: active dla hiperłącza A

Klasy pomocnicze: putRight dla kontenera treści SECTION

Widget

SideBar
Code 
<SECTION class="gtkSideBar">
  <DIV class="sideBar">
  <UL>
    <LI>Opcja</LI>
    <LI><A href="#">Opcja</A></LI>
    <LI><A href="#" class="active">Opcja</A></LI>
    <LI>Opcja</LI>
  </UL>
  </DIV>
  <ARTICLE>SideBar in Section</ARTICLE>
</SECTION>

2.5
gtkActionBar

Pełnej szerokości pasek prezentujący kontekstowe akcje

Węzeł: dowolny kontener blokowy

Klasa: gtkActionBar

Węzły wymagane: DIV

Węzły opcjonalne: SECTION x Pages

Klasy pomocnicze: active dla hiperłącza A

Klasy pomocnicze: putRight dla kontenera treści SECTION

Widget

ActionBar

✓✗
Code 
<SECTION class="gtkActionBar">
	<!--// place for elements //-->
</SECTION>

2.6
gtkHeaderBar

To górny element każdego okna, na którym można umieścić kolejne elementy, głównie kontrolki i przyciski.

Węzeł: węzeł blokowy HEADER (lub inny blokowy bez semantyki TAG'u header: DIV)

Klasa: gtkHeaderBar

Węzły wymagane: H2 + P

Węzły pomocnicze: DIV x3

Klasy pomocnicze (warianty): putLeft / putRight dla kontenerów DIV

Widget


Code 
<HEADER class="gtkHeaderBar">
	<!--// place for next elements //-->
</HEADER>

Widget

Title

(description)


Code 
<HEADER class="gtkHeaderBar">
    <!--// place for button elements (Left / Right) //-->
  <H2>Title</H2>
  <P>Description</P>
</HEADER>

Widget

@left
@right

Title

(description)


Code 
<HEADER class="gtkHeaderBar">
  <DIV class="putLeft">@left</DIV>
  <DIV class="putRight">@right</DIV>
  <DIV>
    <H2>Title</H2>
    <P>Description</P>
  </DIV>
</HEADER>

2.7
gtkPaned

Widżet z dwoma regulowanymi panelami (podzielonymi domyślnie 50-50).

Węzeł: węzeł blokowy SECTION (lub inny blokowy: DIV, ARTICLE)

Klasa: gtkPaned innSpace

Klasy pomocnicze (warianty): horizontal / vertical dla gtkPaned

Węzły pomocnicze: DIVx3

Klasy pomocnicze (wymagane): gtkPane1 + gtkPaneGrab + gtkPane2

Widget

Pane 1
Pane 2

Code

<SECTION class="gtkPaned {horizontal|vertical} innSpace">
  <DIV class="gtkPane1">
	Pane 1
  </DIV>
  <DIV class="gtkPaneGrab"></DIV>
  <DIV class="gtkPane2">
	Pane 2
  </DIV>
</SECTION>

Widget

Pane 1
Pane 2

2.8
gtkNotebook*

Kontener z zakładkami.

Węzeł: dowolny kontener blokowy

Klasa: gtkNotebook innSpace

Węzły pomocnicze: UL + (DIVx Pages)

Klasy pomocnicze: active dla hiperłącza A

Klasy pomocnicze: left oraz right dla węzła .gtkNotebook

Widget

Notebook

Code

<SECTION class="gtkNotebook innSpace">
  <UL>
    <LI><A href="#">Strona</A></LI>
    <LI><A href="#" class="active">Strona</A></LI>
    <LI><A href="#">Strona</A></LI>
  </UL>
  <DIV>
    Notebook
  </DIV>
</SECTION>

Widget

Notebook

Widget

Notebook

3.1
gtkLabel

Widget wyświetlający małą lub średnią ilość tekstu, Widget może być etykietą kategorii lub etykietą całolinijkową

Węzeł: węzeł blokowy LABEL ( lub inny blokowy bez funkcjonalności TAG'u label'a: DIV / P)

Klasa (wariant 1): gtkLabel

Klasa (wariant 2): gtkLabelCateg

Klasy pomocnicze: autoWidth dla gtkLabel

Style pomocnicze: --width-lbls: [0-9][unit] dla gtkLabel lub kontenera (węzła nadrzędnego)

Widget

Code

<LABEL class="gtkLabelCateg">Category</LABEL>
<DIV>
  <LABEL class="gtkLabel">Label</LABEL><--// other WIDGETS //-->
</DIV>
<div><LABEL class="gtkLabel txtRight">Label w/desc
    <P>Opis do pola</P>
  </LABEL>
  <INPUT type="text" name="test" class="gtkEntry vTop" />
</DIV>
<DIV><label class="gtkLabel">Label + Entry</label>
    <--// other WIDGETS //-->
</DIV>
<LABEL class="gtkLabel autoWidth">Label > Entry
  <input type="text" name="test" class="gtkEntry putRight" />
</LABEL>
<DIV><LABEL class="gtkLabel"
  style="--width-lbls: 140px;">Label + Entry</LABEL>
    </INPUT type="text" name="test" class="gtkEntry" />
</DIV>

3.2
gtkImage

Widget wyświetlający obraz

Węzeł: węzeł blokowy FIGURE ( lub inny blokowy kontener: DIV / P)

Węzeł: węzeł obrazu IMG

Klasa: gtkImage dla znacznika FIGURE

Widget

Icon: GTK logo

Icon: GTK logo
GTK logo

Code

<figure class="gtkImage">
  <img src="http://gtkweb.gplweb.pl/gui/default/gtkWeb-logo.png" alt="Icon: Image" />
</figure>
<figure class="gtkImage">
  <img src="http://gtkweb.gplweb.pl/gui/default/gtkWeb-logo.png" alt="Icon: Image" />
  <figcaption>Image</figcaption>
</figure>

3.3
gtkInfoBar*

Zgłasza istotne wiadomości użytkownikowi - wersja rozbudowana o własne style powiadomień na bazie GTK+ InfoBar

Węzeł: węzeł blokowy SECTION / DIV

Klasa: gtkInfoBar

Węzły pomocnicze (komunikatów): węzły blokowe P / DIV

Klasy pomocnicze (komunikat-tekst): infoTx successTx alertTx errorTx

Klasy pomocnicze (komunikat-kontener): infoBx successBx alertBx errorBx

Klasy pomocnicze (komunikat-tekst jako kontener): blk dla znacznika P

Widget

InfoBar

Code

  <SECTION class="gtkInfoBar"><!--// no messages //--></SECTION>
  <--// must be in ONE line! otherwise CSS will broke //-->
  <SECTION class="gtkInfoBar">
	<p>InfoBar</p>
  </SECTION>

Widget

Info text

Success text

Alert text

Error text

Info box

Success box

Alert box
Error box

Code

<--// komunikat-tekst //-->
  <P class="infoTx">Info text</P>
  <P class="successTx">Success text</P>
  <P class="alertTx">Alert text</P>
  <P class="errorTx">Error text</P>
<--// komunikat-tekst //-->
  <P class="infoBx">Info box</P>
  <P class="successBx">Success box</P>
<--// komunikat-kontener //-->
  <DIV class="alertBx">Alert box</DIV>
  <DIV class="errorBx">Error box</DIV>

3.4
gtkStatusBar

Zgłasza wiadomości mniej ważne dla użytkownika - wersja rozbudowana o własne style powiadomień na bazie GTK+ InfoBar

Węzeł: węzeł blokowy FOOTER / DIV

Klasa: gtkStatusBar

Węzły pomocnicze (komunikatów): węzły blokowe P / DIV

Widget

InfoBar

Code

  <SECTION class="gtkStatusBar"><!--// no messages //--></SECTION>
  <--// must be in ONE line! otherwise CSS will broke //-->
  <SECTION class="gtkInfoBar">
	<p>InfoBar</p>
  </SECTION>

4.1
gtkButton

Widget emitujący sygnał kiedy kliknięty

Węzeł: elementy blokowe: A, LABEL, INPUT / BUTTON

Klasa (wariant 1): gtkFltBtn płaski, ukryty

Klasa (wariant 2): gtkBtn mały, kwadratowy - zobacz listę przycisków: 4.6 gtkMenuButton

Klasa (wariant 3): gtkButton duży, podłużny

Klasa (wariant 4 i 5): gtkButton gtkSubmit

Węzły wymagane: A / INPUT

Węzły pomocnicze: FORM

Widget

A link > ⨯ ⟨⟨ Button Send

DIV combined >


button >
interactive FORM input > button >

Code

<A href="#gtkButton" class="gtkFlatBtn" title="Zamknij">⨯</A>
<A href="#gtkButton" class="gtkBtn" title="Powrót">⟨⟨</A>
<A href="#gtkButton" class="gtkButton" title="Przycisk">Button</A>
<A href="#gtkButton" class="gtkButton gtkSubmit" title="Wyślij">Send</A>
<div class="btnsCombine">
  <a href="#prev" class="gtkBtn btnPrev" title="btnPrev"><span></span></a><
  a href="#next" class="gtkBtn btnNext" title="btnNext"><span></span></a>
</div>
<a href="#prev" class="gtkBtn btnPrev frst" title="btnPrev"><span></span></a><
a href="#next" class="gtkBtn btnNext last" title="btnNext"><span></span></a>
<FORM>
  <p>interactive FORM</p>
  <INPUT type="submit" name="gtkSbmtBtn" class="gtkButton gtkSubmit" value="Send" />
</FORM>

Keyboard Shortcuts

L
then Ctrl + C then Alt + 1

Code

<div class="gtkKeyBtn">L</div> then 
<kbd class="gtkKeyBtn spc">Ctrl</kbd> + <kbd class="gtkKeyBtn">C</kbd> then
<kbd class="spc">Alt</kbd> + <kbd>1</kbd>

4.2
gtkCheckButton

Tworzy Widget przełącznika typu Zaznacz/Odznacz

Węzeł: elementy blokowe: INPUT

Klasa: gtkCheckBtn

Atrybuty (opcjonalne): checked dla znacznika INPUT[type="checkbox"]

Węzły wymagane: INPUT + LABEL

Węzły pomocnicze: INPUT[type="hidden"]

Widget


Code

<INPUT type="hidden" id="ifA0" name="ifA" value="0">
<INPUT type="checkbox" id="ifA1" name="ifA" value="1" class="gtkCheckBtn" checked>
  <LABEL for="ifA1">Check Button</LABEL>
<INPUT type="hidden" id="ifB0" name="ifB" value="0">
<INPUT type="checkbox" id="ifB1" name="ifB" value="1" class="gtkCheckBtn">
  <LABEL for="ifB1">Check Button</LABEL>

4.3
gtkRadioButton

Wybór pomiędzy wieloma przyciskami wyboru

Węzeł: elementy blokowe: INPUT

Klasa: gtkRadioBtn

Atrybuty (opcjonalne): checked dla znacznika INPUT[type="radio"]

Węzły wymagane: INPUT + LABEL

Widget


Code

<INPUT type="radio" id="rad1" name="rad" value="1" class="gtkRadioBtn" checked>
  <LABEL for="rad1">Radio Button</LABEL><br/>
<INPUT type="radio" id="rad2" name="rad" value="2" class="gtkRadioBtn">
  <LABEL for="rad2">Radio Button</LABEL>

4.4
gtkToggleButton

Tworzy przycisk, który zachowuje swój stan

Węzeł: elementy blokowe: A lub INPUT + LABEL

Klasa: gtkToggleButton

Atrybuty (opcjonalne): toggled dla węzła głównego

Widget

Toggle Link button

Button normal Button Toggled

Code

<a href="#toggleOff" class="gtkToggleButton">Button normal</a>
<a href="#toggleON" class="gtkToggleButton toggled">Button Toggled</a>

Widget

Classic Link button

Button classic Button Toggled

Code

<a href="#toggleOff" class="gtkButton">Button classic</a>
<a href="#toggleON" class="gtkButton toggled">Button Toggled</a>

Widget

Input + Label

Code

<input type="checkbox" id="tglBox1" class="gtkToggleButton" />
<label for="tglBox1">Button (label)</label>
<input type="checkbox" id="tglBox2" class="gtkToggleButton" checked />
<label for="tglBox2">Button (checked)</label>

4.6
gtkMenuButton

Widget, który wywołuje powiązaną z JavaScript akcję

Węzeł: A lub BUTTON

Klasa: gtkBtn

Atrybuty pomocnicze: data-* wskazanie przydatnego atrybutu JS np. data-cmd dla polecenia

Węzły pomocnicze: SPAN wewnątrz węzła głównego

Klasy pomocnicze: lista poniżej

Navigation

btnReload

btnToMain

btnDirUp

btnBack

btnPrev

btnNext

btnTarget

btnFind

btnPhone

btnDropDown

btnLogin

btnLogout

Management

btnProj

btnHelp

btnAction

btnSett

btnView

btnFullScr

btnFullScr full

btnNewWin

btnClose

btnTrash

✓ btnApprove

✗ btnReject

Files

btnDownload

btnImp

btnExp

Documents

btnAnnot

btnEdit

btnParag

btnApply

btnListSp

btnClock

btnCalend

4.7
gtkSwitch*

Przełącznik typu Włącz/Wyłącz

Węzeł: tylko LABEL

Klasa: gtkSwitch

Atrybuty (opcjonalne): checked dla znacznika INPUT[type="checkbox"]

Węzły wymagane: INPUT (x2) + DIV

Węzły pomocnicze: INPUT[type="hidden"]

Klasy pomocnicze: gtkSwYesNo dla znacznika INPUT[type="checkbox"]

Widget



Code

<LABEL class="gtkSwitch">
  <INPUT type="hidden" name="elem" value="0">
  <INPUT type="checkbox" name="elem" value="1" class="gtkSwYesNo" checked><
  DIV title="« Wyłączony ⧫ Włączony »"></DIV>
</LABEL>
<LABEL class="gtkSwitch">
  <INPUT type="hidden" name="elem" value="0">
  <INPUT type="checkbox" name="elem" value="1" class="gtkSwYesNo"><
  DIV title="« Wyłączony ⧫ Włączony »"></DIV>
</LABEL>

5.1
gtkEntry

Pole tekstowe z pojedynczą linią tekstu

Węzeł: tylko INPUT

Węzły pomocnicze: tylko P

Klasa: gtkEntry

Klasy pomocnicze: error oraz errorBx dla P

Style pomocnicze: --width-ents: [0-9][unit] dla gtkEntry lub kontenera (węzła nadrzędnego)

Widget




Message

Code

<input type="text" name="entryText" class="gtkEntry" value="Entry" />
<input type="text" name="entryText" class="gtkEntry" value="Entry" style="--width-ents: 60px;" />
<input type="text" name="entryText" class="gtkEntry error" value="Entry" />
<input type="text" name="entryText" class="gtkEntry error" value="Entry" style="--width-ents: 60px;" />
  <p class="errorBx">Message</p>

5.2
gtkSpinButton

Odbiera liczbę całkowitą lub zmiennoprzecinkową od użytkownika

Węzeł: DIV

Klasa: gtkSpinButton

Atrybuty pomocnicze: data-type data-min data-max dla znacznika INPUT

Węzły wymagane: INPUT + A (x2)

Klasy pomocnicze: gtkEntry dla znacznika INPUT oraz gtkBtn dla znaczników A
upDown dla znacznika DIV z klasą gtkSpinButton

Widget

Code

<div class="gtkSpinButton">
  <input type="text" name="regl" class="gtkEntry" data-type="decim" data-min="-10" data-max="10" value="0" />
  <a href="#m" data-cmd="dec" class="gtkBtn" title="Zmniejsz"></a>
  <a href="#p" data-cmd="inc" class="gtkBtn" title="Zwiększ"></a>
</div>

7.1
gtkTreeView

Widget do wyświetlania Drzew oraz List jednocześnie

Węzeł: SECTION lub TABLE

Klasa: gtkTreeView

Węzły dla SECTION: UL LI + (A, DIV)

Węzły dla TABLE: TR + (TH, TD)

Klasy pomocnicze: asc, desc dla znacznika A

Widget

Code

<section class="gtkTreeView">
  <ul>
     <li>
	<a href="#1">Kolumna</a>
	<a href="#2">Kolumna</a>
	<a href="#3" class="desc">Kolumna</a>
     </li>
     <li>
	<div>Ikona</div>
	<div>Element</div>
	<div>Rozmiar</div>
     </li>
  <!--// next Row //-->
  </ul>
</section>

Widget

KolumnaKolumnaKolumna
IkonaElementRozmiar
IkonaElementRozmiar
ElementRozmiar
ElementRozmiar

Code

<table class="gtkTreeView">
   <tr>
	<th><a href="#1">Kolumna</a></th>
	<th><a href="#2">Kolumna</a></th>
	<th><a href="#3" class="desc">Kolumna</a></th>
   </tr>
   <tr>
	<td>Ikona</td>
	<td>Element</td>
	<td>Rozmiar</td>
   </tr>
  <!--// next Row //-->
</table>

8.1
gtkComboBox*

Widget używany po to, by wybierać z listy elementów

Węzeł: zalecany DIV

Klasa: gtkComboBox

Węzły wymagane: A + UL oraz LI > A

Węzły pomocnicze: SPAN w A

Klasy pomocnicze: gtkFlatBtn dla znacznika A oraz gtkListBox dla znacznika UL
dla głównego węzła gtkComboBox:
pullUp aby podnieść węzeł gtkListBox, by 1-szy przycisk był na wysokości etykiety ComboBox,
rndList aby zaokrąglić krawędzie węzła gtkListBox,
ttList aby dodać "dymek" dla węzła gtkListBox,

Result

ComboBox

Code

<div class="gtkComboBox">
  <a href="#gtkComboBox" class="gtkFlatBtn btnDropDwnSa">ComboBox<span></span></a>
   <ul class="gtkListBox">
    <li><a href="#gtkComboBox">Button</a></li>
    <li><a href="#gtkComboBox">Option 1</a></li>
    <li><a href="#gtkComboBox">Option 2</a></li>
  </ul>
</div>

Result

ComboBox v2.7

Code

<div class="gtkComboBox pullUp">
  <a href="#gtkComboBox" class="gtkFlatBtn btnDropDwnSa">ComboBox<span></span></a>
  <ul class="gtkListBox">
    <li><a href="#gtkComboBox">Button</a></li>
    <li><a href="#gtkComboBox">Option 1</a></li>
    <li><a href="#gtkComboBox">Option 2</a></li>
  </ul>
</div>

Result

ComboBox v2.7

Code

<div class="gtkComboBox ttList rndList">
  <a href="#gtkComboBox" class="gtkFlatBtn btnDropDwnSa">ComboBox<span></span></a>
  <ul class="gtkListBox">
    <li><a href="#gtkComboBox">Button</a></li>
    <li><a href="#gtkComboBox">Option 1</a></li>
    <li><a href="#gtkComboBox">Option 2</a></li>
  </ul>
</div>

9.1
gtkColorButton

Prosty panel wyboru koloru

Węzeł: DIV

Klasa: gtkColorPicker

Węzły zalecane: do odebrania i zapisania wybranej wartości FORM

Węzły wymagane: LABEL + DIV oraz INPUT + LABEL > DIV

Klasy pomocnicze: rndBox, sqrBox, endBox dla znacznika INPUT

Result

Code

<div class="gtkColorPicker"><label></label>
<div class="gtkColorPalette">
  <input type="radio" name="paletteColor" value="ef2929" id="color-1" class="rndBox" />
  <label style="--picker-color: #ef2929;" for="color-1">
    <div></div>
  </label>
  <input type="radio" name="paletteColor" value="fcaf3e" id="color-2" class="rndBox" />
  <label style="--picker-color: #fcaf3e;" for="color-2">
    <div></div>
  </label>
  <input type="radio" name="paletteColor" value="fce94f" id="color-3" class="rndBox" />
  <label style="--picker-color: #fce94f;" for="color-3">
    <div></div>
  </label>
  <input type="radio" name="paletteColor" value="cc0000" id="color-4" class="sqrBox" />
  <label style="--picker-color: #cc0000;" for="color-4">
    <div></div>
  </label>
  <input type="radio" name="paletteColor" value="f57900" id="color-5" class="sqrBox" />
  <label style="--picker-color: #f57900;" for="color-5">
    <div></div>
  </label>
  <input type="radio" name="paletteColor" value="edd400" id="color-6" class="sqrBox" />
  <label style="--picker-color: #edd400;" for="color-6">
    <div></div>
  </label>
  <input type="radio" name="paletteColor" value="a40000" id="color-7" class="endBox" />
  <label style="--picker-color: #a40000;" for="color-7">
    <div></div>
  </label>
  <input type="radio" name="paletteColor" value="ce5c00" id="color-8" class="endBox" />
  <label style="--picker-color: #ce5c00;" for="color-8">
    <div></div>
  </label>
  <input type="radio" name="paletteColor" value="c4a000" id="color-9" class="endBox" />
  <label style="--picker-color: #c4a000;" for="color-9">
    <div></div>
  </label>
</div>
</div>

10.1
gtkFrame

Kontener z dekoracyjną ramką i opcjonalną etykietą

Węzeł: FIELDSET

Klasa: gtkFrame

Węzły opcjonalne: LEGEND

Klasy opcjonalne: gtkFrameLabel dla węzła LEGEND

Result

 
Frame  

Code

<fieldset class="gtkFrame">

</fieldset>

<fieldset class="gtkFrame">
  <legend class="gtkFrameLabel">Frame</legend>
 
</fieldset>

A
Some Examples