子テーマにクラスを設定して、画面上の部品にクラス指定して、色々反映させるというのは以前絞込み条件設定画面のレイアウトでうまくいっていた。今回、条件のリセットボタンを作ろうとして、ボタンを配置したが、さすがにデフォルトのままだと見栄えがよろしく無いので、こちらもスタイルを変更しようとstyle.cssにクラス設定して使おうとした。
しかし、全然ボタンにスタイルが反映されてくれない。ボタンに直接style属性にあれこれ設定すれば有効になるのだけど、クラス指定だとうまくいかない。ボタン系は他のinputとは異なるのかな？あれこれやってみたけどうまくいかなかったので、とりあえず保留して操作系に移る事にした。
検索結果は、表形式で表示されるのだが、表示された行(行の上ならどこでもOK)をマウスで長押しすると、ポップアップなどが表示されるようにしようと思って実装を進めた。onmousedownやonmouseup、onmouseout等々思ったとおりの動作をしてくれたので、次はタイマー(setTimeout)を仕込んで、指定秒数経過したらポップアップなどを表示させようと目論んだ。
しかし、その前にマウスの無いスマホはどうなるのか？と思い、試してみると、案の定反応してくれない。調べてみると、mousedownの代わりにtouchstart等を使うと良いようで、タップできるかどうか事前に確認して切り替えるなどの方法が使えるそう。そしてさらに調べると、それらをwrappingしているのか、pointerdownなどのイベントが既に実装されているようだ。mousedownの代わりに、pointerdownを使ってみたら、想定通りPCでもスマホでも動作してくれた。
では、これを使って実装…と思ったのだが、PCはともかく、スマホの場合はブラウザ上で長タップし続けると、おそらくデフォで「文字の範囲選択」になるだろう。その辺りの処理をさせないようにする事もできる(イベントの破棄など)のだろうけれど、そこまでして長押し表示に拘るべきなのか？と考えた。
表で結果が表示され、特にボタンもリンクも無い場合、普通は何もできないと思うだろう。詳細表示させる為に「長押し(タップ)して下さい」と表示するのは、説明みないと操作できないという、UIとしては失敗作(自己満足)でしかない気がする。だったら既に確立している、ボタンや遷移でリンクさせるという方が、利用者へ考えさせるという負担を軽減する事にもなるんじゃないか？
今回、イベントをjQueryでいくつか書いてみたけれど、例えば…
function foo() {
var newtr = document.createElement( 'tr' ) ;
jQuery( newtr ).on( 'pointerdown', bar ) ;
}
みたいな感じ。この’pointerdown’は単なる文字列だから、変数などで状況に応じたイベントにハンドラを登録できるというやり方を今回学んだ。jQuery自体がまだまだ使いこなせていないけど、ちょっと縁から深遠を覗き込んだような気がする。ある意味、メソッド名を自動生成するようなものだから、今回のようなプログラムで色々イベントハンドラ登録したい時は有用な気がしてる。
とりあえず、今回の件に関しては、第一要素にAnchorを貼って、そこにidとonclickをセットし、ポップアップで簡易表示か詳細表示を選ばせるという処理にする予定だけど、アンカーの設定やハンドラの設定も、同じようにjQueryでやれそうかな。