【解放区在住氷翠 緑の閃光】氷翠のお気楽日記

widgetの警告とハイライト

2017-02-12 18:45

javascript > Jquery > 開発

たぶん、氷翠はよく使う。

JqueryのUIで用意されているものはどれも使い勝手がよいと思う。
もちろん、その場面にもよるだろうけど。
現在、氷翠が作成しているアプリケーションでは使い勝手がいいほうだ。

で、まぁ結構使うので、HTMLのメモを残しておこうと。

下がエラーのHTML。上の画像では上のピンクの方だ。

<div class="error">
    <div class="ui-widget">
        <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
            <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
            <strong>Alert:</strong> 文字列文字列文字列文字列文字列</p>
        </div>
    </div>
</div>

次にこれがハイライトのHTML。画像では下の黄色の方だ。

<div class="highlight">
    <div class="ui-widget">
        <div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;">
            <p><span class="uui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
            <strong>Alert:</strong> 文字列文字列文字列文字列文字列</p>
        </div>
    </div>
</div>

単純に設定のclass名が違うというだけ。
最初のDIVタグのクラス名は自分でつけたものだが、「ui-widget」というクラスの下位のクラス「ui-state-error」と「ui-state-highlight」の違いだ。
あと、違うのは使われている画像があるのだが、spanタグの「ui-icon-alert」というクラス名と「ui-icon-info」というクラス名。

コメントを残す

メールアドレスが公開されることはありません。