Wijmo UI for the Web
マークアップとスクリプティング
Wijmo ユーザーガイド > ウィジェット > Ribbon > マークアップとスクリプティング
全て展開全て展開
すべて折りたたむすべて折りたたむ

次の HTML 要素は、完全なリボン UI の作成に使用します。

マークアップ
コードのコピー 
<div id="ribbon" >
    <ul>
        <li><a href="#FormatTab">Format</a></li>
        <li><a href="#CustomizeTab">Customize Tab</a></li>
    </ul>
    <div id="FormatTab">
        <ul>
            <li id="actiongroup">
                <button title="Save" class="wijmo-wijribbon-bigbutton" name="save">
                    <div class="wijmo-wijribbon-save"></div>
                    <span>Save</span>
                </button>
                <span class="wijmo-wijribbon-list">
                    <button title="Undo" class="wijmo-wijribbon-undo" name="undo"></button>
                    <button title="Redo" class="wijmo-wijribbon-redo" name="redo"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="Preview" class="wijmo-wijribbon-preview" name="preview"></button>
                    <button title="Clean up" class="wijmo-wijribbon-cleanup" name="cleanup"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="Cut" class="wijmo-wijribbon-cut" name="cut"></button>
                    <button title="Copy" class="wijmo-wijribbon-copy" name="copy"></button>
                    <button title="Paste" class="wijmo-wijribbon-paste" name="paste"></button>
                    <button title="Select All" class="wijmo-wijribbon-selectall" name="selectall"></button>
                </span>
                <div>Actions</div>
            </li>
            <li id="fontgroup" >
                <div title="Font Name" class="wijmo-wijribbon-dropdownbutton">
                    <button title="Font Name" name="fontname">Font Name</button>
                    <ul>
                        <li>
                            <input type="radio" id="C1Editor1_ctl74" name="fontname"></input>
                            <label for="C1Editor1_ctl74" name="fn1" title="Arial">Arial</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl76" name="fontname"></input>
                            <label for="C1Editor1_ctl76" name="fn2" title="Courier New">Courier New</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl78" name="fontname"></input>
                            <label for="C1Editor1_ctl78" name="fn3" title="Garamond">Garamond</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl80" name="fontname"></input>
                            <label for="C1Editor1_ctl80" name="fn4" title="Tahoma">Tahoma</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl82" name="fontname"></input>
                            <label for="C1Editor1_ctl82" name="fn5" title="Times New Roman">Times New Roman</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl84" name="fontname"></input>
                            <label for="C1Editor1_ctl84" name="fn6" title="Verdana">Verdana</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl86" name="fontname"></input>
                            <label for="C1Editor1_ctl86" name="fn7" title="Wingdings">Wingdings</label>
                        </li>
                    </ul>
                </div>
                <div title="Font Size" class="wijmo-wijribbon-dropdownbutton">
                    <button title="Font Size" name="fontsize">Font Size</button>
                    <ul>
                        <li>
                            <input type="radio" id="C1Editor1_ctl104" name="fontsize"></input>
                            <label for="C1Editor1_ctl104" name="xx-small" title="VerySmall">VerySmall</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl106" name="fontsize"></input>
                            <label for="C1Editor1_ctl106" name="x-small" title="Smaller">Smaller</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl108" name="fontsize"></input>
                            <label for="C1Editor1_ctl108" name="small" title="Small">Small</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl110" name="fontsize"></input>
                            <label for="C1Editor1_ctl110" name="medium" title="Medium">Medium</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl112" name="fontsize"></input>
                            <label for="C1Editor1_ctl112" name="large" title="Large">Large</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl114" name="fontsize"></input>
                            <label for="C1Editor1_ctl114" name="x-large" title="Larger">Larger</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl116" name="fontsize"></input>
                            <label for="C1Editor1_ctl116"name="xx-large" title="VeryLarge">VeryLarge</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl117" name="fontsize"></input>
                            <label for="C1Editor1_ctl117" name="40pt" title="40pt">40pt</label>
                        </li>
                    </ul>
                </div>
                <span class="wijmo-wijribbon-list">
                    <button title="Background Color" class="wijmo-wijribbon-bgcolor" name="backcolor"></button>
                    <button title="Font Color" class="wijmo-wijribbon-color" name="fontcolor"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <input type="checkbox" id="C1Editor1_ctl133"></input>
                    <label for="C1Editor1_ctl133" name="bold" title="Bold" class="wijmo-wijribbon-bold"></label>
                    <input type="checkbox" id="C1Editor1_ctl134"></input>
                    <label for="C1Editor1_ctl134" name="italic" title="Italic" class="wijmo-wijribbon-italic"></label>
                    <input type="checkbox" id="C1Editor1_ctl135"></input>
                    <label for="C1Editor1_ctl135" name="underline" title="Underline" class="wijmo-wijribbon-underline"></label>
                    <input type="checkbox" id="C1Editor1_ctl136"></input>
                    <label for="C1Editor1_ctl136" name="strike" title="Strikethrough" class="wijmo-wijribbon-strike"></label>
                    <input type="checkbox" id="C1Editor1_ctl137"></input>
                    <label for="C1Editor1_ctl137" name="subscript" Title="Subscript" class="wijmo-wijribbon-sub"></label>
                    <input type="checkbox" id="C1Editor1_ctl138"></input>
                    <label for="C1Editor1_ctl138" name="superscript" title="Superscript" class="wijmo-wijribbon-sup"></label>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="Template" class="wijmo-wijribbon-template" name="template"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="RemoveFormat" class="wijmo-wijribbon-removeformat" name="removeformat"></button>
                </span>
                <div>Font</div>
            </li>
        </ul>
    </div>
    <div id="CustomizeTab">
        <ul>
            <li>
                <div title="Table" class="wijmo-wijribbon-splitbutton">
                    <button title="customize button" name="customcommand">Click Me</button>
                </div>
                <div>Customize Group</div>
            </li>                           
        </ul>
    </div>
</div>

次のスクリプトは wijribbon ウィジェットを初期化します。

スクリプト
コードのコピー 
<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#ribbon").wijribbon({
            click: function (e, cmd) {
                alert(cmd.commandName);
            }
        })
    });
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。［Font Name］および［Font Size］ボタンをクリックすると、項目のリストが表示されます。［Customize］タブをクリックすると、［Click Me］ボタンが表示されます。

シンプルリボン

次のマークアップとスクリプトを使用すると、簡易リボン UI 作成を作成できます。

サンプルマークアップおよびスクリプト

また wijribbon に CSS スタイルを追加することもできます。次の例では、簡易 wijribbon の幅と背景色を指定しています。

CSS スタイルを追加する方法

次にウィジェットを初期化する必要があります。プロジェクトに次のスクリプトを追加します。

ウィジェットを初期化するには

関連トピック

クイックスタート
主な Ribbon 要素

参照

wijribbon メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.