您好,如果您要按照框架的形式来加,您需要
首先在ribbon.html中添加对应的tab,这个您已经完成了
在目标tab下添加按钮的dom结构这里有点问题
因为框架限制无法直接通过style设置样式,在js的运行过程中会被替换掉。
您参考下面的添加方式:
- <li id="test">
- <div class="gcui-ribbon-list">
- <button title="Test" data-button-size="50px"
- data-bind="attr: { title: res.ribbon.test.test }" class="gcui-ribbon-bigbutton"
- name="">
- <span class="test"></span>
- <span data-bind="text: res.ribbon.test.test">Test</span>
- </button>
- </div>
- <div data-bind="text: res.ribbon.test.test">Test</div>
- </li>
复制代码
上述代码添加到指定tab的dom中。
之后在ribbon.css中添加对应的样式:
- .ribbon div.gcui-ribbon .ui-icon.test {
- background-image: url(../ribbon/test.png);
- background-size: 100%;
- }
- .ribbon .gcui-ribbon .gcui-ribbon-group .ui-button:hover .ui-icon.test {
- background-image: url(../ribbon/test.png);
- background-size: 100%;
- }
复制代码
两端样式一个对应平时效果一个对应hover时效果。中间的样式您可以根据实际情况进行调整。 |