Um das neue Mootools 1.2b ein wenig aus zu testen, habe ich im Chaosbox Theme, die Suchbox ein wenig modifiziert. Wenn man nun in die Suchbox klickt wird diese größer. Sobald man die Suchbox wieder verlässt wird sie kleiner. So spart man sich ein wenig Platz und kann dennoch auch grössere Texte kompfortabel in die Suchbox eingeben.

Source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var sitefx = new Class(
{
  // der Effekt wird initialisiert
  initialize: function() {
    this.fx = new Fx.Morph( $('sbox'), {
      duration:300,
      wait:false,
      transition: Fx.Transitions.Sine.easeOut
    });
    $('s').addEvent('click',this.grow.bind(this));
    $('s').addEvent('blur',this.shrink.bind(this));
  },
 
  // bei klick auf die Suchbox, vergrössern wir diese
  grow : function(){
    this.fx.start({ 'width': 250 });
  },
 
  // beim verlassen der Suchbox, verkleinern wir diese wieder
  shrink : function() {
    this.fx.start({ 'width': 150 });
  }
}
 
// sobald seite geladen ist legen wir los
window.addEvent('domready', function() {
  var myfx = new sitefx();
});
Hat dir der
Artikel gefallen?
Bookmarks: Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • Digg
  • del.icio.us
  • MisterWong
  • Y!GG
  • Facebook
  • Google Bookmarks
  • Live-MSN
  • Tausendreporter
  • Technorati