jQuery UI ハイライト・エラー サンプル

画面上にメッセージを目立たせて表示するために、メッセージ領域を設けてテキストを表示する場合があると思いますが、 jQuery UI の Hightlight / Error を応用してみました。

以下のサンプルでは、「警告」ボタンを押すとメッセージ領域が黄色い背景で、 「エラー」ボタンを押すとメッセージ領域が赤い背景に変わりテキストを表示します。 しばらくすると背景色は元の色へ戻ります。 ※ jQuery UI のテーマによりデザインは違います。

コード

$(function() {
    $("#warn").click(function() {
        displayWarning("「警告」が押されたので ui-state-highlight で表示します。jQuery UI のテーマによりデザインは違います。");
        return false;
    });

    $("#error").click(function() {
        displayError("「エラー」が押されたので ui-state-error で表示します。jQuery UI のテーマによりデザインは違います。");
        return false;
    });
});

// エラー表示
function displayError(str) {
    var msg = $(".messageBar");
    
    msg
        .text(str)
        .addClass("ui-state-error");
    setTimeout(function() {
        msg.removeClass("ui-state-error", 1500);
    }, 500);
}

// 警告表示
function displayWarning(str) {
    var msg = $(".messageBar");
    
    msg
        .text(str)
        .addClass("ui-state-highlight");
    setTimeout(function() {
        msg.removeClass("ui-state-highlight", 1500);
    }, 500);
}
	

HTMLコード

<p class="messageBar" style="margin-top: 20px; border: 1px solid transparent; padding: 0.3em;">
下のボタンを押してください。
</p>
<div>
    <button id="warn">警告</button>
    <button id="error">エラー</button>
</div>