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

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

html代码如下:

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

<select id="Model" class="easyui-combobox" name="Model" style="width: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="width: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>

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