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

表格和卡片视图模式切换js插件源码下载

看看谁在用

查看文件结构

文件大小:0.00M

资源分类: 插件-背景和布局

更新时间: 2021-05-20

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 => `<div class="item chakra${d.chakra}" id="${d.name}">
      <div class="c1">
        ${d.name}
      </div>
      <div class="c2">
        ${d.spirit}
      </div>
    </div>
  `,
  // 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插件

正在加载文件目录...

也许你还喜欢

  1. 创意css+svg图片选择打钩效果
  2. HTML客户案例卡片布局样式
  3. css图片卡片文字介绍边框发光特效
  4. Bootstrap页面网格布局和列表布局切换插件
  5. jQuery卡片式叠加图文感言布局
  6. CSS3+SVG卡片布局鼠标悬停特效
漂亮的网站顶部导航菜单带下拉
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2