Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8737

IM-FormaDesignerでテキストボックスの入力可否をチェックボックスで制御する

$
0
0

はじめに

intra-martのIM-FormaDesignerでは、ローコード開発を行うことが可能です。
画面上の制御が必要な場合は、JavaScriptでスクリプトを実行することも可能です。

やったこと

IM-FormaDesignerでテキストボックスの入力可否をチェックボックスで制御した。

if( document.getElementsByName("checkbox")[0].value == 1){
    // テキストボックスの背景色をグレーに変更する
    $('input[name="textbox"]').css({
        'background-color': '#CCCCCC'
    });
    // 透明の箱をテキストボックスに重ねて入力不可にする
    document.getElementById('clearbox').style.left = '20px';
} else {
    // テキストボックスの背景色を白に変更する
    $('input[name="textbox"]').css({
        'background-color': '#FFFFFF'
    });
    // 透明の箱を元の位置に戻して入力可にする
    document.getElementById('clearbox').style.left = '520px';
}

わかったこと

JavaScriptを使用してCSSの要素を制御することで、パッケージ製品やフレームワークの制約がある中でも、カスタマイズなしで画面制御を行うことが可能である。なぜならば、要素の取得と書き換えがプログラムで制御できれば、自由に制御ができるからです。

つぎにやること

パッケージ製品やフレームワークとの結合度を意識しながら、他の実装を検討する

メリット

バージョンアップによる影響を最低限に抑えられる


Viewing all articles
Browse latest Browse all 8737

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>