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

• 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要素を含むことができないので、その辺よろしくおねがいします。

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

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

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

Read more

exValidation（jQuery.validation.js含め）で今まで一番要望が多かったのですが、汎用的にするのは微妙かなぁと思って実装していませんでした。以前WebDesigningで連載しているjQuery Labで実装方法を書いたものを、もう面倒なので組み込みました。これで割と簡単に使えるんじゃないでしょうか。表示非表示とかはできません、あくまで必須をトグルにできるだけです。表示非表示も実装したい場合はがんばってアドオンしてください。（アドオンは割と簡単にできます）

チェックボックスで必須をトグルにできるやつのサンプル

実装方法

実装方法はサンプルに尽きるのですが、ポイントはトグルにしたい要素はルールを書くときにchkrequiredを必ず含めてください。

<tr>
  <th>Favorite<span>*</span></th>
  <td>
    <span id="fav">
      <label for="f1"><input type="checkbox" id="f1" name="fav[]" value="f1">books</label>
      <label for="f2"><input type="checkbox" id="f2" name="fav[]" value="f2">music</label>
      <label for="f3"><input type="checkbox" id="f3" name="fav[]" value="f3">game</label>
      <label for="f4"><input type="checkbox" id="f4" name="fav[]" value="f4">study</label>
      <label for="f5"><input type="checkbox" id="f5" name="fav[]" value="f5">fishing</label>
      <label for="f6"><input type="checkbox" id="f6" name="fav[]" value="f6">other</label>
    </span>
  </td>
</tr>
<tr>
  <th>Favorite Other</th>
  <td>
    <input type="text" id="favOther" name="favOther" value="">
  </td>
</tr>

で、チェックボックスを含むグループにはchktoggle_hoge_fugaのように

• hoge: トグルを発火させるためのチェックボックスのID
• fuga: チェックボックスの状態によって必須をトグルさせるinputのID

ルールを入れておきます。これだけです。

$("form")
  .exValidation({
    rules: {
      fav: "chkgroup chktoggle_f6_favOther",
      favOther: "chkrequired"
    },
    stepValidation: true
  });

そんなわけで、実装しましたのでよければ使ってください。

チェックボックスで必須をトグルにできるやつのサンプル

最後の手段として使える場合があります。最後の手段です。
プラグインとか使いまくってると（そもそも挙動を理解していないプラグインを使いまくるのはよくないので、注意したほうがいいです）、「プラグインで生成したノードがDOMツリーに追加された後なんかしたい」みたいなときがあったりするかもしれないですが、そういうときになんとかする方法です。

jQuery使ってないときは$(“object”)をquerySelectorとかに変えます。

var object = undefined;
(function() {
    object = $("object");
    if ( object && object.length > 0 ) {
        // ここに処理書く
        return;
    }
    setTimeout(arguments.callee, 30);
}());

上の例だと、objectを監視し続けてほしい個数分取れたときに何かするっていう感じです。取れないときは取れるまでループし続けるので、アレですアレ。。前もって、コンソールからほしい要素が最終的に挿入されてるかどうか見てからにしましょう。

自分で書いたコードならカスタムイベント入れとくと、後で使うときに楽ですね。つまりプラグイン使うとノードの生成タイミングとか自分で把握できなくなるので、気をつけたほうがいいです。

appendで追加するあれやこれのパターン。別に珍しいことないですよくある光景です。appendだけじゃなくてhtmlとかafterとかそゆのでも使えます。まあ何で使えるかっていうのはjQueryのドキュメント見てください

jQueryオブジェクト

まあ普通はこれですよ。

var hoge = $("#hoge");
$("#fuga").append(hoge);

とか極端な例だけど

$("#hoge").append(
  $("<div></div>")
    .append(
      $("<a></a>")
        .attr("href", fuga)
        .text(piyo)
    )
);

みたいなの

HTML要素

これもあるある。

$("#hoge").append(
  "<div>fugafuga</div>"
);

HTML要素少し多い場合

ちょっと見にくい。

$("#hoge").append(
  "<div class='fuga'>\
    <h3>piyo</h3>\
    <p>fungaaaaaaa</p>\
  </div>"
);

上のパターンを配列で

割とみやすい。

$("#hoge").append([
  "<div class='fuga'>",
    "<h3>piyo</h3>",
    "<p>fungaaaaaaa</p>",
  "</div>"
].join(""));

functionで要素を返す

これあんまり使ってないと思いますけど超便利なんですよ。
中でたくさん作ってまとめて返したり、条件分岐で返したり夢が広がります。

$("#hoge").append(function() {
  var elm = $("<ul></ul>"), li = [];
  for ( var i = 0; i < l; i++ ) {
    li.push(
      "<li>" + fuga + "</li>"
    );
  }
  return elm.append(li.join(""));
});

そんな感じで

最後のやつも積極的に使うといいと思います。