表格和卡片视图模式切换js插件-插件特效-ICode联盟

isomorphic-table-cards.js是一个JavaScript库,可以在表格视图和卡片网格视图之间切换，平稳过渡效果。数据格式var data = [ { "name": "Amazonite", "chakra": 4, "spirit": "Self-determination" }, { "name": "Amber", "chakra": 3, "spirit": "Makes carefree" }, { "name": "Amethyst", "chakra": 7, "spirit": "Alertness, justice, inner peace", "body": "Good for the skin; alleviates pain, tension and lowers high blood pressure." }, // ... ].sort(function(a, b){ return (a.chakra+a.name).localeCompare(b.chakra+b.name); });数据呈现在视图上let itc itc = new IsomorphicTableCards({ // row and card dimesions rowHeight: 31, cardHeight: 94, cardWidth: 210, // item template itemTemplate: d => `

${d.name}

${d.spirit}

`, // sort functions sort: (data, key, direction) => { if(key=='chakra'){ return data.sort(direction>0 ? (a, b) => (a.chakra+a.name).localeCompare(b.chakra+b.name) : (a, b) => ((8-a.chakra)+a.name).localeCompare((8-b.chakra)+b.name) ) }else{ return data.sort((a, b) => direction*a.name.localeCompare(b.name)) } } }); itc.render()需要的时候呈现itc.redraw()切换视图的模式itc.redraw('table') itc.redraw('cards')

表格和卡片视图模式切换js插件

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

未经允许不得转载： ICode联盟 » 插件特效 » 表格和卡片视图模式切换js插件

猜你喜欢更多»

项目推荐更多»

[开源]开源免费的多协议物联网智能网关系统，让物联网实施更简单 (2)

[开源]高性能、安全、功能强大的开源物联网调试和管理解决方案 (0)

[开源]一个开源的物联网基础开发平台，支持设备快速接入、高并发 (0)

[开源]含鸿蒙APP、微信小程序、云平台和后台的充电设备管理系统 (0)

[开源]一站式物联网开发基础平台，助企业快速实现精细化数据管理 (0)