这样的效果jquery有类似的插件库吗?
这个应该叫什么交互效果,有什么学名吗?
可以自己写,先分析一下结构,看问题看本质嘛。
主要由三部分组成,两个容器和两组操作按钮。
从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就好。
哎吖,说了这么多,不对的地方海涵哦。