Wijmo功能区compactMode不起作用

Question

我正在尝试在compactMode中为wijmo功能区重新创建demo example，但它似乎不起作用。

这是a sample

$(document).ready(function() {
  $("#ribbon").wijribbon({
    click: function(e, cmd) {
      // the funtion is called when the ribbon command button is clicked. 
      alert(cmd.commandName);
    },
    compactMode: true
  });
});

#ribbon {
  width: 500px;
}
#actiongroup,
#actiongroup>div {
  width: 200px;
}
#fontgroup,
#fontgroup>div {
  width: 250px;
}

<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20142.45.min.js"></script>
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20142.45.min.css" rel="stylesheet" />
<link href="http://cdn.wijmo.com/themes/arctic/jquery-wijmo.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="ribbon">
  <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" data-role="none">
          <div class="wijmo-wijribbon-save"></div> <span>Save</span>

        </button><span class="wijmo-wijribbon-list"> 
                                    <button title="Undo" class="wijmo-wijribbon-undo" name="undo" data-role="none">  
                                    </button> 
                                    <button title="Redo" class="wijmo-wijribbon-redo" name="redo" data-role="none"> 
                                    </button> 
                                </span><span class="wijmo-wijribbon-list"> 
                                    <button title="Preview" class="wijmo-wijribbon-preview" name="preview" data-role="none"> 
                                    </button> 
                                    <button title="Clean up" class="wijmo-wijribbon-cleanup" name="cleanup" data-role="none"> 
                                    </button> 
                                </span><span class="wijmo-wijribbon-list"> 
                                    <button title="Cut" class="wijmo-wijribbon-cut" name="cut" data-role="none"> 
                                    </button> 
                                    <button title="Copy" class="wijmo-wijribbon-copy" name="copy" data-role="none"> 
                                    </button> 
                                    <button title="Paste" class="wijmo-wijribbon-paste" name="paste" data-role="none"> 
                                    </button> 
                                    <button title="Select All" class="wijmo-wijribbon-selectall" name="selectall" data-role="none"> 
                                    </button> 
                                </span> 
        <div>Actions</div>
      </li>
      <li id="fontgroup">
        <div title="Font Name" class="wijmo-wijribbon-dropdownbutton">
          <button title="Font Name" name="fontname" data-role="none">Font Name</button>
          <ul>
            <li>
              <input type="radio" id="C1Editor1_ctl74" name="fontname" data-role="none"></input>
              <label for="C1Editor1_ctl74" name="fn1" title="Arial">Arial</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl76" name="fontname" data-role="none"></input>
              <label for="C1Editor1_ctl76" name="fn2" title="Courier New">Courier New</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl78" name="fontname data-role=" none ""></input>
              <label for="C1Editor1_ctl78" name="fn3" title="Garamond">Garamond</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl80" name="fontname" data-role="none"></input>
              <label for="C1Editor1_ctl80" name="fn4" title="Tahoma">Tahoma</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl82" name="fontname" data-role="none" data-role="none"></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" data-role="none"></input>
              <label for="C1Editor1_ctl84" name="fn6" title="Verdana">Verdana</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl86" name="fontname" data-role="none"></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" data-role="none"></input>
              <label for="C1Editor1_ctl104" name="xx-small" title="VerySmall">VerySmall</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl106" name="fontsize" data-role="none"></input>
              <label for="C1Editor1_ctl106" name="x-small" title="Smaller">Smaller</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl108" name="fontsize" data-role="none"></input>
              <label for="C1Editor1_ctl108" name="small" title="Small">Small</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl110" name="fontsize" data-role="none"></input>
              <label for="C1Editor1_ctl110" name="medium" title="Medium">Medium</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl112" name="fontsize" data-role="none"></input>
              <label for="C1Editor1_ctl112" name="large" title="Large">Large</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl114" name="fontsize" data-role="none"></input>
              <label for="C1Editor1_ctl114" name="x-large" title="Larger">Larger</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl116" name="fontsize" data-role="none"></input>
              <label for="C1Editor1_ctl116" name="xx-large" title="VeryLarge">VeryLarge</label>
            </li>
            <li>
              <input type="radio" id="C1Editor1_ctl117" name="fontsize" data-role="none"></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" data-role="none"></input><label for="C1Editor1_ctl133"
                                    name="bold" title="Bold" class="wijmo-wijribbon-bold"></label><input type="checkbox"
                                        id="C1Editor1_ctl134" data-role="none"></input><label for="C1Editor1_ctl134" name="italic" title="Italic"
                                            class="wijmo-wijribbon-italic"></label><input type="checkbox" id="C1Editor1_ctl135" data-role="none"></input><label
                                                for="C1Editor1_ctl135" name="underline" title="Underline" class="wijmo-wijribbon-underline"></label><input
                                                    type="checkbox" id="C1Editor1_ctl136" data-role="none"></input><label for="C1Editor1_ctl136" name="strike"
                                                        title="Strikethrough" class="wijmo-wijribbon-strike"></label><input type="checkbox"
                                                            id="C1Editor1_ctl137" data-role="none"></input><label for="C1Editor1_ctl137" name="subscript" title="Subscript"
                                                                class="wijmo-wijribbon-sub"></label><input type="checkbox" id="C1Editor1_ctl138" data-role="none"></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" data-role="none"> 
                                                                        </button> 
                                                                    </span><span class="wijmo-wijribbon-list"> 
                                                                        <button title="RemoveFormat" class="wijmo-wijribbon-removeformat" name="removeformat" data-role="none"> 
                                                                        </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" data-role="none">Click Me</button>
        </div>
        <div>customize group</div>
      </li>
    </ul>
  </div>
</div>

知道出了什么问题吗？

无法在jsfiddle中创建相同的响应。

Answer 1

在此链接上回复了同样的内容： http://wijmo.com/topic/ribbon-in-compactmode/

注意：使用版本45时，版本47中添加了compactMode功能。