Seitentyp Dashboard Teil 5 (CMS)

Unser Dashboard des CMS wird heute über eine vernünftige Drag- und Dropmöglich verfügen. Damit ist es möglich, im Backend die Standard-Widgets zu definieren.

Eingesetzt wird wie im letzten Artikel bereits geschehen jQuery. Bisher habe ich <select>-Elemente benutzt. Jetzt wird wegen dem Drag & Drop auf <ul> umgestiegen. Das speichern der Positionen werden wir im Teil 6 des Seitentyp Dashboards erstellen.

Die CSS-Klasse die wir für diese Listen einsetzen heißt schlicht und einfach list. Daraus ergibt sich der folgende Ausschnitt des Templates /system/templates/controls/dashboardedit.html:

<table>
  <tr>
    <td>
      <h3 id="test">Nicht benutzt</h3>
        <ul class="list">
        {LOOP:DONTUSEDWIDGETS}
          <li style="cursor:move;">{VAR:WIDGETNAME}</li>
        {/LOOP:DONTUSEDWIDGETS}
        </ul>
    </td>
    <td>
      <h3>Versteckt</h3>
      <ul class="list">
        {LOOP:HIDDENWIDGETS}
          <li>{VAR:WIDGETNAME}</li>
        {/LOOP:HIDDENWIDGETS}
      </ul>
    </td>
  </tr>
  <tr>
    <td>
      <h3>Spalte 1</h3>
      <ul class="list">
      </ul>
    </td>
    <td>
      <h3>Spalte 2</h3>
      <ul class="list">
      </ul>
    </td>
    <td>
      <h3>Spalte 3</h3>
      <ul class="list">
      </ul>
    </td>
  </tr>
</table>
<input name="save" type="submit" value="{LANG:CHANGE}" onclick="form.action='{VAR:URL}' ; target='_self' ; return true" />

In dieser Datei werden wir heute nur noch arbeiten. Die Listen sollen aussehen wie <select>-Elemente. Leider sehen diese von Browser zu Browser und von Betriebssystem zu Betriebssystem anders aus. Ich habe das ganze über folgenden CSS-Code realisiert:

<script type="text/javascript" src="/system/js/jquery-ui-1.8.1.custom.min.js"></script>
<style type="text/css">
.list{
  border:1pxsolid #828790;
  list-style-type:none;
  padding:0;
  min-height:13pt;
  padding:1pt;
  min-width:200px;
}
.list li{
  margin:0;
  padding: 0;
  font-family:Tahoma;
  font-size:11pt;
}
</style>
<table>

Die ganze Drag- and Drop geschichte geht (nach etwas längerer Recherche) doch relativ einfach. Am Ende der Datei müssen wir einfach bei allen Listen ein sortable aktivieren. Dort wird mit connectWith angegeben, dass die Elemente auch in andere Bereich verschoben werden können. Hier habe ich einfach nochmal die gleiche Klasse angegeben, damit man die Einträge lustig hin und her schieben kann:

</table>
<input name="save" type="submit" value="{LANG:CHANGE}" onclick="form.action='{VAR:URL}' ; target='_self' ; return true" />
<script type="text/javascript">
   $('.list').sortable({connectWith: '.list'});
</script>

Das Dashboard wird noch ein Weilchen brauchen, aber es wird später eines der zentralen Elemente des Backends und sollte somit perfekt sein. Außerdem können wir uns mit einem Thema auseinandersetzen, was mich schon eine ganze Zeit reizt (ich hab auch schon dieses Buch darüber durchgearbeitet): jQuery. Im nächsten Schritt werden wir die Elemente irgendwie in die Post-Parameter bringen. Dort muss ich mir noch überlegen, wie man am geschicktesten vor geht.

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project