Wijmo UI for the Web
主な Ribbon 要素
| Wijmo ユーザーガイド > ウィジェット > Ribbon > Ribbon 概念 > 主な Ribbon 要素 |
リボン（ページの上部に並べられるツールの集合）自体は、<div> マークアップを使用して作成されます。リボンの他のすべての要素は、メイン要素をタブにして、このメイン <div> 内にネストされます。以下に、これらがネストされている具体例を示すために、１つのタブと１つのグループから成り、コントロールがない単純なマークアップを示します。各要素の詳細は、以下で説明します。
リボンを作成するサンプルマークアップ
| サンプルマークアップ |
コードのコピー |
|---|---|
<div id="ribbon"> <ul> <li><a href="#FirstTab">Add Tab Names Here</a></li> </ul> <div id="FirstTab"> <ul> <li id="firstgroup"> Add buttons, spans, divs, lists, or inputs here. </li> </ul> </div> </div> | |
リボンのタブは、順序なしのリスト <ul> マークアップを使用して作成されます。リスト内の各行項目 <li> には、同じページ内のセクション（この例では、リボンのタブ）を示すシャープ記号 # 付きのハイパーリンクが含まれます。リボン内にある２つのタブのマークアップは次のようになります。
リボンのタブを作成するサンプルマークアップ
| サンプルマークアップ |
コードのコピー |
|---|---|
<div id="ribbon"> <ul> <li><a href="#FirstTab">First Tab</a></li> <li><a href="#SecondTab">Second Tab</a></li> </ul> <div id="FirstTab">Tab groups go here.</div> <div id="SecondTab">Tab groups go here.</div> </div> | |
リストにタブへのリンクを追加したら、タブ自体を追加します。それぞれ、メインのリボン <div> 要素内にネストしたまま、リストの下に <div> 要素として追加します。各タブには、それぞれ独自にいくつかのグループを入れることができます。
リボンのグループは、順序なしのリスト <ul> マークアップを使用して作成されます。各行項目 <li> が１つのグループです。その内側に、グループに入れるすべてのツールのマークアップをネストし、それらのツールの下に、リボングループのタイトルテキストを <div> 要素として提供します。リボンのタブ内にある２つのグループのマークアップは次のようになります。
 |
メモ：グループの幅を設定するには、CSS スタイルを使用します。例については、クイックスタートを参照してください。 |
リボンのグループを作成するサンプルマークアップ
| サンプルマークアップ |
コードのコピー |
|---|---|
<div id="ribbon"> <ul> <li><a href="#FirstTab">First Tab</a></li> </ul> <div id="FirstTab"> <ul> <li id="FirstGroup"> Buttons and dropdown lists go here. <div>First Group Title</div> </li> <li id="SecondGroup"> Buttons and dropdown lists go here. <div>Second Group Title</div> </li> </ul> </div> </div> | |
全て展開
すべて折りたたむ