Reagáló táblázattervező

Az Oracle Content Management példaként szolgáló stíluslapot biztosít bekezdés összetevőben lévő reagáló táblázathoz, amely lehetővé teszi a soradatok halmozását mobileszközökön való megjelenítéskor.

A reagáló táblázatok a tartalom hatékony megjelenítése érdekében a képernyő méretétől függően módosítják a táblázatot. Például egy 5 oszlopos táblázat megfelelően megjeleníthető vízszintesen egy weblapon, de okostelefonon megtekintve az adatok jobban bemutathatók halmozva. Ügyeljen arra, hogy a megfelelő működéshez a reagáló táblázatoknak fejlécsorral kell rendelkezniük.

A következő előállított HTML kódban figyelje meg, hogy egy felvett data-label attribútum szerepel minden táblázatcellánál, amelynek értéke az oszlopfejléc szövegével egyezik meg.

<thead>
    <tr>
        <th scope="col">ACCOUNT</th>
        <th scope="col">DUE DATE</th>
        <th scope="col">AMOUNT</th>
        <th scope="col">MINIMUM</th>
        <th scope="col">PERIOD</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td data-label="ACCOUNT">Visa</td>
        <td data-label="DUE DATE">04/16/2020</td>
        <td data-label="AMOUNT">$3,090</td>
        <td data-label="PERIOD">03/09/2020 - 04/08/2020</td>
    </tr>

Ha ez az attribútum minden cellánál szerepel, a TD értékek egymásra halmozódnak az alábbi CSS-szabályok alkalmazásakor.

  .scs-paragraph:not(.scs-paragraph-edit) table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }

  .scs-paragraph:not(.scs-paragraph-edit) table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }

Figyelje meg, hogy az alábbi médiaszabály lekérdezi a képernyő méretét, és csak akkor lép életbe, ha a méret kisebb 767 képpontnál:

@media screen and (max-width: 767px) {

A beszúrt táblázatoknál a reagáló viselkedés engedélyezésére vonatkozó css kódpéldája a mellékelt StarterTheme alapértelmezés szerinti design.css fájljában található. A StarterTheme témából kialakított webhelyeknél a bekezdés rekeszekbe beszúrt táblázatok alapértelmezés szerint reagálók lesznek. Táblázat beszúrása:

1. Az Oracle Content Management szolgáltatásban nyisson meg egy webhelyet, és váltson Szerkesztés üzemmódba.
2. Hozzon létre új frissítést, vagy módosításra válasszon meglévő frissítést.
3. Húzzon át egy új bekezdés összetevőt az oldalra, és kattintson a táblázat kívánt beszúrási helyére, vagy kattintson egy meglévő bekezdésben a táblázat kívánt beszúrási helyére.
4. A Rich Text eszköztáron kattintson a ikonra, és adja meg a táblázat tulajdonságait. Ügyeljen arra, hogy az első sort fejlécként jelölje ki, és úgy állítsa be a táblázat szélességét, hogy hatékonyan működjön a használni kívánt legkisebb képernyőn. Ha például a webhelyet várhatóan okostelefonon tekintik meg, az alapértelmezés szerinti 767 képpontos szélesség valószínűleg még halmozva is túl nagy a teljes megjelenítéshez. Célszerű a táblázat szélességét kisebb, például 300 képpont méretűre állítani, vagy a szélességnél a 100% értéket választani.

Amikor befejezte a beállítást, térjen vissza a Megtekintés üzemmódba, és az eredmény előzetes megtekintéséhez válasszon 767 képpontnál kisebb képernyő-szélességű nézetbeállítást. Megtekintés üzemmódban kell lennie, mivel a táblázat Szerkesztés üzemmódban nem viselkedik reagálóként.

Ha reagáló táblázatokat kíván használni eltérő témából kialakított webhelyen, a StarterTheme témához tartozó design.css fájl kódját másolnia kell a használni kívánt témához tartozó design.css fájlba.

1. A StarterTheme témához tartozó design.css kódjának másolásához kattintson az Oracle Content Management oldalsó navigációs sávján a Fejlesztő elemre.
2. Kattintson az Összes téma megtekintése elemre.
3. Jelölje ki a StarterTheme témát, és kattintson a Megnyitás elemre.
4. A mappa megnyitásához kattintson a designs, majd a default elemre.
5. Jelölje ki a StarterTheme témához tartozó design.css fájlt, és kattintson a Letöltés elemre.
6. Nyissa meg a fájlt egy szövegszerkesztőben, és keresse meg a fájl An example CSS of how to render a table responsively megjegyzéssel kezdődő szakaszát.
7. Jelölje ki a kódot a következő megjegyzésig, és másolja azt.

   /**
    * An example CSS of how to render a table responsively.
    * It enables stacking of row data on mobile devices.
    * Only do this for view mode (not for edit mode).
    *
    * On each cell rendered, it adds a user-defined attribute 
    * 'data-label' with value matching the column header text.
    */
    @media screen and (max-width: 767px) {
     .scs-paragraph:not(.scs-paragraph-edit) table {
       border: 0;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table caption {
       font-size: 1.3em;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table thead {
       border: none;
       clip: rect(0 0 0 0);
       height: 1px;
       margin: -1px;
       overflow: hidden;
       padding: 0;
       position: absolute;
       width: 1px;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table tr {
       border-bottom: 3px solid #ddd;
       display: block;
       margin-bottom: .625em;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td {
       border-bottom: 1px solid #ddd;
       display: block;
       text-align: right;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td::before {
       content: attr(data-label);
       float: left;
       font-weight: bold;
     }
   
     .scs-paragraph:not(.scs-paragraph-edit) table td:last-child {
       border-bottom: 0;
     }
   }

8. Ismételje meg a lépéseket a módosítani kívánt sablonhoz tartozó design.css fájl letöltésénél, nyissa meg a sablont, és illessze be a másolt kódot a fájlba.
9. Mentse a változtatásokat, és töltse fel a módosított design.css fájlt a módosítás alatti téma új verziójaként.