2

fx.morph デモと同様の結果を得ようとしていますが、「mouseenter」または「mouseleave」の代わりにクリックします。リスト オプションをクリックすると、変形するはずです。別のアイテムをクリックすると、元のアイテムがデフォルトの状態にモーフィングしている間にモーフィングする必要があります。最初の部分は非常に簡単ですが、これまでのところ、2 番目の部分を希望どおりに機能させることができませんでした。「clickOutside」イベントを作成しようとしましたが、リスト項目ではない場所をクリックした場合にのみ機能します。新しいアイテムは変形しますが、古いアイテムは元の状態に戻りません。

私がこれまでのところ：

Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
        event.stopPropagation();
        return false;
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn);
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn);
    }
};

window.addEvent('domready', function() {
    $$('#idList LI').each(function(el) {
        el.set('morph', {
            duration: 200
        }).addEvents({
            click: el.morph.pass('.hover', el),
            outerClick: el.morph.pass('.default', el)
        });
    });

});​

いじりたい場合: http://jsfiddle.net/JXTMa/

元のコンセプトを説明するために、元の mouseenter の例に戻しました。

4

1 に答える 1

1

outerClick イベントは停止するe.stopPropagationため、そのイベントを手動でトリガーする必要がありますthis.getDocument().fireEvent('click')

Element.Events.outerClick = {
    base : 'click',
    condition : function(event){
        event.stopPropagation();
        this.getDocument().fireEvent('click');
        return false;
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn);
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn);
    }
};

フィドルの例を次に示します: http://jsfiddle.net/cNNjP/1/

クラスを作成し、それをコンポーネントとして使用することも、私が時々好む別の方法です。これはその例です：http://jsfiddle.net/kVnY4/3/

編集:コンポーネントが使用する 2 番目のフィドルを更新しtoElement、store. JavaScript コンソールを確認すると、最初にオブジェクトから要素が取得され、次に要素からオブジェクトが取得されることがわかります。

于 2013-01-02T20:08:13.007 に答える