jquery - Wijmo ribbon compactMode does not work -
i trying re-create demo example wijmo ribbon in compactmode, seems not work.
here sample
class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $("#ribbon").wijribbon({ click: function(e, cmd) { // funtion called when ribbon command button clicked. alert(cmd.commandname); }, compactmode: true }); }); class="snippet-code-css lang-css prettyprint-override">#ribbon { width: 500px; } #actiongroup, #actiongroup>div { width: 200px; } #fontgroup, #fontgroup>div { width: 250px; } class="snippet-code-html lang-html prettyprint-override"><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>
any thought wrong?
not able create same response here can in jsfiddle.
the same has been replied on link: http://wijmo.com/topic/ribbon-in-compactmode/
note: compactmode feature added in version 47 while using version 45.
jquery wijmo
No comments:
Post a Comment