Submenüs Teil 1 (CMS)

Im CMS Tutorial wurden sich von einigen Lesern Submenüs gewünscht – Heute geht der große Wunsch in Erfüllung. Jedoch gibt es am Ende des Beitrages eine kleine Hausaufgabe für euch 😉

Derzeit muss man bei den Menüs immer eine Url angeben. Da wir nun die Menü-ID übergeben müssen, funktioniert das mit der Url alleine nicht mehr. Aus diesem Grund gibt es jetzt die neue Spalte type. In ihr können (derzeit) folgende Werte stehen:

• 0: Url
• 1: Interne Seite (id aus der cms_pages)
• 2: Menü (id)

Diese Spalte wird so angelegt:

ALTER TABLE `cms_menu` ADD `type` INT( 1 ) NOT NULL ;

Natürlich muss man nun beim Erstellen eines neuen Menüeintrages den Typen mitangeben. Das machen wir über eine Combobox. In der Datei /admin/includes/menu-edit.php sieht der Teil nun so aus:

<h2>Neuen Eintrag hinzuf&uuml;gen</h2>
  <table style="width:500px;">
    <tr>
      <td>Text:</td>
      <td><input name="newtitle"  /></td>
    </tr>
    <tr>
      <td>Typ:</td>
      <td>
        <script language="javascript">
          function typeSelected(){document.getElementById('page').style.visibility ='hidden';document.getElementById('menu').style.visibility ='hidden';document.getElementById('url').style.visibility ='hidden';
            if(document.getElementById('type').selectedIndex == 0){document.getElementById('url').style.visibility ='visible';
            }
            else if(document.getElementById('type').selectedIndex == 1){document.getElementById('page').style.visibility ='visible';
            }
            else{document.getElementById('menu').style.visibility ='visible';
            }
          }
        </script>
        <select id="type" name="type"onChange="typeSelected()">
          <option value="0">Seite Intern</option>
          <option value="1">Seite Extern</option>
          <option value="2">Men&uuml;</option>
        </select>
      </td>
      </tr>
      <tr id="url">
        <td>Url:</td>
        <td><input name="newurl" value="http://" /></td>
      </tr>
      <tr id="menu" style="visibility:hidden">
        <td>Men&uuml;:</td>
        <td>
          <?PHP
            $selector = new MenueSelector();
            $selector->name  = 'newMenu';
            $selector->value = -1;
            $selector->display();
          ?>
        </td>
      </tr>
      <tr id="page" style="visibility:hidden">
        <td>Seite:</td>
        <td>
          <?PHP
            $selector = new PageSelector();
            $selector->name  = 'newPage';
            $selector->value = -1;
            $selector->display();
          ?>
        </td>
      </tr>
  </table>

Mit Javascript wird beim Auswählen das passende Element eingeblendet. Und genau hier ist eure Hausaufgabe: Derzeit wird beim verstecken der Platz freigehalten, so dass es Abstände zwischen den Text- & Comboboxen gibt. Wie macht man das Ganze so, dass der Platz nicht mehr freigehalten wird? Ich hab es bereits mit display probiert, hat aber nicht geklappt.

Aufmerksame Leser werden im Quellcode eben bemerkt haben, dass die Klasse /system/classes/pageselector.php noch gar nicht existiert. Diese hat den folgenden Quellcode:

<?PHP
  classpageselector extends Control{

    public function display(){
      echo "<select name="".$this->name."">";
      $pages = $GLOBALS['db']->ReadRows("SELECT * FROM {'dbprefix'}pages ORDER BY title");
      if($pages){
        foreach($pages as $page){
          if($page->id == $this->value){
            echo "<option value="".$page->id.""selected="1">".$page->title."</option>";
          }
          else{
            echo "<option value="".$page->id."">".$page->title."</option>";
          }
        }
        echo "</select>";
      }
    }

  }
?>

Im nächsten Schritt werden wir das einfügen / bearbeiten zum Laufen bringen. Danach kommt die Ausgabe im Besucher-Bereich.

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

Kommentare

Daniel schrieb am 31.03.2010:

Hab mal was herausgefunden. Hilft das weiter? function anzeigen(show) { if (document.getElementById(show).style.display=='none') { document.getElementById(show).style.display='block'; } else { document.getElementById(show).style.display='none'; } } » <a href="anzeigen('menue');" rel="nofollow">Menuepunkt</a> » Submenuepunkt

Daniel schrieb am 31.03.2010:

Ich schick es dir noch mal per Mail. :-(

Stefan Wienströer schrieb am 31.03.2010:

War auch mein erster Gedanke, hat zumindest im IE nicht funktioniert, denke das es am tr liegt

Über uns

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