クイックスタート

このクイックスタートでは、Ribbon ウィジェットを HTML プロジェクトに追加し、ウィジェットをカスタマイズする方法を学びます。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

.html ページを作成し、依存ファイルへのリンクをプロジェクトに追加します。これを行うには、各プロジェクトのコンテンツ配信ネットワーク（CDN）ファイルにリンクします。CDN からの最新の依存ファイルは、wijmo cdnで参照できます。

ドロップダウンからリファレンスをコピーしてhead タグ内に貼り付けます

リファレンス	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script>

.html ドキュメントの body の中に以下のマークアップを配置します。メインの <div> 要素は Ribbon ウィジェットを作成し、jQuery でその id 属性を呼び出してウィジェットを初期化します。ネストされた要素は、リボン内のツールをそれぞれ作成します。

ドロップダウンからマークアップをコピーして body タグ内に貼り付けます

マークアップ	コードのコピー
<div id="ribbon"> <ul> <li><a href="#FormatTab">Format Tab</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="fontNameArial" name="fontname"/> <label for="fontNameArial" id="fn1" title="Arial">Arial</label> </li> <li> <input type="radio" id="fontNameCourier" name="fontname"/> <label for="fontNameCourier" id="fn2" title="Courier New">Courier New</label> </li> <li> <input type="radio" id="fontNameTimes" name="fontname"/> <label for="fontNameTimes" id="fn3" title="Times New Roman">Times New Roman</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="fontSizeSmall" name="fontsize"/> <label for="fontSizeSmall" id="small" title="Small">Small</label> </li> <li> <input type="radio" id="fontSizeMedium" name="fontsize"/> <label for="fontSizeMedium" id="medium" title="Medium">Medium</label> </li> <li> <input type="radio" id="fontSizeLarge" name="fontsize"/> <label for="fontSizeLarge" id="large" title="Large">Large</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="fontStyleBold"/> <label for="fontStyleBold" id="bold" title="Bold" class="wijmo-wijribbon-bold"></label> <input type="checkbox" id="fontStyleItalic"/> <label for="fontStyleItalic" id="italic" title="Italic" class="wijmo-wijribbon-italic"></label> <input type="checkbox" id="fontStyleUnderline"/> <label for="fontStyleUnderline" id="underline" title="Underline" class="wijmo-wijribbon-underline"></label> <input type="checkbox" id="fontStyleStrikeThrough"/> <label for="fontStyleStrikeThrough" id="strike" title="Strikethrough" class="wijmo-wijribbon-strike"></label> <input type="checkbox" id="fontStyleSubscript"/> <label for="fontStyleSubscript" id="subscript" title="Subscript" class="wijmo-wijribbon-sub"></label> <input type="checkbox" id="fontStyleSuperscript"/> <label for="fontStyleSuperscript" id="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</div> </li> </ul> </div> </div>

マークアップ

コードのコピー

<div id="ribbon">
    <ul>
        <li><a href="#FormatTab">Format Tab</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="fontNameArial" name="fontname"/>
                            <label for="fontNameArial" id="fn1" title="Arial">Arial</label>
                        </li>
                        <li>
                            <input type="radio" id="fontNameCourier" name="fontname"/>
                            <label for="fontNameCourier" id="fn2" title="Courier New">Courier New</label>
                        </li>
                        <li>
                            <input type="radio" id="fontNameTimes" name="fontname"/>
                            <label for="fontNameTimes" id="fn3" title="Times New Roman">Times New Roman</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="fontSizeSmall" name="fontsize"/>
                            <label for="fontSizeSmall" id="small" title="Small">Small</label>
                        </li>
                        <li>
                            <input type="radio" id="fontSizeMedium" name="fontsize"/>
                            <label for="fontSizeMedium" id="medium" title="Medium">Medium</label>
                        </li>
                        <li>
                            <input type="radio" id="fontSizeLarge" name="fontsize"/>
                            <label for="fontSizeLarge" id="large" title="Large">Large</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="fontStyleBold"/>
                           <label for="fontStyleBold" id="bold" title="Bold" class="wijmo-wijribbon-bold"></label>
                           <input type="checkbox" id="fontStyleItalic"/>
                           <label for="fontStyleItalic" id="italic" title="Italic" class="wijmo-wijribbon-italic"></label>
                           <input type="checkbox" id="fontStyleUnderline"/>
                           <label for="fontStyleUnderline" id="underline" title="Underline" class="wijmo-wijribbon-underline"></label>
                           <input type="checkbox" id="fontStyleStrikeThrough"/>
                           <label for="fontStyleStrikeThrough" id="strike" title="Strikethrough" class="wijmo-wijribbon-strike"></label>
                           <input type="checkbox" id="fontStyleSubscript"/>
                           <label for="fontStyleSubscript" id="subscript" title="Subscript" class="wijmo-wijribbon-sub"></label>
                           <input type="checkbox" id="fontStyleSuperscript"/>
                           <label for="fontStyleSuperscript" id="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</div>
            </li>
        </ul>
    </div>
</div>

<head> タグ内の参照の下に、ウィザードを初期化する次のスクリプトを追加します。

ドロップダウンからリファレンスをコピーしてhead タグ内に貼り付けます

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

<head> タグ内のスクリプトの下に、次の CSS スタイルを追加してウィジェットのサイズを設定します。

ドロップダウンからスタイルをコピーして head タグ内に貼り付けます

HTML ファイルを保存し、それをブラウザで開きます。このリボンは、実際のウィジェットで次のように表示されます。

関連トピック