JSによるウィジェットの透明度変更

  • 作成者:ayuan0625
  • 編集回数:4次
  • 最終更新:ayuan0625 于 2026-01-27
  • 注意:

    V11.5.1 バージョンより、デザイナでの「ダッシュボード新規作成」入り口が取り下げられます。既存のダッシュボードテンプレートは引き続き編集およびアクセスが可能です。FineVisデータ可視化を使用することをよりおすすめします。専門のデータ可視化ツールとして、ダッシュボードよりも可視化テンプレートの作成効率が高く、効果もより豊富です。

    一.概要

    1.問題概要

    暗い背景色を使用してダッシュボードを開発する際、ウィジェットを挿入すると背景との調和が取れず違和感が生じることがあります。以下の図のように:

    1.png

    ウィジェットの透明度を設定することで、それを背景に自然に溶け込ませることを期待します。以下の図のように:

    2.png

    2.実現の考え方

    ウィジェットに[初期化後イベント]を追加し、JavaScript を利用して透明度を設定します。

    二.例

    1.帳票設計

    1)ダッシュボードを新規作成し、body の[レイアウト方式]を「絶対レイアウト」に変更します。

    3.png

    2)body の背景色を暗い色に設定します。

    4.png

    3)[日付ウィジェット]を追加し、[初期化後イベント]を以下の図のように設定します:

    5.png

    JavaScript コードは以下の通りです:

    setTimeout(function() {
    $("div[widgetname=DATEEDITOR0]").css({
    'opacity': '0.3'
    });
    }, 50);

    $("div[widgetname=ウィジェット名]")でウィジェットを特定できます。なお、ウィジェット名は全て大文字で記述する必要があります。

    2.効果プレビュー

    帳票を保存し、「PC側プレビュー」をクリックすると、効果は以下の図のように:

    6.png

    注意:モバイル端末はサポートされていません。

    三.テンプレートのダウンロード

    テンプレートをダウンロードするにはこちらをクリックしてください:JSによるウィジェットの透明度変更.frm

    Attachment List


    Theme: FineReport カスタム開発
    既に最初
    既に最後
    • いいね
    • 良くない
    • 閲覧しただけ