jQuery UIでAlerts (アラート)ラベルを作る方法
Contents
jQuery UIでAlerts (アラート)ラベルを作る方法
サンプル
アラートラベル
自作
HTMLコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Alert</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<h4>アラートラベル</h4>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>警告!</strong> Sample ui-state-highlight style.</p>
</div>
</div>
<br />
<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>エラー:</strong> Sample ui-state-error style.</p>
</div>
</div>
<br />
<div class="ui-widget">
<div class="ui-state-checked ui-corner-all " style="padding: 0 .7em;">
<p ><span class="ui-icon ui-icon-help" style="float: left; margin-right: .3em;"></span>
<strong>注意:</strong> Sample ui-state-checked style.</p>
</div>
</div>
<br />
<div class="ui-widget">
<div class="ui-priority-primary ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-check" style="float: left; margin-right: .3em;"></span>
<strong>成功</strong> Sample ui-priority-primary style.</p>
</div>
</div>
<br />
<div class="ui-widget">
<div class="ui-priority-secondary ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-notice" style="float: left; margin-right: .3em;"></span>
<strong>お知らせ</strong> Sample ui-priority-secondary style.</p>
</div>
</div>
<br />
<div class="ui-widget">
<div class="ui-state-error-text ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong class="ui-state-error-text">エラー:</strong> Sample ui-state-error-text style.</p>
</div>
</div>
<br />
<div class="ui-widget">
<div class="ui-state-disabled ui-corner-all " style="padding: 0 .7em;">
<p ><span class="ui-icon ui-icon-help" style="float: left; margin-right: .3em;"></span>
<strong>無効:</strong> Sample ui-state-disabled style.</p>
</div>
</div>
<br />
<style type="text/css">
.info_primary {
color:#084298;
background-color:#cfe2ff;
border: 1px solid #b6d4fe;
}
.success_primary {
color:#0f5132;
background-color:#d1e7dd;
border: 1px solid #badbcc;
}
.disabled {
color:#141619;
background-color:#d3d3d4;
border: 1px solid #bcbebf;
}
</style>
<h4>自作</h4>
<div class="ui-widget">
<div class="success_primary ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-check" style="float: left; margin-right: .3em;"></span>
<strong>成功</strong> Sample ui-priority-primary style.</p>
</div>
</div>
<div class="ui-widget">
<div class="info_primary ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-notice" style="float: left; margin-right: .3em;"></span>
<strong>お知らせ</strong> Sample ui-priority-secondary style.</p>
</div>
</div>
<br />
<div class="ui-widget">
<div class="ui-state-disabled disabled ui-corner-all" style="padding: 0 .7em;">
<p ><span class="ui-icon ui-icon-help" style="float: left; margin-right: .3em;"></span>
<strong>無効:</strong> Sample ui-state-disabled style.</p>
</div>
</div>
<body>
</html>デモ
CSS Framework
jQuery UIでは、CSSフレームワークで簡単なデザインオブジェクトを提供してくれています。
Interaction Cues
「Interaction Cues」では、メッセージに適したクラスを提供してくれています。
.ui-state-highlight
オブジェクトを選択済みやハイライトさせたい場合に適用するクラスです。
.ui-state-error
エラーメッセージなどのエレメントに適用するクラスです。
.ui-state-error-text
背景色のないエラーメッセージのエレメントに適用するクラスです。
.ui-state-disabled
無効のメッセージなどのエレメントに適用するクラスで、文字を薄っすら透明になるします。。
.ui-state-checked
ドキュメントには記載されていませんが、注意事項などのエレメントに適用するクラスと考えらえられます。
.ui-priority-primary
ボタンに優劣がある場合、優先度が高めのボタンに適用されるクラスになります。
.ui-priority-secondary
ボタンに優劣がある場合、優先度が低めのボタンに適用されるクラスになります。
その他
CSSフレームワークとして提供されるクラスとしては、少ないので、個人的に自作しました。
そのクラスがサンプルの「.info_primary」「.success_primary」「.disabled」などになります。
このようにほかの色やアイコンを使用することで、利用に応じたアラートダイアログも自作できるのではないでしょうか。
以上、ご参考まで。
