Lazy – jQuery Plugins on-demand laden

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/

Formulare ausrichten mit jQuery und CSS

Formulare lassen sich gut mit Tabellen oder Label layouten. Allerdings sind Tabellen zum Anzeigen von Daten gedacht und nicht um Oberflächelemente zu positionieren. Bei der CSS Variante mit Div’s und Label steht man vor dem Problem, dass sich die Länge des Formularfeld beschreibenden Textes ändern kann und ab einer bestimmten Breite zu einem Zeilenumbruch oder zu einer unterschiedlichen Ausrichtung der Formularfelder führen.
Diese kleine Schwierigkeit lässt sich mit jQuery elegant umgehen.

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:

jQuery Address – Deep linking mit jQuery

Denen unter euch die auch mit Flash, Flex oder Air arbeiten dürfte swfaddress von asual durchaus ein Begriff sein. Ermöglicht swfaddress doch das deeplinken innerhalb von Flash-Anwendungen.
Meiner Meinung nach war swfaddress in den letzten Jahren eine der besten Zusatzentwicklungen im Bereich Flash und hat sich, nicht zu letzt durch die leichte Implementierung, schnell durchgesetzt.

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.

Filemanager basierend auf MooTools

Unter der Website von Christoph Pojer findet ihr einen beeindruckenden Filemanager. Er ist noch in der Erprobungsphase, aber bietet schon eine angenehme Oberfläche und eine gute Usability und natürlich volle Funktionalität.

Der Filemanager zum Verwalten von Bildern bzw. Dateien auf einem PHP-Webserver basiert auf MooTools. Eine kleine Liste der Features:

• Betrachten der Ordner und Dateien auf einem Server
• Umbenennen, Löschen, Kopieren und Verschieben von Dateien
• Detailansicht von Bildern
• Fileupload mit dem bekannten Fancyupload in der neuen Version
• Automatisches verkleinern von großen Bildern
• …

Eine Demo findet ihr unter: Filemanager

Der Aufruf ist denkbar einfach:

1
2
3
4
5
6
7

 var manager = new FileManager({
    url: 'manager.php',
    assetBasePath: '../Assets',
    language: 'en',
    uploadAuthData: {session: 'MySessionId'}
  });
   $('beispiel').addEvent('click', manager.show.bind(manager));

Weiter gibt es auch die Möglichkeit den Filemanager in den WYSIWYG-Editor TinyMCE einzubauen. Dieser besitzt von Haus aus keine Möglichkeit eines gezielten Upload. Eine Demo dazu findet ihr ebenfalls auf Christopher’s Seite..