![[HOME]](http://sygnas.jp/img/blog/menu_home.png){kind=small}
![[このサイトについて]](http://sygnas.jp/img/blog/menu_about.png){kind=small}
ちょっとハマったのでメモ。
分かってしまえば非常に単純な話なんだけど、たぶん多くの人がハマるんじゃないかなというポイントをまとめてみました。
元ネタはこちらになります。
》jQuery1.4から追加されたjQuery.proxy()を試してみる | THE HAM MEDIA BLOG
jQueryを使って click()、hover()などのイベントを扱う時、多くのサンプルコードではこんな感じに書いてますよね。
$('.button').click(
function(){
alert( this.id );
}
);
大抵のものはこのままでも問題ないのですが、クラスやオブジェクト内の関数を扱いたい時にちょっと困ったことになります。
最近スマホ用サイトにも手を出し始めました（今更か）。
コーディング自体はナウでヤングな若者の間で流行のjQueryMobileを使えば比較的低コストでできちゃうのですが、問題になるのがPCとスマホの表示切り替え。
一番ラクチンなのはそれぞれのページからリンク貼って終わらせる方法ですが、たぶんそういうのは気付かれにくい。やはり自動的にスマホ用ページへ飛ばしたいですよね。
自分の要件はこんな感じです。
- PCユーザーにはスマホページの存在を意識させない。
- スマホユーザーがPC用ページにきたら自動でスマホ用に飛ばす。
- ただしPC用ページを見たい人のための手段は用意したい。
そんなわけで色々調べて、自分にあった方法をまとめてみました。
もっとスマートな方法はあると思いますが。
キャラクター人気投票で画像自体をフォームのラジオボタンやチェックボックスに
使いたかったので作りました。
<label>内に画像を置けばボタン代わりに出来るんですが、
選択状態によって画像を切り替えたかったのと、
IEだけ<label>内の画像に反応しないという、いつものアレな仕様もあったので……。
画像をラジオボタンやチェックボックスの代わりにすることで
デザインの自由度が上がるのと、入力状態がわかるのでユーザーの利便性が上がります。
詳しい使い方などはGitHubの配布ページでどうぞ。
》jQuery.sygImageRadio
複数の画像などをスクロールさせるのを「カルーセル」と言いますが
いざ使おうとしたら自分の求める仕様のものがなかったので（探すの面倒だったし）
作ってしまいました。
- スクロール対象の幅がバラバラでも大丈夫
- スクロールするだけのシンプルさ
というのが特徴です。
詳しい使い方などはGitHubの配布ページでどうぞ。
》jquery.syg_carousel
数値を３桁ごとに「,（カンマ）」で区切るのを調べていたら
WadadanetさんのAS3で数字を3桁毎にコンマ区切りにするが見付かり
目的を達することは出来たのですが、構文の中に「?=」や「?:」など意味のわからないものが。
Twitterで質問してみたら正規表現の「先読み」らしいことがわかりました。
大ざっぱに言うと、
マッチングはするけど、カーソルは先読み部分の前で止めちゃうよ
ということなのですね。
そんなわけで自分向けメモ。
javascriptで書くとこんなん。
var maho = "マホは咲の真似してリンシャンあがった"; document.write( maho.replace( /(マホは(?=.+あがった)咲の真似して)/, "$1カンして" ) ); // 先読みを使った結果 // マホは咲の真似してカンしてリンシャンあがった document.write( maho.replace( /(マホは咲の真似して).+あがった/, "$1カンして" ) ); // 先読みを使わない結果 // マホは咲の真似してカンして
先読みを使うと「あがった」の部分までマッチングするけど、
その直前までしか「$1」で取得してません。
従来の方法だと「あがった」まで取得してしまうので、
同じように置換すると後半部分が消えてます。
従来方法で同じ結果を出すならこんな感じでしょうか。
document.write( maho.replace( /(マホは咲の真似して)(.+あがった)/, "$1カンして$2" ) ); // マホは咲の真似してカンしてリンシャンあがった
これでもいいですが、「リンシャンあがった」の部分になんらかの処理を加えたい時、
カーソルは通り過ぎているのでちょっと面倒なことになります。
 |
咲-Saki- ラブじゃん マホちゃんの必殺技完成! スクウェア・エニックス スクウェア・エニックス 2010-01-29 |
