OpenXE/www/pages/content/welcome_meineapps.tpl

<style>
    #app-suche {
        display: table;
        width: 320px;
        margin: 10px auto;
        text-align: center;
    }
    #app-suche .suche {
        display: table-row;
        margin: 0 auto;
    }
    #app-suche label {
        display: table-cell;
        width: 15%;
    }
    #app-suche input {
        display: table-cell;
        width: 85%;
    }
    #meineapps {
        font-family: 'Inter', 'Helvetica', 'Arial', sans-serif;
        clear: both;
        max-width: 1024px;
        margin: 0 auto;
    }
    #meineapps .app {
        float: left;
        width: 23%;
        margin: 1%;
    }
    #meineapps .app .icon {
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        width: 66px;
        max-width: 74px;
        height: 66px;
        text-align: center;
        margin: 0 auto;
        border-radius: 10px;
    }
    #meineapps .app span {
        font-size: 13px;
        display: block;
        margin: 10px auto;
        text-align: center;
        height: 28px;
        overflow: hidden;
    }
    #meineapps #keineappsgefunden {
        display: none;
        text-align: center;
        padding: 20px;
    }
</style>
<script>
    $(document).ready(function() {
        $('#suche')
            .val('')
            .on('keyup', function (e) {
            if (e.which !== 0) {
                suche($(this).val());
            }
        });
    });

    function suche(begriff) {
        $.ajax({
            url: 'index.php?module=welcome&action=meineapps&cmd=suche',
            type: 'POST',
            dataType: 'json',
            data: {val: begriff}
        })
            .done(function (data) {
                if (typeof data === 'undefined' || data === null) {
                    return;
                }
                // Apps ausblenden
                if (typeof data.ausblenden !== 'undefined' && data.ausblenden !== null) {
                    $.each(data.ausblenden, function (modulKey, v) {
                        if (modulKey !== '') $('#' + modulKey).hide();
                    });
                }
                // Apps einblenden
                if (typeof data.anzeigen !== 'undefined' && data.anzeigen !== null) {
                    $.each(data.anzeigen, function (modulKey, v) {
                        if (modulKey !== '') $('#' + modulKey).show();
                    });
                }
                // Meldung anzeigen wenn keine Apps gefunden wurden
                if (typeof data.gefunden !== 'undefined' && data.gefunden !== null) {
                    if (parseInt(data.gefunden) === 0) {
                        $('#keineappsgefunden').show();
                    } else  {
                        $('#keineappsgefunden').hide();
                    }
                }
            });
    }
</script>

<!-- gehort zu tabview -->
<div id="tabs">
  <ul>
    <li><a href="#tabs-1"><!--[TABTEXT]--></a></li>
  </ul>
<!-- ende gehort zu tabview -->

<!-- erstes tab -->
  <div id="tabs-1">
    [MESSAGE]
    <fieldset><legend>{|Meine Apps|}</legend>
      <div id="app-suche">
        <div class="suche">
          <label for="suche">{|Suche|}</label>
          <input type="text" id="suche" value="">
        </div>
      </div>
      <div id="meineapps">
        [APPLIST]
        <div id="keineappsgefunden">
          <strong>{|Keine Apps mit diesen Suchkriterien gefunden|}</strong>
        </div>
      </div>
    </fieldset>
    [TAB1NEXT]
  </div>

<!-- tab view schließen -->
</div>