メニュー・アイテムの外観
基本のメニュー・アイテムには、太字テキストとCSS表示値"block"以外は特別なフォーマットはありません。使用しているレイアウトとテーマによっては、これを大幅に変更することが可能です。Visual LANSA V12 SP1以前に提供されている省略値のレイアウトには3つのテーマ、default、royal、grassがあります。
|
|
|
|
|
Default |
Royal |
Grass |
jQuery UIテーマの新しいレイアウトを使用している場合は、useJQueryUIThemeプロパティにtrueを設定することで、クリック可能項目の標準テーマの外観をメニュー・アイテムに取り入れることができます。
|
テーマに何も適用されていない、またはuseJqueryUIThemeプロパティにfalseが設定されている場合は、メニュー・アイテムは枠線のない白いボックス内に太字のテキストで表示されます。
この基本となるHTML構造は次のようになります。
<a class="std_menu" id="webletName">
<span class="std_menu_span1">
<span class="std_menu_span2">
Sample Menu Item
</span>
</span>
</a>
メニュー・アイテムが選択されると、<a>タグのクラスは"std_menu_selected"に変更されます。
メニュー・アイテムの基本的なスタイルは、スタイルシートでstd_menu とstd_menu_selectedクラスのプロパティを定義することで決定できます。例えば次のようになります。
a.std_menu, a.std_menu_selected {
color:#01478c;
border-style:solid;
border-color:#7db0e5;
border-width:0px 2px 1px 2px;
background-color:#c7dff4;
}
a.std_menu_selected {
background-color:#7db0e5;
}
左揃えのイメージの追加は次のようにします。
a.std_menu, a.std_menu_selected {
background-image:url('icon.png') no-repeat left center;
padding-left:32px;
}
イメージの半分2つを各スパンに適用し、"sliding doors" テクニックとして知られる方法を使って、更に複雑な"自動調整の"背景イメージを作成することもできます。