Seitentyp Dashboard Teil 4 (CMS)

Auch heute müssen wir mal wieder etwas am Dashboard vom eigenen CMS machen. Und zwar werden wir heute anfangen, die Seite-Bearbeiten Oberfläche des Dashboards dynamisch zu machen. Was ich mir vorstelle ist, dass man die einzelnen Widgets in die jeweiligen Bereiche (versteckt usw) ziehen kann.

Im Backend selbst setzen wir dort auch auf jQuery. Derzeit benutzen wir für die Anzeige des Dashboards das jQuery von Google, nun speichern wir es in ContentLion selbst. Und zwar könnt ihr einfach folgende Zip-Datei in den system Ordner entpacken:

http://jqueryui.com/download (alle Checkboxen auswählen und die Version 1.8.1 downloaden)

Die Datei /system/templates/controls/dashboardedit.html sieht mit dem JS-Code so aus:

<script type="text/javascript" src="/system/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/system/js/jquery-ui-1.8.1.custom.min.js"></script>
<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>
      <select name="hiddenwidgets" size="5" style="width:200px;">
        {LOOP:HIDDENWIDGETS}
          <option>{VAR:WIDGETNAME}</option>
        {/LOOP:HIDDENWIDGETS}
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <h3>Spalte 1</h3>
      <select name="column1widgets" size="5" style="width:200px;">
      </select>
    </td>
    <td>
      <h3>Spalte 2</h3>
      <select name="column2widgets" size="5" style="width:200px;">
      </select>
    </td>
    <td>
      <h3>Spalte 3</h3>
      <select name="column3widgets" size="5" style="width:200px;">
      </select>
    </td>
  </tr>
</table>
<input name="save" type="submit" value="{LANG:CHANGE}" onclick="form.action='{VAR:URL}' ; target='_self' ; return true" />
<script type="text/javascript">$('.list li').draggable(); $('.list li').click(function(event){ this.parentNode.style.backgroundColor='#ff0000'; this.left = -300; }); $('#test2').droppable(); </script>

Das ganze ist noch nicht ganz fertig. Das Drag sollte funktionieren, jedoch können wir die einzelnen Elemente noch nicht in die anderen Listen einbauen.

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