《多级分类》js组件介绍

一、演示demo


选择分类 - level 1


选择地区 - level 2

二、应用需求和思路

需求:多级分类,传统都是select下拉框联动来让用户操作,如果数据多了,就不直观。

思路:在QQ校友你选择学校的时候,就会发现这种弹出层式的应用。而我就是参考它的外观,自己封装了一个js组件

三、多级分类组件

基于jquery框架,以及jquery.tmpl插件实现:

封装要求
同个页面可多次使用;
实现简单的js接口,可以配置id,回调函数,联动几级;
                    var areaData = [
                        {
                            id:'1',
                            name:'香港',
                            py:'X',
                            items:[
                                {
                                    id:'11',
                                    name:'九龙',
                                    py:'J',
                                    items:[
                                        {...}
                                    ]
                                },
                                {...}
                            ]
                        }
                    ];

                    var opts = {
                            id:'area',
                            title:'地区',
                            data:areaData,
                            level:2,
                            callback:function(id,name){ //do...}
                    };

                    Fly.dialog(opts).init();
                
参数说明
id:关联id,点击那个元素就Open
title:弹出的dialog的标题设置,默认是”分类“
data:数据源,基础数据结构是:id,name,py,items,其中items可以相互嵌套
level:下拉框联动等级,默认是1
callback:回调函数,接受2个参数,一个是用户选择的的id,和name
涉及的文件
    css
    <link rel="stylesheet" type="text/css" href="YOUT PATH/css/fly.dialog.css" />

    script
    <script type="text/javascript" src="YOUT PATH/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="YOUT PATH/js/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="YOUT PATH/js/fly.dialog.js"></script>

    <script id="dailog-tpl" type="text/x-jquery-tmpl"> ...</script>
                

开发总结