有个分栏菜单的界面,请问有类似的jquery-demo吗?

发布于 2022-09-03 07:38:21 字数 172 浏览 23 评论 0

图片描述

这样的效果jquery有类似的插件库吗?
这个应该叫什么交互效果,有什么学名吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

べ繥欢鉨o。 2022-09-10 07:38:21

可以自己写,先分析一下结构,看问题看本质嘛。

主要由三部分组成,两个容器和两组操作按钮。

从UI的角度来分析:左右分别是一个列表(ul > li),中间是四个按钮(button),底部两个按钮(button,返回和下一步就当不存在了)。

<ul class="left">
  <li>空山新雨后</li>
  <li>天气晚来秋</li>
</ul>
<div class="m-btn">
    <button>add</button>
    <button>remove</button>
    <button>addAll</button>
    <button>removeAll</button>
</div>
<ul class="right">
  <li>明月松间照</li>
  <li>清泉石上流</li>
</ul>
<div class="b-btn">
    <button>save</button>
    <button>cancel</button>
</div>

好,UI差不多分析出来。

从数据的角度分析一下,两边的列表可以看成是两个数组,中间的按钮自然能对数组进行增删改查(这里只用到增删)。

var leftData = [
        {
            id: 0,
            text: '空山新雨后'
        },
        {
            id: 1,
            text: '天气晚来秋'
        }
    ],
    rightData= [
        {
            id: 2,
            text: '明月松间照'
        },
        {
            id: 3,
            text: '清泉石上流'
        }
    ];

数组的操作,可以查Array对象的方法。

最后就是根据数据,渲染UI,相当于解析json。

保存的时候,两组数据的改变你都了如指掌,就不用去操作列表的DOM啦,直接用data就好。

哎吖,说了这么多,不对的地方海涵哦。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文