Archive for the ‘jQuery’ Category.

Next Entries »

jsTree die Erste

14. Dezember 2010, 10:06

Aus gegebenem Anlass beschäftige ich mich grade mit jsTree. Ich glaub, das kann ziemlich viel, allerdings find ich die Doku etwas dürftig. Aber da es sich um JavaScript handelt, hab ich damit weit weniger Probleme als mit der Doku von, sagen wir mal, Typo3.

1. Wie erstelle ich einen jsTree ?
Zuerst baue ich mir im HTML eine einfache Liste

  1. <div id="treenav">
  2.  <ul>
  3.   <li id="Inhalte" rel="basis"><a href="">Inhalte</a>
  4.    <ul>
  5.     <li rel="seite"><a href="">Seiten</a></li>
  6.     <li rel="news"><a href="">News</a></li>
  7.    </ul>
  8.   </li>
  9.   <li id="Benutzerverwaltung" rel="basis"><a href="">Benutzerverwaltung</a>
  10.    <ul>
  11.     <li rel="benutzer"><a href="">Benutzer</a></li>
  12.    </ul>
  13.   </li>
  14.  </ul>
  15. </div>

Anschließend initalisiere ich den Tree

  1. $('#treenav').jstree({
  2.         "themes" : {
  3.                 "theme": "classic",
  4.                 "dots" : false
  5.         },
  6.         "types": {
  7.                 "types" : {
  8.                         "basis" : {     "icon" : { "image" : "_drive.png"} },
  9.                         "seite" : {     "icon" : { "image" : "icon_seite.png"} },
  10.                         "news" : {      "icon" : { "image" : "icon_news.png"} }
  11.                 }
  12.         },
  13.         "plugins" : [ "themes", "html_data", "types" ]
  14. });

Mit "types" definiere ich die Node Typen und kann so für einzelne Listeneinträge unterschiedliche Icons definieren.

2. Wie sorge ich dafür, dass gleich alles aufgeklappt ist ?
Nun wollte ich noch, dass der Tree gleich komplett aufgeklappt ist und das geht so:

  1. $("#treenav").jstree("open_all");



Mehr Einträge zu jsTree werden sicher noch folgen.... :)

Schlagwörter: ,
Category: jQuery  |  Kommentar

chgallery einrichten

21. Oktober 2010, 10:27

Die chgallery ist, anders als die meisten Galerie Extensions, ziemlich cool. Ich vermute stark, dass ich die noch öfter brauchen werde, daher ein paar kleine Details zum Aufsetzen der Galerie:

1. Sprachen
Grundsätzlich gibts alle deutschen Übersetzungen bereits in der locallang.xml. Damit aber auch deutsch angezeigt wird, muss man im Typoscript die Standardsprache definieren:

  1. config.language = de
  2. config.locale_all = de_DE

Dann klappts auch mit der Sprache.

2. Bilder verlinken
Vielleicht hab ich auch einfach was falsch gemacht, aber bei mir waren die Bilder nicht von Anfang an verlinkt. Erst als ich im TS angegeben habe, dass sie verlinkt sein sollen, konnte man auch klicken um sie in Originalgröße anzusehen:

  1. plugin.tx_chgallery_pi1 {
  2.         gallery.image {
  3.         imageLinkWrap  = 1
  4.         imageLink       Wrap {
  5.                 enable = 1
  6.                 typolink {
  7.                         title.field= tx_chgalleryFilename #tx_chgalleryTitle
  8.                         parameter.override.cObject = IMG_RESOURCE
  9.                         parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
  10.                         parameter.override.cObject.file.maxW = 800
  11.                         parameter.override.cObject.file.maxH = 600
  12.                         # used lightbox is pmkslimbox
  13.                         ATagParams = rel="lightbox"
  14.                         ATagParams.override = class = "lightbox"
  15.                         ATagParams.insertData = 1
  16.                 }
  17.         }
  18. }

Man beachte insbesondere Zeile 13, wo ich den Links direkt ein rel=lightbox zuweise, das werde ich später nämlich noch brauchen.

3. Lightbox
Ich bin sicher, das kann man mit Extensions auch einfacher haben, aber ich hab selber dafür gesorgt, dass die Lightbox funktioniert. Zuerst hab ich jquery und jquery lightbox eingebunden:

  1. page.includeCSS.20 = fileadmin/templates/jquery.lightbox-0.5.css
  2. page.includeJS.35 = fileadmin/templates/js/jquery-1.4.2.min.js
  3. page.includeJS.40 = fileadmin/templates/js/jquery.lightbox-0.5.js
  4.  

Dann sorge ich dafür, dass alle meine rel=lightbox Links auch mit der Lightbox aufgerufen werden:

  1. page{
  2.         headerData.200 = TEXT
  3.         headerData.200.value (
  4.                 <script type="text/javascript">$(function() { $('a.lightbox').lightBox(); });</script>
  5.         )
  6. }
  7.  

Und das Ergebnis ist eine Galerie auf deutsch, die die Bilder in Originalgröße in der Lightbox öffnet. Whee.

Schlagwörter: ,
Category: jQuery, Typo3  |  Kommentar

innerHTML und IE8

13. Oktober 2010, 13:26

Großer Gott. Ich hab dereinst mal ein Plugin für tinyMCE geschrieben, so ne kleine Bildverwaltung, wo man Bilder uploaden, beschneiden, verkleinern etc. kann. Und jetzt stell ich fest, dass das ganze im IE8 nicht mehr funktioniert. Warum? Weil IE8 ein Problem mit innerhtml hat...

Beschrieben wird das ganze hier.

Meine Lösung, und es ist keine gute Lösung, aber ich hatte wenig Zeit: behelfsmäßig jquery einbauen und anstatt innerHTML zu nutzen das entsprechende div über jquery einbauen. Das ganze ist jetzt eine grauenvolle Mischung aus javascript und jquery Syntax aber irgendwie klappts.

Vorher:

  1. par = document.createElement("p");
  2. par.innerHTML = "<div style= 'clear:both;' >" + akt_src + "</div>";
  3. par.innerHTML+= "<a href=''>test</a>...";
  4. td = document.createElement("td");
  5. td.appendChild(par);

Nachher:

  1. par = "<div style='clear:both;'>"+akt_src+"</div>";
  2. par += "<a href=''>test</a>...";
  3. td = document.createElement("td");
  4. $(par).appendTo(td);

Unglaublich aber wahr, so klappts. Für den Moment muss es reichen. Bis ich mal die Zeit kriege, das komplett in jquery zu übertragen.

Category: JavaScript, jQuery  |  Kommentar

jquery: checkbox onclick – checked oder nicht?

29. September 2010, 09:14

Um mir das mal zu notieren:
Ich habe eine Checkbox. Beim Klicken der Checkbox soll eine Aktion ausgeführt werden und zwar abhängig davon, ob die Checkbox durch den Klick angekreuzt wurde oder nicht. Und es geht so:

  1. $("input[name='infos']").click( function(){
  2.    if($(this).attr("checked")){
  3.        alert("checkbox ist checked");
  4.    }else{
  5.        alert("checkbox ist nicht checked");
  6.    }
  7. });
Schlagwörter: , ,
Category: jQuery  |  Kommentar

elRTE Javascript Fehlermeldung im IE

24. September 2010, 08:56

Ich war sehr erstaunt, dass elRTE bei mir eine JavaScript Fehlermeldung erzeugte - allerdings nur im IE und das auch nur manchmal. Nach einigem Herumprobieren stieß ich dann auf das Problem: Wenn kein Inhalt drinsteht, dann entsteht diese Fehlermeldung.

  1. <div class="editor">Das ist ein Test!</div>

funktioniert, aber

  1. <div class="editor"></div>

erzeugt die Fehlermeldung. In meinem Fall brauchte ich elRTE, um eine WYSIWYG Eingabe in einem User Interface zu ermöglichen. Da kann es auch vorkommen, dass das Editor Feld leer bleibt, also musste ich mir etwas einfallen lassen.

Die Lösung: Ich prüfe, ob mein editor einen Inhalt hat und wenn nicht, schreibe ich statt nichts ein leerse Div hinein. Das sieht keiner und die Fehlermeldung bleibt weg:

  1. <div class="editor"><div></div></div>
Schlagwörter: , ,
Category: JavaScript, jQuery  |  Kommentar

jqGrid: die Suche konfigurieren

3. August 2010, 12:22

Noch hab ich nicht rausgefunden, wie ich bei der jqGrid Suche das zweite dropdown (mit den Optionen wie "gleich", "größer als", etc.) komplett entfernen kann. Zumindest aber hab ichs geschafft, die Optionen auf eine zu beschränken und zwar so:

Zuerst erstelle ich ganz normal mein grid

  1.  jQuery("#list_1").jqGrid({
  2.     url:'inc/gridData.php?art=l1&amp;typ=test',
  3.     datatype: "xml",
  4.     height: "auto",
  5.     colNames:['ID','Shop', 'Status', 'Start', 'Ende'],
  6.     colModel:[
  7.       {name:'shops_promotions_id', index:'shops_promotions_id', width:75},
  8.       {name:'shopname',index:'shopname', width:90},
  9.       {name:'status',index:'status', width:60},
  10.       {name:'start', index:'start', width:75},
  11.       {name:'ende', index:'ende', width:75}
  12.     ],
  13.     rowNum:10,
  14.     autowidth: true,
  15.     rowList:[10,20,30,50,100],
  16.     pager: '#gridpager',
  17.     sortname: 'shops_id',
  18.     viewrecords: true,
  19.     sortorder: "desc",
  20.     multiselect: true
  21.   });
  22.  

Ich aktiviere das kleine Icon Menü Links unten, wo auch die Suche ist und gebe bei den Optionen für die Suche (fünfte geschwungene Klammer) ein, dass sopt nur aus 'cn' bestehen soll:

  1. jQuery("#list_1").jqGrid('navGrid','#gridpager',{add: false, edit:false, del: false}, {}, {}, {}, {sopt: ['cn']});

Das beschränkt mir meine Suchoptionen auf genau einen Begriff: "enthält". Welcher Begriff wie heißt, kann man hier nachlesen.

All available option are:
['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
The corresponding texts are in language file and mean the following:
['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']

Schlagwörter: ,
Category: jQuery  |  Kommentar
Next Entries »