Multiclick.jsテストページ。
Multiclick.jsテストページです。カチカチしてください！

ダウンロード

導入方法

  1. Multiclickの機能を使いたいページの<head>〜</head>に
  2. <script type="text/javascript" src="multiclick.js"></script>
  3. と書くだけです。
  4. これでページ内のformでMulitclickの機能が使えます。
  5. 詳しい使い方は以下に続く使い方を読んでいってください。

使い方

  1. チェックを入れたいor外したいチェックボックスを決める(C〜Jとする)
  2. 開始点：Cをダブルクリック → チェックが入ってdisabled(暗くなって選択できない)になる
  3. すかさず終了点：Jをダブルクリック → C〜Jが一気にチェックされる
  4.  
  5. 一定時間ダブルクリックで終了点が指定されないと開始点は消えてしまう
  6. これは誤ってダブルクリックしてしまった
  7. (一個しかチェックがないのにダブルクリックしちゃった☆)
  8. ときのための回避策。設定で制限時間を無効に出来ます
  9.  
  10. 次はE〜Mでやってみてください(動かなかったらゴメン)
A. B. C. D. E. F. G. H. I. J. K. L. M. N. O.

使い方２

  1. <div class="allOn"></div>
  2. のように設定に指定したclass値を持つ要素に自動で全選択・全解除用チェックボックスが挿入されます
  3. 上のがそうです
  4. でもへっぽこなのでform直下に置かないと挿入されません
  5. それでもまぁ便利ですよね
  6.  
  7. 以下のようにテーブルで囲んだりしてもちゃんと動きます
  8. でも自動挿入はformのすぐ下じゃないとだめです
  9. multiclick.js単体で動くような仕様にしたかったから…
A. B. C. D.
E. F. G. H.
I. J. K. L.
M. N. O. P.
Q. R. S. T.
U. V. W. X.
Y. Z.    
全選択・全解除
　

使い方３

  1. onclick="multiclick.cocAll(this);"
  2. onclick="multiclick.checkAll(this);"
  3. onclick="multiclick.clearAll(this);"
  4. onclick="multiclick.resetCheckbox(this);"
  5. 自分の手で直接書くことになる可能性のあるjavascriptはたぶんこの4つです
  6. 上はチェックボックスじゃないと意味がないと思います
  7. それ以外はリンクとフォームの部品なら何でもいけそうです
  8. あ、これらと自動挿入用のエレメントはformの中に書かないとダメですからね
  9. チェックボックスのダブルクリックのやつもチェックボックスをフォームの中に置かないと機能しません
  10. もうひとつ言っておくと、ひとつのform内のチェックボックスは全部name値が違うことを想定して作ってます
  11.  
  12. Ver1.01からlabelにfor値を指定してダブルクリックすれば対応するチェックボックスで機能するようになりました
  13.  
  14. Ver1.02からlabel内にフォームエレメントがひとつの場合
  15. forとidがなくても対応するチェックボックスで機能するようになりました
  16.  
  17. Ver1.04から自動挿入の一括選択チェックボックスでダブルクリックのやつが動作しないようになりました
  18. 手動で作った一括選択チェックボックスでもダブルクリックが動作しないようにしたい場合は
  19. 一括選択チェックボックスのidに[設定のallOnId+ユニークな数字(100とか101なら自動挿入のidと被らないと思う)]を指定してください
  20.  
  21. Ver1.07から自動挿入の一括選択チェックボックスをダブルクリックするとフォームの内容をリセットするようになりました
  22. 設定でcheckboxOnlyにtrueを指定するとチェックボックスのみリセットします(初期値true)
  23. 手動で作った一括選択チェックボックスでもこの機能を使いたい場合は
  24. 一括選択チェックボックスのidに[設定のallOnId+ユニークな数字(100とか101なら自動挿入のidと被らないと思う)]を指定してください
A. B. C. D. E. F. G. H. I. J. K.

使い方４

  1. 最後にsos2への組み込み方を書いておきます
  2. sos2に使うのならshift_jisをダウンロードしましょう
  3. sub header の &style; の下に
  4. print qq|<script type="text/javascript" src="multiclick.js"></script>\n|;
  5. を追加。multiclick.jsはsos2.cgiと同じフォルダにアップロード
  6. これでダブルクリックは動作します
  7.  
  8. 一括選択チェックボックスの自動挿入用に、テキストエディタなどで検索しながら
  9. &form('start'); print qq|<tr><td colspan=2>
  10. を
  11. print qq|<tr><td colspan=2>|; &form('start'); print qq|
  12. に全て置き換え。
  13. print qq|</td></tr>|; &form('end');
  14. を
  15. &form('end'); print qq|</td></tr>|;
  16. に全て置き換え。
  17.  
  18. print qq|<hr><div class="allOn"></div>\n|;
  19. をsub use_beforeなどの一括選択を表示させたい動作の &OKbuttoninform の上に追加
  20. もしくは
  21. &input('button','0','全選択',' onclick="multiclick.checkAll(this);"');
  22. &input('button','0','全解除',' onclick="multiclick.clearAll(this);"');
  23. とか。ちょうめんどくさいですね。
  24.  
  25. 気に入らないときはククロさんの全選択・全解除とあわせて使いましょう。
  26. ククロさんとこのほうがSOS向きだしかっこいいぜ。

# return