一. 概要
1.効果
クリックにより色を調整する:ハイパーリンクをクリックすると、ハイパーリンクのテキストの色が変わり、ハイパーリンクが既にクリックされたことを意味します。
カーソルを合わせると色が変わり、離れると元の色に戻る:マウスでハイパーリンクテキストにカーソルを合わせると、テキストの色が変わり、カーソルがテキストから離れると、色が青に戻ります(下図を参照)。
2.実現方法
一般帳票:プレビュー方法画面の設定にロード終了イベントを追加します。
ダッシュボード:帳票ブロックに初期化イベントを追加します。
二.例示
1.一般帳票
希望するプレビュー方法設定ページにロード終了イベントを追加します(下図)。
1.クリックにより色を調整するJavaScriptコードは次のとおりです。
$('.linkspan').mousedown(function(){$(this).css('color','red');}); //クリックして色を変更
2.カーソルを合わせると色が変わり、離れると元に戻る JavaScriptコードは次のとおりです。
$('.linkspan').mouseover(function(){$(this).css('color','red');}); //マウスを止める
$('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //マウスを離す
注:モバイル端末での表示に対応できない。
2.ダッシュボード
ハイパーリンクの所在する帳票ブロックに初期化後イベントを追加します(下図)。
1.クリックにより色を調整するJavaScriptコードは次のとおりです。
setTimeout(function() {$("span.linkspan").bind("click",function() {$(this).css("color", "red");})}, 100); //クリックして色を変更
2.カーソルを合わせると色が変わり、離れると元に戻る JavaScriptコードは次のとおりです。
setTimeout(function() {$("span.linkspan").mouseover(function() {$(this).css("color", "red");}) //マウスを止めると色を変更
$("span.linkspan").mouseleave(function() {$(this).css("color", "blue");}) //マウスを離すと元に戻す}, 100);
注:モバイル端末での表示に対応できない。