图文列表选择行高亮效果

Eric.Liang

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

Eric.Liang · Eric.Liang

本帖最后由 David.Zhong 于 2022-8-8 11:45 编辑

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

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

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

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

.repeater-item
{
transition: background-color 0.15s;
}
.repeater-item-selected{
background-color: rgb(209,241,255);
}

复制代码

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

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

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);
var currentIndex = args.newCurrentRowIndex;
currentIndex >=0 && items.eq(currentIndex).addClass(className);
});

复制代码

效果如下:

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

谢厅 · 谢厅

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

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

Eric.Liang · Eric.Liang

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

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

heweigang · heweigang

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

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

Chelsey.Wang · Chelsey.Wang

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

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

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

heweigang · heweigang

谢厅发表于 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);
});

Chelsey.Wang · Chelsey.Wang

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

var currentIndex = ...

给大佬点赞

感谢大佬分享~

		自动登录	找回密码
密码			立即注册

[已处理] 图文列表选择行高亮效果

最佳答案

7 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

评分

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

微信认证勋章

时代开发者征文活动

圣诞拼拼乐