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のブラウザでも見れます。