Wijmo UI for the Web
KO Ribbon バインディング
Wijmo ユーザーガイド > 概念 > ウィジェットを統合するフレームワーク > Knockoutの使用 > 双方向のライブバインディング > KO Ribbon バインディング

データバインディングのオプション：

例：

この例では、リボンと組み合わせて使用する ViewModel が定義されています。このビューには、disabled プロパティがバインドされています。この値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。

ViewModel の作成：

ViewModel スクリプト
コードのコピー 
var viewModel = {
    var self = this;
    self.disabled = ko.observable(false);
};

バインドコントロールを使用したビューの作成：

ビューのマークアップ
コードのコピー 
<div id="ribbon" data-bind="wijribbon: { disabled: disabled }"> 
  <ul>
      <li><a href="#C1Editor1Format">Format</a></li>
      <li><a href="#C1Editor1insert">Customize Tab</a></li>                   
   </ul>
   <div id="C1Editor1Format">
   <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="strikethrough" 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="C1Editor1insert">
   <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>

関連トピック

ウィジェット

Ribbon

概念

Knockoutの使用
双方向のライブバインディング

参照

wijribbon メソッド

 

 

Copyright © GrapeCity inc. All rights reserved.