iPhoneでa:hoverを実装する

Read More

タイトルにはa:hoverを実装すると書いたが、iPhoneにはマウスオーバとかいう概念がない。

まあマウスが無いんだから当たり前だけど。


なのでhover、つまりマウスオーバ時のリンク色変更というのとは厳密には違うことになるねぇ。

iPhoneでは指が乗っているか外れたかというイベントが取れるので、
今回はタッチスタートとタッチエンドというイベントでリンク色を変更するというものになる。



実装方法は以下の通り。



まず前提条件としてjQueryを利用している。

自分の場合はスマホ用に最適化するのにjQueryMobileを使っているので、リンク色一つの変更でも、jQueryMobileのそれと競合しないように意識してやらなければならない。

やれやれ。


■タッチスタートとタッチエンドでリンク色を変更する
<script type="text/javascript">
<!--
$(function() {
  $("a.touch").bind({
    touchstart: function () {
      $(this).removeClass().addClass("touchstart");
    }
  });
});
$(function() {
  $("a.touch").bind({
    touchend: function () {
      $(this).removeClass().addClass("touchend");
    }
  });
});
//-->
</script>
<style type="text/css">
<!--
a {
color: #2489CE;
font-weight: bold;
}
a.:link {
color: magenta;
}
a:visited {
color: red;
}
a:hover {
color: yellow:
}
a:active {
color: lime;
}

a.touchstart {
color: gray;
}
a.touchend {
color: green;
}

.touch {
background: red;
}
//-->


なお、CSSの a から a:active まではぶっちゃけいらない。
ちゃんとCSSが上書きされるのを証明する為のようなもん。

あれ書いちゃうとjQueryMobileで作ったリンクのボタンとばっちり競合するので実際に組む場合は削除している。


んでリンク色を変更したいa要素に、以下のようにtouchクラスを適用する。

<div><a href="{リンク先}" class="touch">{表示名}</a></div>


これで準備OK。

あとは実機で試してみればいい。



動作の仕組みを簡単に説明すると、
javascriptでタッチスタートとタッチエンドのイベントをキャッチしてそのタイミングでクラスを書き換えている。


CSS部分は、a から a:active より後に a.touchstart と a.touchend を持ってくることで、touchクラスを適用したa要素のみCSSで上書きしている。

こうすることでjQueryMobileのリンクのボタンをその対象から外すことができるというわけ。

逆に、色を変えたければやればいいんじゃない?


jQueryのaddClassでクラスを追加/変更しているのだけど、上記のまま実装して動作してみてもらえばわかるように、touchクラスを丸々上書きする形となる。

なので上記のものをそのまま実行すると、背景の色が最初は赤だったのが動作後は無指定になっていると思う。


でもjQueryではclassを上書きしても内部的にはまだ使える形で残っているので、touchクラスが見た目から無くなってもきちんと反応してくれる。


まあそれが気持ち悪いと言う人は、
$(this).removeClass().addClass("touchstart touch");

と書けば同時に二つのクラスを追加してくれるのでそうすればいい。




--
あと最近気が付いたけどjQueryMobileではページ内リンクが使えないのね。

どうやら"#"(シャープ)を別の用途で使っているためのようだけど。

うーん、これは結構痛いんですけど。


まあVerUpすればその内使えるようになるのかな。




なったらいいなあ


Category "HTML・JS・CSS" の最新記事