请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

wangqgsunway

中级会员

84

主题

224

帖子

740

积分

中级会员

积分
740
wangqgsunway
中级会员   /  发表于:2017-12-11 10:50  /   查看:4249  /  回复:4
本帖最后由 wangqgsunway 于 2017-12-12 13:30 编辑

blob848786926.png blob442309264.png
自定义加上的按钮的样式在显示的时候样式被清理,我想保留自己加的样式(背景图),请问应该在哪里修改

4 个回复

倒序浏览
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-12-11 17:20:51
沙发
您好:

这个问题正在处理中,有结果了我再回复您。
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-12-12 12:14:32
板凳
您好,如果您要按照框架的形式来加,您需要
首先在ribbon.html中添加对应的tab,这个您已经完成了
在目标tab下添加按钮的dom结构这里有点问题
因为框架限制无法直接通过style设置样式,在js的运行过程中会被替换掉。
您参考下面的添加方式:
  1.                                 <li id="test">
  2.                                         <div class="gcui-ribbon-list">
  3.                                                 <button title="Test" data-button-size="50px"
  4.                                                                 data-bind="attr: { title: res.ribbon.test.test }" class="gcui-ribbon-bigbutton"
  5.                                                                 name="">
  6.                                                         <span class="test"></span>
  7.                                                         <span data-bind="text: res.ribbon.test.test">Test</span>
  8.                                                 </button>
  9.                                         </div>
  10.                                         <div data-bind="text: res.ribbon.test.test">Test</div>
  11.                                 </li>
复制代码

上述代码添加到指定tab的dom中。
之后在ribbon.css中添加对应的样式:
  1. .ribbon div.gcui-ribbon .ui-icon.test {
  2.     background-image: url(../ribbon/test.png);
  3.         background-size: 100%;
  4. }
  5. .ribbon .gcui-ribbon .gcui-ribbon-group .ui-button:hover .ui-icon.test {
  6.     background-image: url(../ribbon/test.png);
  7.         background-size: 100%;
  8. }
复制代码

两端样式一个对应平时效果一个对应hover时效果。中间的样式您可以根据实际情况进行调整。
回复 使用道具 举报
wangqgsunway
中级会员   /  发表于:2017-12-12 13:29:46
地板
可以了,谢谢
回复 使用道具 举报
Clark.Pan讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2017-12-12 16:22:24
5#
不客气,有什么问题欢迎另开新帖进行询问。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部