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

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

这样的效果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就好。

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

【热门文章】
【热门文章】