2008-02

忘れそうなので、jQuery Easing Pluginの使い方を書いておく。

• jQuery: The Write Less, Do More, JavaScript Library
• jQuery Easing Plugin

読み込み

jQuery本体を読み込んでから、Easing Pluginを読み込む。

<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

イージングの指定

slideUpやfadeOutなどのエフェクトで、プラグインで定義されたイージングを使いたい場合、以下の書き方をする。

$(element).slideUp({
                    duration: 1000,
                    easing: method,
                    complete: callback
});

この書き方についての説明も、なんでこれでOKなのかも、jQueryのサイトのドキュメントに書いてない気がする。いい機会なのでソースを読んでみたけど、これでOKっぽい。

animateと一緒に使う場合は、ドキュメントにある通りにeasingに”easeInCubic”とか指定する。

animate( params, [duration], [easing], [callback] )

{duration: 1000, ... complete: callback}の部分で指定できるオプションについては、ドキュメントのanimate( params, options )のページのoptionの部分で説明されている。

デフォルトのイージング

Easing Pluginを読み込むと、デフォルトのイージングが、swingからeaseOutQuadに変更される。jQueryで定義されていた、swingはjswingという名前に変更され、イージングにswingを指定しても、jQuery.easing.defで指定したイージングが呼ばれるように変更されている。
デフォルトで使われるイージングを変更したい場合は、以下のようにして指定する。

jQuery.easing.def = "easeInElastic";

独自のイージング

プラグインと同じ方法でjQueryのオブジェクトを拡張して、かくかく動くイージングを作ってみた。書き方これでいいんだろうか。

<script src="http://www.regulus8.com/blog/wp-content/uploads/2008/02/js/jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  jQuery.extend(jQuery.easing,{
    step: function (x, t, b, c, d) {
      return c*((t=Math.round((t+0.5)/200)*200)/d) + b;
    }
  });
  $("#start").click(function(){
    $("#box").slideToggle({duration: 1000, easing: "step"});
  });
});
</script>
<input id="start" value="start" type="button">
<div id="box" style="width:200px;height:200px;color:white;background:red;">#box</div>

jQueryのパスを間違えていたので直しました。

使ってるプラグインの動作を追いつつ、jQueryのソースを読むと楽しいと思う。

投稿の本文にJavaScriptを埋め込もうとしたら、自動整形されてひどいことになったので、本文の一部分を自動整形しないプラグインを入れてみた。

• WordPress › Raw HTML « WordPress Plugins

コードエディタ中で、<!--start_raw--> <!--end_raw-->か[RAW] [/RAW]で囲んだ部分が自動整形されなくなる。ビジュアルエディタは使っていないので、どうなるのか試してない。

<!--start_raw--> <!--end_raw-->のテスト

<!--start_raw-->
<script type="text/javascript">
  document.writeln(new Date());
</script>
<!--end_raw-->

上のコードをこの下に挿入してみる。

[RAW] [/RAW]のテスト

[RAW]
<script type="text/javascript">
  document.writeln(new Date());
</script>
[/RAW]

上のコードをこの下に挿入してみる。

グリッドレイアウトのカラム幅を計算したり、文字のベースライングリッドを計算してくれるツール。これ使いやすいかも。

• Grid Designer 2

グリッドを使うときは、紙にラフスケッチをしてカラムの割り方を決めて、GridMaker RebootをつかってPhotoshop上にレイアウトのガイドを作って、そこにパーツを作ってました。

ラフを考えるときにGrid Designer 2を使ったら、分割とか視覚的にわかりやすくていいかも。ラフスケッチ、モックアップ段階で気楽に試して検討できることって重要かと思います。CSSフレームワークも試してみるか。

メモついでに、グリッドレイアウトの紹介記事

• Subtraction: Grid Computing… and Design
• Five simple steps to designing grid systems - Part 1 : Journal : Mark Boulton
• A List Apart: Articles: Setting Type on the Web to a Baseline Grid

使ってみたグリッドレイアウト関連のツール

• Grid Layout
• Grid Calculator
• GridMaker Reboot - Article - andrewingram