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

Question

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

Answer 1

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

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

从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就好。

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