2

Mootoolsはここでしか使えません！

さて、基本的な入力ボックスがあります：

<input id='input_box' value='Name' class="validate['required']" />

このクラスは MooTools フロア検証用です。

だから私が念頭に置いているのはこれです：

1) 入力ボックスには、内部に値のテキストがあります。2) ユーザーが入力ボックスをクリックすると、ボックスの左側が内側 (左から右) にスライドするため、次のように表示されます。

名前 [入力ボックス]

3) ユーザーが何も入力せずにボックス領域の外をクリックすると、ボックス領域内の名前で元の位置にスライドして戻ります。

私はこのようにすることを考えていました：

テキストを入力ボックスの後ろに配置し、オンクリックでボックスのサイズをアニメーション化し、その位置でテキストをフェード インします。しかし、私の Mootools の知識は非常に悪く、(出発点として) このようなものでしょうか?

        function introFunction() {
        var input = new Fx.Style($('input_box'),'width':'200');
            input.start(200);
    }

次に、それをonlickに適用しますが、機能しません:/

4

1 に答える 1

1

やってみました。http://jsfiddle.net/fJjTN/1/

tweenの代わりに使用しましたFx。入力フィールドでエフェクトを行う代わりに、ラベルで行いました。

コメントのフィードバック後に編集
http://jsfiddle.net/47CAH/1/

于 2012-10-14T17:46:59.367 に答える