一点点关于JS的东西:EasyUI布局+下拉框之个人简单使用

根据项目需要,自己写的一个小小demo:实现的简单效果是这样子的,通过下拉框选择数据项,点击页面Button触发,根据下拉框值加载选显卡Tbs.

html代码如下:

一个下拉框,一个button,一个空的tbs,两个隐藏内容div(可以动态合成).

  <select id="Model" class="easyui-combobox" name="Model" style="250px;">
        <option value="echartsModel">ECharts显示模式</option>
        <option value="gisModel">Gis自定义显示模式</option>
     </select>

    <input type="button" id="Btn_click" value="下一步" disabled="disabled"/>

    <hr/>
    <div id="tt" class="easyui-tabs" style="700px;height:250px">
    </div>

    <div style="display:none" id="Children_em1">
        <input type="checkbox"/>

    </div>
    <div style="display:none" id="Children_em2"><p style="font-size:14px;">jQuery EasyUI framework2</p></div>

Js代码如下:

  <link href="Js/EasyUI/themes/default/easyui.css" rel="stylesheet" />
    <link href="Js/EasyUI/themes/icon.css" rel="stylesheet" />
    <script src="Js/EasyUI/jquery.min.js"></script>
    <script src="Js/EasyUI/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            
            var content;
            var arr;

            //实现一个多选下拉框
            $("#Model").combobox({
                multiple: true,
                panelHeight: 'auto',
                onSelect: function (record) {
                    content = $("#Model").combobox('getValues');
                    checkBtn(content);
                }
            });
            $("#Model").combobox('setValues', '');
            
            checkBtn(content);

            //设置一个tabPosition为left的tbs
            $("#tt").tabs({
                tabPosition: 'left'
            });
            $("#Btn_click").click(function () {
                content = content.toString();
                //分别得到下拉框选择的值
                arr = content.split(',');
                if(arr.length>0){
                    for (var i = 0; i <= arr.length - 1; i++) {
                        if (arr[i] == "echartsModel") {

                           //根据下拉框的值动态增加选项卡
                            $('#tt').tabs('add', {
                                title: 'ECharts显示模式',
                                content: '<div style="padding:10px"  id="echartsModel"></div>',
                                closable: true
                            });
                            //$("#Children_em").css('display','block');
                            //$("#echartsModel").append($("#Children_em"));

                            //直接链式编程
                            $("#echartsModel").append($("#Children_em1").css('display', 'block'));
                        }
                        if (arr[i] == "gisModel") {
                            $('#tt').tabs('add', {
                                title: 'Gis自定义显示模式',
                                content: '<div style="padding:10px"  id="gisModel"></div>',
                                closable: true
                            });
                            $("#gisModel").append($("#Children_em2").css('display', 'block'));
                        }
                    }
                }
            });
        })
        //检查下拉框选项值
        function checkBtn(content) {
            if (content == "" || typeof (content) == "undefined") {
                return;
            }
            $("#Btn_click").attr('disabled', false);

            //另一种让button可用的方法
            //$("#Btn_click").removeAttr('disabled');
        }
    </script>

至此大致效果已经出来,具体可以根据页面的显示形式进行修改.