2

ボタンやオフスクリーン ナビゲーションなど、Effeckt.css で提供されているいくつかの効果を使用したいと考えています。source を見ると、きちんとモジュール化されていることがわかります。

プロジェクトのクローンを作成しましたが、ユーザーとして開始する方法がよくわかりません。ドキュメントは貢献者を対象としているようです。

ボタンを含めたいだけだとします。demo.autoprefixed.cssファイルとeffeckt.autoprefixed.cssファイルを自分のプロジェクトにコピーしてから、次のようにしました。

  <link rel="stylesheet" href="assets/css/m.autoprefixed.css">
  <link rel="stylesheet" href="assets/css/effeckt.autoprefixed.css">
  ...
  <div class="button-demo-wrap">
    <button class="effeckt-button slide-left"><span class="label">Slide Left</span> <span class="spinner"></span></button>
  </div>

これは機能せず、1 つのボタンだけに必要のない非常に多くのコードが含まれています。このプロジェクトを開始するにはどうすればよいですか?

4

1 に答える 1

2

これはJavaScriptに関係しているようです。

サイトを調べたところ、Effeckt.css は、アニメーションをトリガーするために少し Javascript が必要な CSS フレームワークのようです。次のコード (JS-Fiddle にもあります) は、デモ サイトで参照されている buttons.js で見つかりました。

これらのボタンの使用方法に関するサンプル デモを作成しました: http://jsfiddle.net/fc6ux/

関連する部分は次のとおりです。

$('.effeckt-button').on( 'click', function(){
    showLoader(this);
});

function showLoader(el) {
    var button = $(el),
        resetTimeout;

    if(button.attr( 'data-loading' )){
        button.removeAttr( 'data-loading' );
    } 
    else {
        button.attr( 'data-loading', true );
    }

    clearTimeout( resetTimeout );
    resetTimeout = setTimeout( function() {
        button.removeAttr( 'data-loading' );
    }, 2000 );
}
于 2013-07-22T13:52:07.817 に答える