jq.carouselに引き続きよくあるシリーズです。（つまり車輪の再開発

ベースはチェックボックス・ラジオボタンをまとめて操作するようなUIのためのコントローラーで、それのついでにビューになるHTMLとinput要素を（見た目上）置きかえる機能がついてます。それだけです。

ドキュメント・サンプルは以下のリンク先を参考にしてください。（引き続き変な英語ですけども。

• jq.ui.checks

要望とかバグ報告などはgithubのIssuesへお願いします。

githubでちょっと前に公開したやつです。こっちでアナウンスしてなかったので。

ドキュメント・サンプルは以下のリンク先を参考にしてください。（変な英語ですけど、なんとなく言いたいことは分かると思います。

• jq.carousel

日本語のドキュメントはWebDesigning 4月号のjQuery Labで書きましたので、どうしても日本語ドキュメントじゃないとだめなんだ！っていう方は見てみてください。

特徴は、色んなことできるようにベースになれるようなAPIのみ提供、タイマーでスライドショーみたいにしたい、とかは自分でsetIntervalとか使って実装してください。サンプルの最後にもタイマー使ったものは入っています。

要望とかバグ報告などはgithubのIssuesへお願いします。

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

• 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

This is typewrite

  

オプションとDeferredも使う

JavaScript

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

HTML

This is typewrite

This is typewrite

  

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
  }
});

使うときの注意点

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

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

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

Read more

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

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

実装方法

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

  Favorite*
  
    
      books
      music
      game
      study
      fishing
      other
    
  


  Favorite Other
  
    
  

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

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

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

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

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

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