多颜色标签点击之后保持原色的一次实践， Ext Panel下解决及通用方案思路

时间：2022-01-22 20:52:18

代码为片段, 需要自行设置全部环境方可全部运行.

案例背景

  • 使用Ext开发了一个表格,需要根据一列值来动态设置颜色. 效果如下:

    <a>多颜色标签点击之后保持原色的一次实践， Ext Panel下解决及通用方案思路
    • 说明: 不同行显示不同的内容, 作为标题行, 可以点击链接到其他地方.
  • 相应的代码如下
  •   if (record.data.OQMYWGWJSFX <= 0) {
    
      return Ext.String.format("<a class='company-link' href='#' onclick='Win_DataSources_Show(\"" + record.data.OrgID + "\")'>{0}</a>", record.data.OrgName);
    
  }
    
  else {
    
      return Ext.String.format("<a class='company-link' href='#' style='color:red' onclick='Win_DataSources_Show(\"" + record.data.OrgID + "\")'>{0}</a>", record.data.OrgName);
    
  }

关键在于<a> 链接点击之后默认会变色，可以通过伪类的方式去修改。例如：

a:link { text-decoration: none; color: Black; }

a:active { text-decoration: blink; }

a:hover { text-decoration: underline; }

a:visited { text-decoration: none; }

问题来了， 如何保证红色链接点击之后还是红色， 黑色的链接点击之后还是黑色呢？

解决方法的总结

href 变更法。

  • javascript:void(0)方式可以屏蔽跳转作用，也就是说从href = '#' => href = 'javascript:void(0)' 之后可以保持原本的颜色不变。

render函数触发强制颜色变更.

  • 在使用render时生成的链接设置出发在最后，比伪类定义的还要晚。 本例中的代码： Ext.String.format("<a class='company-link' href='#' style ='color:gray' 。。。
    • Ext中的render 也是采用js的方式实现，

总结

  • 回归标题，如何使多颜色的 <a>标签点击之后保持原色，本例中如果是通用的网页， 且在当前页，可以使用javascript:void(0) 来替换'#' 完成页面的重新定向。
  • 如果在Ext 框架下可以使用列的Render事件定义，完成逻辑定义
  • 更通用的情况，普通网页不同颜色跳转的方式，目前没有遇到，我想到的解决路径就是：
    • 定义不同颜色的<a>标签为不同class，这样在配合伪类使用的过程中，可以采用.class a:visited的方式去过滤显示与原本的颜色相同。
    • 使用属性选择器<a>[color:red]:visited 这样的方式去定义访问之后的颜色。

      如上通用的办法未验证，有知道的，或感兴趣可自行尝试。

相关文章