1ページあたり1つ以上の小さな広告は表示しないことをお約束します。ご安心ください。このメッセージを非表示にすると、二度と煩わされることはありません。
種類
シェイプ
シェイプとは、平面コンテンツを側面として含む3次元オブジェクトのことです。
スティーブ・ジョーブス
スティーブ・ジョーブスは、読者に身近な人物に似せてデザインされた架空のキャラクターです。
2014年に入会 151人の友達
立方体
立方体シェイプは、各側面が立方体の面になるようにフォーマットされています。
1
2
3
4
5
6
テキスト
テキストシェイプは、テキストの側面を表示できるようにフォーマットされています。
ご存知でしたか？この側面は最初は表示されています。
助けてください、別の側面です！
これが最後の側面です
例
シェイプの種類
シェイプは、正形である必要はなく、側面が長さと幅を一致させる必要もありません。正しくアニメーション化できます。
シェイプ
はじめに
必須マークアップ
シェイプには任意のコンテンツを含めることができます。各側面をsideでラップするだけです。
この側面は最初は表示されます。
これは別の側面です
これが最後の側面です
JavaScriptでアニメーション化する
アニメーションは、CSS3トランジションとJavaScriptを使用して、正しい状態を設定します。
シェイプの初期化
$('.shape').shape();
トランジションは、次の側面が次の兄弟（または最後の要素の場合は最初）であると自動的に想定します。
$('.shape').shape('flip up');
次に表示する側面を手動で設定するには、セレクターまたはjQueryオブジェクトを使用します。
$('.shape') .shape('set next side', '.second.side') .shape('flip up') ;
内部メソッドはすべてプログラムで呼び出すことができます。
$('.shape').shape('repaint');
ビヘイビア
次の構文を使用して、以下のすべてのビヘイビアを呼び出すことができます。
$('.your.element') .shape('behavior name', argumentOne, argumentTwo) ;
| ビヘイビア | 説明 |
|---|---|
| flip up | シェイプを上向きにフリップします。 |
| flip down | シェイプを下向きにフリップします。 |
| flip right | シェイプを右にフリップします。 |
| flip left | シェイプを左にフリップします。 |
| flip over | シェイプを時計回りにフリップします。 |
| flip back | シェイプを反時計回りにフリップします。 |
| set next side(selector) | 次の側面を特定のセレクターに設定します。 |
| is animating | シェイプが現在アニメーション中かどうかを返します。 |
| reset | すべてのインラインスタイルを削除します。 |
| queue(animation) | 現在のアニメーションの後にアニメーションがキューに追加されるようにします。 |
| repaint | 要素を強制的にリフローします。 |
| set default side | 次の側面をアクティブな要素の次の兄弟に設定します。 |
| set stage size | シェイプを次の側面のコンテンツサイズに設定します。 |
| refresh | 要素側のセレクターキャッシュを更新します。 |
| get transform down | 下にステージングされた次の側の変換を返します。 |
| get transform left | 左にステージングされた次の側の変換を返します。 |
| get transform right | 右にステージングされた次の側の変換を返します。 |
| get transform up | 上にステージングされた次の側の変換を返します。 |
| get transform down | 下にステージングされた次の側の変換を返します。 |
シェイプの設定シェイプ設定は、シェイプの動作を変更します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| duration | 700ms | 側面変更アニメーションのデュレーション |
| width 2.2 |
initial |
nextに設定すると、シェイプのアニメーション中に次のsideの幅が使用されます。initialに設定すると、初期化時のシェイプの幅が使用されます。特定のピクセル高さに設定すると、幅はその高さに強制的に設定されます。
|
| height 2.2 |
initial |
nextに設定すると、シェイプのアニメーション中に次のsideの高さが使用されます。initialに設定すると、初期化時のシェイプの高さが使用されます。特定のピクセル高さに設定すると、高さはその高さに強制的に設定されます。
|
コールバックコールバックは、特定の動作の後に発生する関数を指定します。
| 設定 | コンテキスト | 説明 |
|---|---|---|
| beforeChange | 次の側面 | 側面変更の前に呼び出されます。 |
| onChange | アクティブな側面 | 表示側の変更後に呼び出されます。 |
DOM設定DOM設定は、このモジュールがDOMとどのようにインターフェイスするかを指定します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| namespace | shape | イベント名前空間。モジュールのティアダウンが要素にアタッチされた他のイベントに影響を与えないようにします。 |
| selector |
selector : { sides : '.sides', side : '.side' }
|
|
| className |
className : { animating : 'animating', hidden : 'hidden', loading : 'loading', active : 'active' }
|
|
デバッグ設定デバッグ設定は、コンソールへのデバッグ出力を制御します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| name | シェイプ | デバッグログで使用される名前 |
| silent | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を抑制します。 |
| debug | False | 標準デバッグ出力をコンソールに提供します。 |
| performance | True | 標準デバッグ出力をコンソールに提供します。 |
| verbose | True | 補助的なデバッグ出力をコンソールに提供します。 |
| error |
error: { side : '存在しない側面に切り替えようとしました。', method : '呼び出したメソッドが定義されていません。' }
|
|