图文列表选择行高亮效果

RT，想要实现图文列表选择行高亮效果

8.0可参考这个帖子~
活字格8.0新功能解密：六、颜值提升 - 图文列表样式提升
https://gcdn.grapecity.com.cn/fo ... 41048&fromuid=63496
(出处: 葡萄城产品技术社区)




8.0之前的实现方案：
1.以功能演示模板的图文列表页面为例



2.由于功能演示模板的图文列表子元素有背景图片，需要先将背景图片删除，因为白色的背景图片会盖住后续选择的效果


3.全局添加一个CSS文件，CSS文件见附件

1. .repeater-item
   
2. {
   
3.   transition: background-color 0.15s;
   
4. }
   
5. 
   
6. .repeater-item-selected{
   
7.   background-color: rgb(209,241,255);
   
8. }

复制代码

4.给图文列表单元格起名称，这里起名为cell


5.页面加载命令中添加JS代码即可，注意单元格名称和4一致

1. var className = "repeater-item-selected"
   
2. var cellName = "cell";
   
3. var repeaterCellType = Forguncy.Page.getCell(cellName)._cellType;
   
4. var currentRowHelper = repeaterCellType._currentRowHelper;
   
5. currentRowHelper.bind("RepeaterCurrentRowChanged", null, function (_, args) {
   
6.     var container = $("div[fgcname='" + cellName + "']");
   
7.     var items = container.find(".repeater-item");
   
8.     items.removeClass(className);
   
9.     var currentIndex = args.newCurrentRowIndex;
   
10.     currentIndex >=0 && items.eq(currentIndex).addClass(className);
    
11. });

复制代码

效果如下:


工程文件和资源文件见附件

Eric.Liang 发表于 2021-2-8 14:45
1.以功能演示模板的图文列表页面为例

当焦点离开的时候颜色就没了

谢厅 发表于 2021-12-24 18:12
当焦点离开的时候颜色就没了

不会呀，只有重新点击其他行之后颜色才会消失的

Eric.Liang 发表于 2021-12-24 18:23
不会呀，只有重新点击其他行之后颜色才会消失的

点击页面的其他空白地方，会丢失颜色，这个有什么方法解决吗？

heweigang 发表于 2022-1-7 16:01
点击页面的其他空白地方，会丢失颜色，这个有什么方法解决吗？

您好，这里按照比较常见的场景，实现的效果是这样的：点击页面中其他元素颜色不会变化，点击其他行颜色会重置，点击最上面空白处颜色会清空。

如果您有比较特殊的需求，可以试着在上面代码的基础上修改~

谢厅 发表于 2021-12-24 18:12
当焦点离开的时候颜色就没了

如果需要点击cell以外的区域，依然保留当前cell内的选中效果，代码改为以下即可：

var currentIndex = 0
var className = "repeater-item-selected"
var cellName = "cell";
var repeaterCellType = Forguncy.Page.getCell(cellName)._cellType;
var currentRowHelper = repeaterCellType._currentRowHelper;
currentRowHelper.bind("RepeaterCurrentRowChanged", null, function (_, args) {
    var container = $("div[fgcname='" + cellName + "']");
    var items = container.find(".repeater-item");
    items.removeClass(className);
    if(args.newCurrentRowIndex != -1){
        currentIndex = args.newCurrentRowIndex;
    }
    currentIndex >=0 && items.eq(currentIndex).addClass(className);
});

heweigang 发表于 2022-1-10 14:47
如果需要点击cell以外的区域，依然保留当前cell内的选中效果，代码改为以下即可：

var currentIndex = ...

给大佬点赞 感谢大佬分享~