Nov
09
2007
0

Datumsparser für jQuery.tablesorter

Hier ein kleiner Parser für non-standard dates, den ich auf www.birgit-kaletsch.de verwende:

  1.  
  2. $.tablesorter.addParser({
  3. // Datumsparser.
  4. // Hier verwendet: '[Wochentag]s, UhrzeitVon - UhrzeitBis';
  5. // Idee: Wochentag durch zahl von 0-6 ersetzen
  6. // Uhrzeit als rein Zahl
  7. // => Leichtes numerisches Sortieren möglich
  8. // Skript kann sehr leicht auf andere Daten übertragen werden...
  9. id: 'wochentage',
  10. is: function(s) {
  11. return false;
  12. },
  13. format: function(s) {
  14. Wochentage = new Array("Montags", "Dienstags", "Mittwochs", "Donnerstags", "Freitags", "Samstags", "Sonntags");
  15.  
  16. // Wochentag durch entsprechende Zahl ersetzen
  17. for(var i = 0; i < Wochentage.length; i++){
  18. s = s.replace(Wochentage[i], i);
  19. }
  20.  
  21. // Alles auser Zahlen entfernen
  22. s = s.replace(/\D/ig, "");
  23.  
  24. return s;
  25. },
  26. type: 'numeric'
  27. });
Okt
23
2007
0

Simple tabbed gallery

Idee:

  • Easy2Use
  • Simple Coding
  • Runs on Client

Umsetzung: in JavaScript mit JQuery

Zu sehen unter: http://www.birgit-kaletsch.de/persoenliches-hobbies.html

HTML-Code:

  1.  
  2. <p id="gallerytab">&nbsp;</p>
  3.  
  4. <li><a href="http://www.patworx.de/blog/wp-admin/#Blumen"><span>Blumen</span></a>
  5.  
  6. ...</li>
  7. </ul>
  8. <p id="Blumen">&nbsp;</p>
  9. <p class="show">&nbsp;</p>
  10.  
  11. <p class="text">
  12. Ob Veilchen oder Rosen - ich erfreue mich an allen Blumen!
  13. <ul class="bilder">
  14. <li style="cursor: pointer"><img src="http://www.patworx.de/blog/wp-admin/thumb-Blumen-Blume_1.jpg" alt="Blume 1" /></li>
  15. </ul>
  16.  

JS-Code:

  1.  
  2.  
  3. /* Hobbies & Bilder */
  4. if($("#gallerytab").length != 0){
  5. $('#gallerytab ul:first').tabs({ fxFade: true, fxSpeed: 500 });
  6.  
  7. var hobbies = $('#gallerytab ul ~ div');
  8.  
  9. for (var i=0;i<hobbies.length;i++){></hobbies.length;i++){> $("#"+ hobbies[i].id + " .bilder li").click( function(){
  10. hobbie = $(this.parentNode.parentNode).attr("id");
  11.  
  12. $("#"+ hobbie + " .show .text").css("display", "none");
  13. $("#"+ hobbie + " .show .image").css("display", "none");
  14. $("#"+ hobbie + " .show .loading").css("display", "block");
  15. $("#"+ hobbie + " .show").css("height", "352px");
  16.  
  17. var src="big-" + this.firstChild.src.match(/.+\/(.+)$/i).pop().replace(/thumb-/, "");
  18.  
  19. $("#"+ hobbie + " .show .image").html('<img src="http://www.patworx.de/blog/wp-admin/%27+src+%27" alt="'+this.firstChild.alt+'" id="' + src + '" />');
  20.  
  21. var image = new Image();
  22. image.onload = function(){
  23. $("#"+ hobbie + " .show .image").css("display", "block");
  24. $("#"+ hobbie + " .show .loading").css("display", "none");
  25. jQuery.scrollTo( 0, {speed:1000} );
  26. }
  27. image.src = src;
  28.  
  29. $(src).attr("src", image.src);
  30. });
  31. }
  32. };

Powered by WordPress | Theme: Aeros 2.0 by TheBuckmaker.com