Aug 06

Ajax In Place Editor.

Ajax No Comments »

Der In Place Editor ist eine art Inputfeld welches mittles Ajax die Informationen schnell und einfach speichert.
Dazu ist folgendes nötig:

1. Download der Script.aculo.us Bibliothek ( hier Downloaden )

2. Bibliothek in die Datei die den In Place Editor beinhalten soll einfügen

  1. <script src="javascripts/prototype.js" type="text/javascript"></script>
  2. <script src="javascripts/scriptaculous.js" type="text/javascript"></script>

3. Erstelle den Div Block und den Javascript part der den In Place Editor beinhaltet.

  1.  
  2. <div id="desc"><? if(trim($row["description"]) == "") echo "click here to edit"; else echo $row["description"];?></div>
  3. <script type="text/javascript">
  4. new Ajax.InPlaceEditor(‘desc’, ‘rpc/desc.php’, {size:15, submitOnBlur: true,okButton: false,cancelLink: false,  highlightcolor: ‘#4C66FF’,highlightendcolor: ‘#FFFFFF’});
  5. </script>

4. In der rpc/desc.php kann man den Inhalt des Editors auslesen und nach belieben weiterverarbeiten.
Zum Beispiel in die Datenbank speichern.

Viel Spaß beim ausprobieren.

Mai 14

Tooltip mit Prototype und Prototip

Ajax No Comments »

1. Die Bibliothek und das Stylesheet in den Header bereich einfügen.

  1. <head>
  2. <script type = "text/javascript" src = "js/prototype.js"></script>
  3. <script type = "text/javascript" src = "js/scriptaculous.js?load=effects"></script>
  4. <script type = "text/javascript" src = "js/prototip.js"></script>
  5. <link rel="stylesheet" type="text/css" href="css/prototip.css" />
  6. </head>

2. Ein Element mit dem gewünschten Style und Javascript-Funktion versehen.

  1. <img src="questionmark.jpg" id="tooltipeaACC"></div>
  2. <script language="JavaScript" type="text/javascript">
  3.         new Tip(‘tooltipeaACC’, ‘InfoBox …’, { title: ‘Hilfe:’, className: ‘test’, effect: ‘blind’});
  4. </script>

Thats it !

Prototip Download