jQuery UI CSS Framework を使ってみる(エラーメッセージ編)

jQuery UI CSS Frame work を使って、エラーメッセージのような見た目の
モジュールを表示してみる。

サンプルは↓
エラー: 入力値が正しくありません。

コードは、こちら
<div style="padding-left:10px"
   class="ui-state-error ui-corner-all">
  <p>
    <span style="float: left; margin: 0.3em 0.3em 0 0" 
      class="ui-icon ui-icon-alert"></span>
    <strong>エラー:</strong> 入力値が正しくありません。
  </p>
</div>

ポイントは、
  • divで囲む。

    • classにui-state-errorを指定する(枠と背景、文字色を赤くする)
    • classにui-corner-allを指定する(4つ角を丸くする)

  • divの中に中身をpタグで囲み、空のspanタグを入れる

    • CSS Spliteで「!」アイコンを表示させるためのもの
    • classにui-iconとui-icon-alertを指定する。
    • ui-icon-alertをui-icon-infoなどに変えると、別のアイコンになる

  • ↑のspanの後に好きな文言(HTML)を記述する
です。
すべてCSSなので、javascriptがOFFのブラウザでも見れます