今さらなんでもないメソッドですけど、せっかく作ったので記事書いておきます。対象要素内のテキストを一文字ずつ表示するだけです。

• jq.typewrite のサンプル

ホスト / ダウンロード

• 5509/jq.typewrite – GitHub
• ダウンロード

使い方

そのままつかう

最初に $.typewrite(jQueryオブジェクト) で初期化しておきます。あとは任意のタイミングで .play() メソッドでエフェクトを実行できます。
.play(4) のように実行時に duration を決めることもできます。

.play() メソッドは jQuery Deferred オブジェクトを返すので、完了時に何かしたいときは .done() でつなげばOKです。

JavaScript

var typewrite1 = $.typewrite($('#typewrite1'));
$('#do_typewrite1').click(function() {
  typewrite1.play();
});

HTML

<p id="typewrite1">This is typewrite</p>
<p>
  <input type="button" id="do_typewrite1" value="Do typewrite 1">
</p>

オプションとDeferredも使う

JavaScript

var typewrite2 = $.typewrite($('#typewrite2'), {
  duration: 2,
  hide: false,
  end: '|'
});
$('#do_typewrite2').click(function() {
  typewrite2.play().done(function() {
    alert('completed');
  });
});

HTML

<p id="typewrite2">This is typewrite<br>
This is typewrite</p>
<p>
  <input type="button" id="do_typewrite2" value="Do typewrite 2">
</p>

jQuery プラグインとして使う

jQuery プラグインとして使う場合は、play() メソッドが typewritePlay() メソッドに変わります。

var typewrite4 = $('#typewrite4').typewrite({
    end: '|'
});
$('#do_typewrite4').click(function() {
    typewrite4.typewritePlay(2);
});

オプション

オプション	説明
duration	エフェクトが始まってから終わるまでの時間。1(s)のように秒で指定 (def 1
hide	初期化時にテキストを隠すかどうか (def true
end	入力カーソルを指定できます (def _(underscore)
wait	ハッシュで対象の文字と待ち時間を渡すとその文字のときに余分に待つ（次の項へ

wait

デフォルトは日本語の4文字だけ指定してるので変えてください

文字列	待ち時間
！	0.1
？	0.1
、	0.1
。	0.1

指定するときはこんな感じで

$.typewrite(hoge, {
  wait: {
    ',': 0.3,
    '.': 0.3
  }
});

使うときの注意点

対象の要素は、<br>以外のHTML要素を含むことができないので、その辺よろしくおねがいします。

PathみたいなナビゲーションをWebページに実装するライブラリです。同じようなのは他にもあると思いますけど、これの特徴は対象に当たっている他のライブラリと干渉しにくいということでしょうか。iScrollみたいなイベントキャンセルが強力なやつはだめだと思います。

サンプルがまさにそれなんですけど、同僚の@hokacchaが作った flipsnap.jsとは共存できます。レイヤー毎にスワイプ判定をしてるので、上位レイヤーで一度キャンセルすると Swpnav が実行されてる下位レイヤーにはイベントが飛ばなくなるような感じで、この Swpnav とか flipsnap のような作り方をしているライブラリとは共存できると思います。

• サンプル（Webkitのみ

Read more

「Less & Sass Advent calendar 2011」9日目の@5509です。
流れをぶった切ってしまってあれなのですが、Node.jsとあわせてLESSファイルを動的にコンパイルするようなやつ書きます。

みなさんご存知の通りLESSはJSで書かれているので、Node.jsを使ったアプリでは動的にLESSファイルをコンパイルできます。

ところがLESSのサイトに書いてある方法は

var parser = new(less.Parser);

parser.parse('.class { width: 1 + 1 }', function (err, tree) {
    if (err) { return console.error(err) }
    console.log(tree.toCSS());
});

・・・やさしくない！

まあでも早い話、parse(hoge, func)のhogeにLESSファイルの文字列渡せばtreeに結果が入ってくるってことですね。

これはLESSの記事というかNode.jsの記事じゃないのとかそういう細かいことはいいじゃないですか・・・

Read more

3年くらい前に最初のバージョンを作ったjQselectableをほぼ全て書き直しました。書きなおす流れで以前のものと互換性がなくなってしまったので、新しいものとして公開します。

でもgithubのリポジトリは同じです。古いものは、古いもので残っているので、もし必要な方がいれば以前の jQselectable(v1.3) を使ってください。

• jqselectable のサンプル
• 5509/jQselectable – GitHub

Read more

タイトルは釣りかとおもいきや僕は普通にあるのとないのとで3倍くらい差があるので、界王拳アプリのひとつです。特にWebアプリとか大きめの規模のサイト開発でとても役に立ちます。

• Charles

Read more