12月 01
まぁ、タイトルが全てなんですが、フォームのフィールドで入力を数値に制限する::TexoTela:: jQuery – numericというのがあるのだが、これを使うと、Safariからペーストできないという問題を発見。
↑下のテキストフィールドにはSafariからペーストできないはず。
よく見ると配布元にペーストに問題がある…と書いてあったわけだが…
ここで、もう一つの入力制限プラグイン,jQuery AlphaNumericについても調べてみた。
こちらも、入力制限の文字種に限らず、各ブラウザでペーストに問題があるようだ。
結論。
jQuery numericやjQuery AlphaNumericを使う場合、ブラウザによってはペーストできないので要注意。フォームにペーストできるかできないかというのは、案外、テストされないんじゃないだろうか。
Popularity: 4% [?]
written by ANN
10月 30
リスト並び替えのインターフェースを、ドラッグ＆ドロップでやりたいと思ったので、jQuery UI Sortableを使って練習してみる。
ただ、リストが大量にある場合や、初心者には、このオペレーションは難しいような気がする。だから、最終的には、それぞれのリストの↑↓のアイコンを付けて、直前・直後に移動できるようにしたい…が、まだそのやり方はよく分からない。
とりあえず普通にドラッグして入れ替えるサンプル。
簡単にできて面白いね。
Popularity: 6% [?]
written by ANN
10月 26
あんまり同様のケースはないと思うけど。
というテーブルがあったとして、
というふうに、列の前２つだけを選択し、なにかしら処理をしたい場合のjQueryの書き方。
それぞれのセルにclassやIDを付けてやれば簡単なんだけれど、可変のtableで、できるだけ固有の識別子をつけずに、前２つとか、特定のセルを処理したい場合。
JavaScript:
-
$("tr").each(
-
function(index,obj){
-
$(obj).children().slice(0,2).css("background-color","orange");
-
}
-
)
…もっと短いコードで実現できそうな気もする。解る人教えてください。
それと、コードの表示にiG:Syntax Hiliterを使ってるのだけれど、記事のソースを直接修正したあと、ビジュアルエディタにもどると、行に<br>が追加され、それがコードとして表示されてしまう。なんとかならないだろうか。
Popularity: 4% [?]
written by ANN
10月 06
いつのバージョンからか分からないが、少なくとも今使っているWordPress 2.8では、テーマ中のwp_head()によって出力されるWordPress付属のjQueryは、 jQuery.noConflict(); されてるので、そのままでは、$("#hoge").click(～)といった使い方ができません。
これはどういうコトかというと、ちまたで配布されているほとんどのjQueryプラグインは、$(～)を前提としているので、そのままでは動かないプラグインが沢山ある、ということです。
WordPress付属のjQueryが、ptorotype.jsと併用できるようにとの措置なんだろうけど、正直、最近prototype.js使って無く、jQuery Onlyなので、この措置は逆に面倒です。
jQueryのプラグインのソース側を修正してもいいけど、プラグインによっては、packされたファイルしか提供しておらず、修正が面倒なものも多いです。
というわけで、僕は、テーマ中のwp-head()を削除して、 自作テーマのディレクトリ中にjsディレクトリを作り、そこに最新のjQueryを入れて読み込むようにしています。
[追記] あ、wp-head()を削ってしまうと、テーマのヘッダになにかを追記するようなプラグインが動作しないかも。要確認。
■関連情報 ・wp_enqueue_scriptで外部JavaScriptの読み込みをスマートに at WordPress.ex-libris.jp
Popularity: 6% [?]
written by ANN
7月 30
日付・時刻の整合性をチェックしたい
とあるサイトにて、日付・時刻の値をチェックする処理が必要となる。日付・時刻の入力には、先のエントリーの実務で使える・使ったjQueryプラグイン5選にも書いた、DatePickerとClockPickを使っている。
これらのインターフェースを用いて値を入力する場合、必ず正しい日付が入るので、極端なところ、値の整合性をチェックする必要はない。しかし、このインターフェースと同時に、手動による入力を認めている場合、入力ミス等でおかしな値を入力される場合がある。たとえば…
- ２００９，７，３０ → 全角文字
- 2009--10-23 → ハイフンが多い
- 2009-2-29 → 閏年じゃないから29日は無い
- 10/2 → 西暦が足りない
- 2009-13-1 → 13月は無い
などなど。
そこでまず、既存のプラグイン等で、日付の整合性をチェックするものが無いか探したのだが・・日付単体でチェックするものを見つけることができなかった。そこで…
>>>>>続きを読む
Popularity: 21% [?]
written by ANN
7月 28
最近のとある案件で実際に使ってみたjQueryプラグインを５つ紹介します。
それぞれに主観で「実用性」「楽しさ」「難易度」を評点（５点満点）してみたので、参考までにドウゾ。
それぞれにサンプルを付けています。
サンプルのソースを見たい方は、該当部分のiframeからソースを見てください。
>>>>>続きを読む
Popularity: 20% [?]
written by ANN
2月 18
一般的なフォームのチェックボックスは、
と、いう感じ。これを、チェックした時に、checkboxの背景オブジェクトの色を変えることで、どこがチェックされたかわかりやすくするjQueryを使ったスクリプトを紹介。（まぁ、紹介するほどでもないけど）
JavaScriptコード
JavaScript:
-
$(document).ready(function(){
-
-
$("input[@type='checkbox']").click(function(){
-
var chk = $(this).attr('checked');
-
-
if(chk == true){
-
$(this).parent().css("background-color","pink");
-
}else{
-
$(this).parent().css("background-color","white");
-
}
-
return true;
-
});
-
});
動作サンプル
解説
まぁ、解説するまでもないと思うけど…$("input[@type='checkbox']")というのは、checkbox全体に対してという指示。checkboxにclassを付けて、それを指定してもいいけど、数が増えると面倒なので。
で、checkbox全体にclickで、そのオブジェクトの属性[checkec]がtrueだったら、そのcheckboxの親のエレメントの背景を変更。$(this).parent().css("background-color","pink");
もっと簡単・スマートなやり方もあると思うけど、あんまりトリッキーに書くのは好きじゃないのでこんな感じで充分。
これだけでも、だいぶユーザビリティが向上したフォームになると思います。
なお、jQueryについては、
jQuery 関連記事まとめ - Cyokodog::Diary
をみれば、ほぼ網羅できるんじゃないですかね。すばらしい。多謝ですね。
あと、コリスさんところで、よくプラグインのまとめをしてくれてます。
[JS]jQueryのプラグイン33+1選 -2008年10月 | コリス
formのバリデーションに関しては、
Really Easy Field Validation
これがかなり使い勝手がよくて好きなんだけど、prototype.jsなんだよねー。
Popularity: 25% [?]
written by ANN
1月 10
prototype.jsよりjqueryのほうが流行ってそうなので、できるだけjQueryを使うようにしている。といっても、まだまだ使い始めたばっかりで右往左往。
通常、jQueryからの操作は、
みたいな使い方をする。
しかし、現在制作中のサイトで、ど～～～～～やっても、
$ is not a function
というエラーになる。
エラーメッセージでググってもそれらしいのを発見できず。
謎すぎる。$がないとかあり得ない。
jQueryのバージョンが古いのか、壊れてるのか、それとも呼び出し場所が悪いのか…悩むこと数時間。やっと解った。
制作中のサイトでは、ロールオーバー時の画像の切り替え用に、
●jquery_auto_j
というプラグインと、ページ内リンクのスクロールをスムーズにする、
●[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
を入れている。
この両方が、問題だった。正確には、ドキュメントを読み切れてなかった僕が悪いんだろうけど…
>>>>>続きを読む
Popularity: 26% [?]
written by ANN
2月 09
たとえば、
HTML:
-
<div class="readme">続きを読む
</div>
-
<div class="readme">続きを読む
</div>
-
<div class="readme">続きを読む
</div>
という構造で、readmeクラスをもつ要素に対し、いちいち onClick="..."とインラインで記述していくのは面倒だし、コードが汚くなる。そこで、prototype.jsの$$関数を用いて、
JavaScript:
-
var obj = $$('div.readme');
とやると、該当のオブジェクトを取得できるのは、prototype.jsの$$関数で書いてあるとおり。
そこに、イベントハンドラを割り当てる方法として、
Think ITにて、amachangが書いてる方法とほぼ同じなのだけれど、
JavaScript:
-
<div>hoge</div>
-
<div>hoge</div>
-
<div>hoge</div>
-
<script type="text/javascript">
-
var elements = $$('div');
-
var eventHandler = function() {
-
alert(' 要素がクリックされました');
-
};
-
-
for (var i = 0; i <elements.length; i ++) {
-
elements[i].observe('click', eventHandler);
-
}
-
</script>
自分は、こう書いてみた。
JavaScript:
-
var objs = $$("div.readme");
-
-
$A(objs).each(
-
function(o){
-
Event.observe(o, 'click', eventHandler, false);
-
}
-
);
$A関数で配列にアクセスし、イテレータを使う方法。
でも、正直、こっちのほうが楽だしわかりやすいな…
JavaScript:
-
for (var i = 0; i <elements.length; i ++) {
-
elements[i].observe('click', eventHandler);
-
}
最近（？）のJavaScriptは、１つの処理を行うのにたくさんの方法（記載法）があり、悩んでしまう。豆にリファレンスに目を通しておくしかないよなぁ、、
Popularity: 13% [?]
written by ANN