<< Prev Page Next Page >>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


ページ内リンクでスクロールする表現試案

ページ内リンクで「パッ」と切り替わった時何が起きたかわからない、という話はたしかにあるよね。

で、こちら様は「点滅させてみよう」というのを作っておられます。

「スクロール」 っていう動作以外で、画面が移動したことを視覚的にわからせる方法として、ページ内リンクをクリック (タップ) したときに、画面を一瞬点滅させたら、なんか切り替わったなって思わせられないかなと思って
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験 | WWW WATCH

僕も僕も作ってみるよ!僕はページ内で遷移したことがわかったほうがいいからスムーズスクロール派なんだけど、スムーズスクロールだと凄く長いページのときにどうしてもズルズルズルズルーっと長くスクロールするのがかっこ悪い。

というわけで、とても長い距離をスクロールするときは途中を飛ばしてみた。



ソースコード


スポンサーサイト

jquery.countdownつくった

JavaScriptで画面上に数字を表示してカウントダウンするやつが見つからなかったのでぱぱーっとつくりました。
特筆すべき点は…まあ、ないです。
使うほうのコードはこんな感じ。

$.countdown({ count: 5, message: 'シャットダウンしてよろしいですか?', completed: function() { alert('BooBoo.'); }, canceled: function() { alert('キャンセルされました'); } });

デモ

Githubはこちら

[GitHub] jquery.countdown


jQueryイディオム:テーブルの行クリックでチェックボックスにチェック入れる

行ごとクリッカブルにするというのをもう少し改善?してみました。全然知らない人にツッコミいれてすみません。はてブで新着に出てたのでつい。

jQueryでテーブルの行ごとクリックして チェックボックスにチェック出来るよう にするTipsです。ユーザーがデータを 見ながらフォームを送信する際に、分か りやすくしてあげよう、という目的です。 行ごとクリッカブルにする、みたいな感じ。 jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにする - かちびと. net
Chrome Google提供の高速ブラウザ。エクステンション豊富。 ★★★★★
Firefox 人気の火狐。アドオンが魅力的過ぎ ★★★★★
Safari Mac標準。iPhoneの登場でシェアは伸びるのか? ★★★★☆
Opera 目立たないけど実は高性能。もうちょい人気出てもいい ★★★★☆

改善点は以下です。

  • 「find()」メソッドと「:checkbox」セレクタ便利
  • 「hover(over,out)」メソッド便利
  • チェックボックスをクリックしてもちゃんと選択できるよ
  • どうせなので選択状態を行全体の色で表現

こういうスクリプトと

$(function() {
  $('.data tr').hover(function() {
    $(this).addClass('hover_tr');
  }, function() {
    $(this).removeClass('hover_tr');
  }).click(function(evt) {
    var $t = $(this);
    var chk = $t.find(':checkbox')[0];
    if (evt.target != chk) {
      chk.checked = !chk.checked;
    }
    if (chk.checked) {
      $t.addClass('checked_tr');
    } else {
      $t.removeClass('checked_tr');
    }
  });
});

こういうスタイルシートで実現しています。

.main_txt .data {
  border-collapse: collapse;
}
.main_txt .data td {
  border:1px solid black;
  padding: 4px 10px;
}
.main_txt .data .hover_tr td {
  background-color: #f0f0f0;
  color: #333;
}
.main_txt .data .checked_tr td {
  background-color: #0033aa;
  color: white;
  border:1px solid white;
}

いじょ!


jqueryイディオム:ページ内の全てのリンクを一時的に無効にする

ブログのプレビュー画面をすごくお手軽に作る場合とか、実物のページをそのまま表示させつつ、リンクだけを全て無効にする、みたいなことでいい場合に使います。

$('a[href]').click(function(e){e.preventDefault()}).attr('href','#');

はい一行。それでは実際に試してみましょう。



あとは、ボタンを無効にしたりとかにも使えます。
$('input:button,button').attr('disabled', true);


jQueryイディオム:テーブルハイライト

こういうのもjQueryでサクっとイケます。すごいぞCSS3。

これの「横列・縦列をハイライト」をDHTMLで。 404 Blog Not Found:javascript - tableの横列・縦列をハイライト
1. まずスタイルシートは同じ物を使います。
<style> .hstripe-even { background-color: #ccffcc } .hstripe-odd { background-color: #ccccff } .vstripe-even { background-color: #ffccff } .vstripe-odd { background-color: #ffffcc } </style>
2. 横縞にしたいtableにclass="hstripe"をつけます。別にtbodyじゃなくていいよ。 3. スクリプトは以下。
$(function() { $('table.hstripe tbody tr:even').addClass('hstripe-even'); $('table.hstripe tbody tr:odd').addClass('hstripe-odd'); $('td:even', 'table.vstripe tbody tr').addClass('vstripe-even'); $('td:odd', 'table.vstripe tbody tr').addClass('vstripe-odd'); });
この縦縞、最初
$('table.vstripe tbody tr td:even').addClass('vstripe-even');
ってやってたら市松模様になってしまった。でもちゃんとうまくいくようになってたよ! 以上!
現金・預金株式以外の証券株式・出資金金融派生商品保険・年金準備金預け金未収・未払金対外証券投資その他合計
1979FY1,948,234242,722452,2410432,124110,71082,0087,2372,4893,277,765
1980FY2,174,447288,165492,2080499,327112,128105,9597,2033,3493,682,786
1981FY2,416,292334,403479,9060579,077108,308115,5437,7033,2164,044,448
1982FY2,627,648421,591528,3060668,918111,449125,5956,0984,1014,493,706
1983FY2,827,925531,158716,1610767,412111,207151,1775,3454,5585,114,943
1984FY3,054,117595,207767,2900882,297112,985170,1447,7165,2235,594,979
1985FY3,294,078667,2391,004,08901,020,857112,128183,95414,6414,0316,301,017
1986FY3,545,346761,4681,397,07301,208,116114,366215,82728,8175,1077,276,120
1987FY3,818,660863,7751,837,84801,418,681119,563235,59748,6146,7278,349,465
1988FY4,100,172925,4232,165,53201,663,884124,178254,03361,1478,2649,302,633
1989FY4,479,416984,2072,032,11401,918,591121,556281,37838,90213,9969,870,160
1990FY4,818,2261,077,0391,721,85102,116,160125,205326,46838,38615,07410,238,409
縦縞↓
現金・預金株式以外の証券株式・出資金金融派生商品保険・年金準備金預け金未収・未払金対外証券投資その他合計
1991FY5,171,5661,093,5271,256,95402,289,595125,235343,20236,55112,96810,329,598
1992FY5,404,6331,156,5431,188,16302,514,169127,713407,33427,22110,74810,836,524
1993FY5,669,5721,185,5181,232,91802,747,022137,953422,35816,01411,34911,422,704
1994FY6,007,0851,147,0871,184,76602,947,169138,400411,80115,17311,29011,862,771
1995FY6,296,3601,166,1421,439,81503,185,969140,031393,92323,3354,75312,650,328
1996FY6,583,8751,110,3451,177,09303,356,732143,650413,90143,29212,53512,841,423
1997FY6,940,141998,1971,217,4211353,480,154141,010425,26145,80415,58513,263,708
1998FY7,237,920925,2571,015,2801593,589,076141,930422,53944,88816,02613,393,075
1999FY7,447,390921,6071,522,809513,698,712142,837411,58240,42014,59214,200,000
2000FY7,514,280905,7741,301,4781603,776,240138,403386,74560,02076,37714,159,477
2001FY7,654,300790,2971,035,2762353,790,429124,771381,96674,35072,74113,924,365
2002FY7,755,143684,510782,9145723,769,795122,941368,88069,76766,36713,620,889
2003FY7,799,718692,7281,187,1564533,777,293121,986353,80968,181108,98114,110,305
2004FY7,763,389773,1991,229,0062403,826,049121,897327,21669,984111,43814,222,418


jQueryイディオム:全チェック

さてjQueryで超簡単になる処理を思いついては書いていく連載が始まりました。

まず第一回は、よくある複数選択のチェックボックスを全部まとめてチェックしたりはずしたりするアレ。一行でイケるよ。

名前 同期しない
name=id[1] 山田太郎 name=test1
name=id[2] 鈴木一郎 name=test2
name=id[3] 木村太郎 name=test3

上のtable内のcheckboxのうち、nameが"id"から始まるもの全部のチェック状態を一番上のチェックボックスに同期させる。

<input type="checkbox" onclick="$('#list input:checkbox[name^=id]').attr('checked', this.checked);" >
こんだけ。


数字しか書けないinputとか英単語しか書けないinputとか

brazilの人が「いやーそこはやっぱりkeydownで禁止しなきゃだめでしょ」と言ったのでこんな面倒なことに手を染めることに。

方針

入力される文字をイベントから取り出して、正規表現にマッチしなかったらイベントをキャンセルする。ただし、Tabとか矢印とかEnterとかを邪魔しないように。

イベントの種類

ちょっと実験用のHTMLを作って調べてみたところ、keydownイベントとkeypressイベントではevent.keyCodeとかで取れる値が違ってた。keydownでは仮想キーの値なので、記号キーとか押すと220とかめっちゃでかい数字になって使えない。今回は「何の文字を入力しようとしたのか」によって、キーイベントを無かったことにしちゃうのが目的なので、keypressイベントを使う。

[キーイベントから文字を取る]

最初は軽く考えてた。jQueryではkeyCodeとcharCodeを合わせた「which」っていうプロパティが使えるから

var char = String.fromCharCode(evt.which);

ってやればどのブラウザでも入力する文字がとれるねーって思ってた。甘かった。あまあまちゃん。Firefoxでカーソルキーがきかなくなった。

しばし悩んで各ブラウザでkeyCodeとcharCodeの値を取ってみたのが下の表。

keypressイベントでのkeyCode、charCode。
タイプしたキー
Firefox
IE
Safari for Windows
keyCode
charCode
keyCode
charCode
keyCode
charCode
a
0
97 (a)
97 (a)
undefined
97 (a)
97 (a)
/
0
47 (/)
47 (/)
undefined
47 (/)
47 (/)
[shift]
イベント発生せず イベント発生せず 0 0
[shift]+5 (JP106 %)
0
37 (%)
37 (%)
undefined
37 (%) 37 (%)
[左矢印]
37 (%)
0
イベント 発生せず 0 0
[shift]+7 (JP106 ')
0
39 (')
39 (')
undefined
39 (') 39 (')
[右矢印]
39 (')
0
イベント発生せず 0 0
[backspace]
8
0
イベント発生せず
8
8
[delete]
46 (.)
0
イベント発生せず 0
0
[enter]
13
0
13
undefined
13
13
[escape]
27
0
27
undefined
27
27
[space]
0
32 ( )
32 ( )
undefined
32 ( )
32 ( )
IME ONのとき
229
0
イベント発生せず イベント発生せず

いくつか問題があるにせよ、大体なんとかなるかな。

  • Firefoxでは制御キーをpressしたときにkeyCodeがあってcharCodeが0になる。文字を入力するとkeyCodeが0でcharCodeが入力文字。
  • IEでは制御キーでkeypressイベントが発生しない。
  • Safari(Win)では制御キーではkeyCodeもcharCodeも0
  • IMEがONのとき、FirefoxはとりあえずkeyCode229?他はイベント無し。

というわけで、keypressイベントから、何の文字を入力しようとしたのかを調べるコードはこれだ!

function pressedChar(event) { var code = 0; if (event.charCode === 0) { // Firefox, Safari control code code = 0; } else if (!event.keyCode && event.charCode) { // Firefox code = event.charCode; } else if (event.keyCode && !event.charCode) { // IE code = event.keyCode; } else if (event.keyCode == event.charCode) { // Safari code = event.keyCode; } if (32 <= code && code <= 126) { // ASCII文字の範囲内 return String.fromCharCode(code); } else { return null; } } function numberonly(event) { var char = pressedChar(event); if (char && !char.match(/\d/)) { return false; } else { return true; } } function wordonly(event) { var char = pressedChar(event); if (char && !char.match(/\w/)) { return false; } else { return true; } }

以下、IE以外の方はIMEをOFFにしてお楽しみください。

数字のみ:
英単語のみ:

Firefox3からはime-modeが有効になるらしいし、IMEのことは将来に後回し。というか実際には、これやったあとさらにonkeyupイベントでチェックしてハネる、という手を使っている。

ああ、ごめんごめん、HTML部のソースはこうです。
数字のみ:<input type="text" style="ime-mode:disabled" onkeypress="return numberonly(event)" /> 英単語のみ:<input type="text" style="ime-mode:disabled" onkeypress="return wordonly(event)" />


jQuery

最近になってようやくjQueryを触ってみた。

いままでprototype.jsを使ってたけど、乗り換えたくなった。

prototype.jsはJavaScriptでrubyみたいに美しく書きたいというのが目的で、jQueryはJavaScriptでみんながやりたいことをできるだけ短く書きたいというのが目的。

あ。これだ。これ欲しかったやつだ。なんで今まで見なかったんだ自分。

特定の要素をマウスオーバーで背景色を変化させるようにしたいとき、prototype.jsだと

var target = $('target_element'); Event.observe(target, "mouseover", function(e) { target.style.backgroundColor = "#eeffcc"; }); Event.observe(target, "mouseout", function(e) { target.style.backgroundColor = "transparent"; });
だけど、jQueryだと
$('#target_element').hover(function() { $(this).background("#eeffcc"); }, function() { $(this).background("transparent"); }
となる。

さらにXPathとCSS3セレクタの組み合わせで、めちゃくちゃ細かい要素指定が一行でできる。prototype.jsでは何行かかるかわからないような指定、たとえば「id="contents"の中でhrefがhttp://www.sat.ne.jpで始まるa要素すべての文字色を変更する」は

$("#contents>a[@href^=http://www.sat.ne.jp]").color("#993344");
一発でできちゃう。素敵すぎる。

しかも圧縮版も公開されていて、そっちを使うとライブラリ自体のサイズが19KBしかないというのもすごい。(prototype.jsは70KB)

prototype.jsみたいに組み込みオブジェクトの定義を上書きしてないところもイイ。Arrayの挙動が変わると困ることもあるので。



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。