Das Plugin kommt ohne weiter Einstellmöglichkeiten oder Optionen daher. Alles was man noch benötigt ist etwas CSS.

Hier ein einfaches Beispiel in welchem alle Elemente im container “wrap” neu ausgerichtet werden.

1

$('.wrap').masonry();

Eine Demo sowie weiter Infos und die Dateien zum Download findet Ihr auf der offiziellen Website.

Ähnliche Artikel

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 3. Dezember 2009 -- jQuery – Click Handler Elementen zuordnen und entfernen

• Übersicht über aktuelle Form-Validaton Scripts.
• Überblick über die wichtigsten Funktionen die jQuery für die Validierung bietet.
• Tutorial “Eigenes Validation-Script mit jQuery erstellen”.
• Übersicht über aktuelle jQuery-Plugins zum verarbeiten von Formulardaten per AJAX.
• Tutorial “Eigenes jQuery-Plugin zum verarbeiten von Formulardaten per AJAX inkl. Dateiupload”.
• Überblick über die wichtigsten Funktionen die jQuery zum modifizieren von Formularen bietet.
• Übersicht zum Thema “customized Forms”. Schönere Formulare mit jQuery.
• Übersicht zum Thema “weiterführende Formulartechniken”.  Autocomplete, In Place Editing, Date Picker, ToolTips, doppeltes versenden verhindern und ein paar weitere Kleinigkeiten.

Zum Abschluss der Serie werden wir euch noch unser neues Formular-Plugin vorstellen an dem wir momentan mit Hochdruck arbeiten. Soviel vorab.

Heute wollen wir gleich mit Teil 1 – “Übersicht über aktuelle Form-Validaton Scripts“ beginnen.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 16. Mai 2009 -- jQuery Formulare validieren – Ein Überblick
• 14. Mai 2009 -- Ajax Datei-Upload mit jQuery

Wer kennt das Problem nicht. Man will ein transparentes png einbinden und bekommt Probleme in den älteren Versionen des Internet Explorer.
Klar gibts dafür schon Lösungen wie den pngfix von TwinHelix etc.

Allerdings fand ich bisher keine so einfach und geschickt wie jQuery.ifixpng.
Das Plugin lässt sich allgemein auf alle Dateien eines Typs oder auch gezielt auf id´s angewendet werden.

Es gibt momenta noch zwei, drei Probleme die aber im Normalfall nicht ins Gewicht fallen.
Unter anderem müssen die Elemente auf die der Hack angewandt wird visible sein.
Background positionierung und repeating gehen leider auch nicht. Wird aber normal eh weniger ein Thema sein wenn man den Hack braucht.

Hier wie immer ein simples Beispiel:

1
2
3
4
5
6
7
8
9
10
11

// apply to all png images
$('img[@src$=.png]').ifixpng();
 
// apply to all png images and to div#logo
$('img[@src$=.png], div#logo').ifixpng();
 
// apply to div#logo, undo fix, then apply the fix again
$('img[@src$=.png], div#logo').ifixpng().iunfixpng().ifixpng();
 
// apply to div#logo2, modify css property and add click event
$('div#logo2').ifixpng().css({cursor:'pointer'}).click(function(){ alert('ifixpng is cool!'); });;

Alle weiteren Infos, sowie das Plugin zum Download findet Ihr auf der offiziellen Homepage.

Ähnliche Artikel

• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2

Die Tage schon bin ich über ein schönes kleines jQuery-Plugin names Lazy gestolpert.
Bei lazy handelt es sich um ein nur 530Byte großes Plugin das gerade bei großen Projekten einen gehörigen Vorteil, was das Laden von anderen jQuery-Plugins angeht, bringen kann.

Lazy tut nämlich nichts anderes, als Plugins nur dann zu initialisieren wenn auch irgendwo wirklich ein Aufruf für die Funktion erfolgt.
Sprich ihr könnt über lazy einbinden was ihr wollt, geladen wird es nur wenn es auch wirklich gebraucht wird.

Hier noch ein kleines Code-Beispiel:

1
2
3
4
5
6

$.lazy('jquery.elastic.js','elastic');
$.lazy('jquery.validation.js','validate');
$.lazy('jquery.ajaxdotnet.js','ajaxDotNet');
 
// And then you use you plugins as you always do
$('textarea').elastic();

Weiter Infos sowie eine Demo und die Files zum Download findet Ihr auf der offiziellen Seite:
http://www.unwrongest.com/projects/lazy/

Ähnliche Artikel

• 26. Februar 2009 -- Tips zum Umgang mit jQuery
• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2

Zunächste einmal brauchen wir ein einfaches HTML-Grundgerüst:

1
2
3
4
5
6
7
8

<div class="input_div">
   <label for="name">Name:</label>
  <input type="text" id="einName" name="derName" />
</div>
<div class="input_div">
   ...
   ...
</div>

Das CSS ungefähr in dieser Form:

1
2
3
4
5
6
7
8
9
10
11
12
13

label, input[type="text"]{
    float:      left;
    display:  block;
}
 
label{
    margin-right: 5px;
}
 
.input_div{
    width:100%;
    overflow:auto;
}

Im Normalfall gibt man dem Label noch eine fixe “width” Eigenschaft mit. Aber damit die Texte in jedem Fall in das Label passen und immer den gleichen Abstand zum Formularfeld haben, benutzen wir jQuery um die notwendige Breite bestimmen zu lassen:

1
2
3
4
5
6
7
8
9
10

  $(document).ready(function() {
      var max = 0;
      //prüfe die Breite jedes Labels und speichere die größte Zahl in der Variable max
      $("label").each(function(){
          if ($(this).width() > max)
              max = $(this).width();
       });
      //setze jedes Label-Tag auf die gleiche Breite
      $("label").width(max);
});

So, das wäre es dann schon gewesen und das Ergebnis sieht wie folgt aus:

Ähnliche Artikel

• 19. November 2010 -- Praxistipp: Suchfeld leeren on focus (jQuery)
• 17. September 2009 -- jCryption – HTML-Form Encryption Plugin
• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern

Die Jungs von asual haben jetzt ein weiteres Deeplinking-Plugin entwickelt. Diesmal für jQuery.
Mit dem Plugin ist es Möglicht jetzt auch direkt den Status einer Applikation oder einen speziellen Bereich der Website zu verlinken.

Das Plugin ermöglicht unter anderem:

• Bookmarken in die Favoriten oder einer Social-Website
• Versenden von Links via E-Mail oder Messenger
• Das auffinden von speziellem Inhalt mit den großen Suchmaschinen
• Verarbeiten der Browser-History und des Refresh-Buttons

Eine vom Plugin erzeugte URL könnte so aussehen:

http://www.domain.de/#/section/?id=1&name=jQuery

Eine Möglichkeit ist nun z.B. das verlinken in Tabs. Mit dem Plugin könnt Ihr nun z.B. direkt gezielt Bereiche einer Tab-Komponente ansteuern.
Ein Beispiel dafür findet Ihr hier.

Die Seite von asual zum Plugin findet ihr unter: http://www.asual.com/jquery/address/
Dort findet Ihr das Plugin zum Download sowie die API und Beispiele.

Ähnliche Artikel

• 16. Oktober 2009 -- jQuery – Accessible-RIA – Widgets für jedermann
• 12. Juni 2009 -- Bessere Textfelder – prettyComments jQuery Plugin
• 12. Mai 2009 -- jQuery ifixpng – Plugin für Transparenz-Problem

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

Pageglimpse verfügt auch über eine kleine API. Was indem Fall nur bedeutet, dass dem GET-String einfach weitere Attribute hinzugefügt werden können.
Dazu gehören:

• devkey -> obligatorisch und auch üblich um einen Service im Web zu nutzen
• url -> WWW-Adresse die der Website die als Thumbnail angezeigt werden soll
• size -> Größe des Thumbails

Da die Thumbnails nicht sofort generiert werden, kann man einen Request senden um den Status zu prüfen. Ein Request sähe dann so aus:

http://images.pageglimpse.com/v1/thumbnails/request?

Hinter “request?” kann man dann noch die GET-Parameter anhängen. Beispiele dazu findet ihr auf Pageglimpse API.

Ähnliche Artikel

• 8. Dezember 2009 -- jQuery load function – Ajax the simple way (Part 1)
• 30. Mai 2009 -- jYouTube – jQuery YouTube thumbnail plugin
• 17. April 2009 -- jQuery API Browser v1.3 für den Desktop

Zwar nicht ganz neu, dafür wie ich finde immer noch beeindruckend. Und für die unter euch die es nicht kennen evtl. ein Highlight. jBreadCrumb – Das jQuery-Plugin zur modernen Darstellung von Breadcrumbs.

Das Plugin wurde für Breadcrumbs geschrieben welche mit extrem tief verschachtelten oder langen Seitennamen umgehen müssen und hat daher auch die Fähigkeit einzuklappen.
Das schöne ist das sich der Einklappeffekt anhand der Anzahl der Elemente oder der Länge einstellen lässt.

Das Plugin nutzt weiter noch das easing Plugin von jQuery zum ein- bzw. aufklappen der Inhalte.

Um das Plugin zu nutzen braucht Ihr nur etwas in der Art:

1
2
3

jQuery(document).ready(function(){
	jQuery("#breadCrumb").jBreadCrumb({easing:'swing'});
})

Eine Demo sowie die Dateien zum Download findet Ihr auf der offiziellen Seite.

Ähnliche Artikel

• 12. Juni 2009 -- Bessere Textfelder – prettyComments jQuery Plugin
• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen

Text-Overflow zeigt dem User, wenn der Text länger ist als der Container der ihn beinhaltet, einen kleinen Hinweis an das es mehr Text gibt.
Im Normallfall einfach in Form von drei Punkten.

Devon Govett hat ein kleines jQuery-Plugin geschrieben welches diese Eigenschaft jetzt auch für Firefox verfügbar macht.
Gerade im Bereich CMS oder ähnlichem ist dies Interessant. Da man sich hiermit String-Manipulationen mittels PHP o.ä. schenken kann.

Ein einfaches Beispiel:

1

$("#id").ellipsis(true);

Das Plugin findet ihr hier sowie die Demo hier.

Ähnliche Artikel

• 23. März 2010 -- Praxistipp – jqTransform Bug bei input in Firefox > 3.5.2
• 20. Oktober 2009 -- Praxistipp: jqTransform Button width einstellen
• 16. Oktober 2009 -- Praxistipp – jqTransform width bug

Es regt sich was in den Mozilla Labs, dem zu hause für experimentelle Projekte bei Mozilla. Dort stellt Mozilla Bespin vor. Einen freien, in JavaScript geschriebenen, Code-Editor welcher im Browser bedient werden kann.
Das schöne an Bespin ist, dass jeder Anwender den Editor weitestgehend seinen Bedürfnissen anpassen kann.

Die Köpfe hinter dem Projekt sind, unter anderem, die beiden Ajaxian.com Gründer Ben Galbraith und Dion Almaer.
Mit der Entwicklung von Bespin geht Mozilla den nächsten logischen Schritt in Richtung SaaS (Software as a Service) und macht somit eine Entwicklungsumgebung
für derartige Webandwendungen online verfügbar.
Viele Vorteile des Saas-Modells sind natürlich auch für Webentwickler interessant. Schneller Zugriff auf alle Projekte von Überall, problemlose Zusammenarbeit mit anderen Entwicklern und vieles mehr.

Bespin liegt momentan, als früher experimenteller Prototyp,  in der Version 0.1 vor und ist nur ein Anfang. Ziel von Bespin soll es sein ein offenes, erweiterbares und webbasiertes Framework zum erstellen von Code zu werden, welches die Produktivität von Entwicklern erhöht.

Die wesentlichen Features im Überblick:

• Echtzeit-Collaboration:
  Live-Coding zusammen mit Kollegen soll einfach und unkompliziert möglich sein.
• Integrierte Kommandozeile:
  Tools wie vi oder Emacs haben es vorgemacht und auch Bespin will diese Stärke nutzen.
• Erweiterbar und Self-Hosted:
  Sowohl das Interface als auch die Fähigkeiten sollen über einfache Befehle (wie bei Ubiquity) oder über die Plug-In API erweiterbar sein.
• Schnelligkeit:
  Auch die Bearbeitung von sehr großen Dateien soll sehr schnell werden.
• Zugriff von überall:
  Die Entwickler sollen von jedem Ort und jedem Gerät über einen modernen Browser Zugriff erhalten.
• Einfache Benutzung:
  Die Nutzer sollen sich schnell zurechtfinden und mit dem Coden beginnen können.

Weiterführende Links zum Thema:
http://labs.mozilla.com/2009/02/introducing-bespin/
https://bespin.mozilla.com/

Ähnliche Artikel

• Keine ähnlichen Artikel verfügbar