Wijmo UI for the Web
AngularJS と wijribbon
Wijmo ユーザーガイド > Angular JS ディレクティブ > AngularJS と wijribbon
全て展開全て展開
すべて折りたたむすべて折りたたむ

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、Ribbon ウィジェットを HTML プロジェクト内で使用する方法について学習します。

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「AngularJS Directive Gallery」を参照してください。

  1. 新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
    • <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
    • <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。

    ドロップダウンからマークアップをコピーします

  2. 依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」のコンテンツ配信ネットワーク（CDN）ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。
    • 1 つは AngularJS 自身です。
    • もう 1 つは、Wijmo の Angular javascript 統合ライブラリです。

    ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます

  3. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、$scope パラメータでデータコンテキストを制御する単純なコントローラーを作成します。
    スクリプト
    コードのコピー 
    <script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {}
</script>
  4. <body> タグ内に次のマークアップを記述して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、Ribbon の「クイックスタート」を参照してください。 <wij-ribbon>ディレクティブを使用してウィジェットを作成し、いくつかの要素をネストしてタブ、グルップ、とボタンを作成します。
    • 2つの行項目を持つ順不同リストの<ul>要素でタブが作成されます。
    • 各行の<li>項目が次の<div>要素で指定されているタブへのハイパーリンクを持ちます。
    • 各タブの<div>要素でタブに該当するグループとボタンが含まれます。
    • 各タブ内にある順不同リスト<ul>ですべてのグルーピングが含まれます。
    • 各行項目<li>がグループを示します。また、行項目の終了タグ内の<div>がグルーピングラベルを追加します。
    • 指定されたbigbuttonクラスを<button>で使用して長いボタンが作成されます。
    • 小さいボタンの行を作成するには、<button>要素を入れ子した<span>要素が使用されます。
    • 指定されたdropdownbuttonクラスを<div>要素でドロップダウンボタンが作成されます。
    • <div>内に<button>と順不同リストの<ul>とともにラジオ<input>要素と各行項目のラベルも入れ子します。
    • 書式ボタンの行を作成するには、指定されたlistクラスをの<span>要素で使用し、各ボタンに対してチェックボックス<input>要素を入れ子します。これで、ユーザーが1つ以上のボタンを選択できます。
    マークアップ
    コードのコピー 
    <wij-ribbon id="ribbon" style="width: 500px;">
    <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>
</wij-ribbon>
  5. <head> タグ内で、スクリプトの直前でウィジェットを初期化します。また、CSS を使用して、［Format］タブの各グループのサイズを設定します。

    Drop ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます。

  6. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

AngularJS クイックスタート
クイックスタート
主な Ribbon 要素
Ribbon ボタン
ボタン アイコン

参照

wijribbon メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.