ハイパーリンクの色を調整する

  • 作成者:ayuan0625
  • 編集回数:17次
  • 最終更新:FRInternational 于 2022-01-12
  • 一. 概要

    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);

    注:モバイル端末での表示に対応できない。


    Attachment List


    Theme: 帳票機能応用
    既に最初
    既に最後
    • Helpful
    • Not helpful
    • Only read