jquery学习笔记1——（级联下拉菜单实现、jquery-ui、json）

在师兄介绍的几个JqueryUI插件里选择了OperaMasks作为这次实现例子用的UI。

1.搭建环境

　　1.1下载OperaMasks

　　官网：http://ui.operamasks.org/website/download.html

　　有源码包和说明，按照chm中的搭建环境步骤（其中图解是以Eclipse为例，本人用MyEclipse，步骤没什么差别），建好工程，导入包。

　　1.2其他的jquery-ui

　　　　(1)ligerui:http://www.ligerui.com/

　　　　(2)smartui:http://smartui.chinamzz.com/

　　　　(3)angelaui:我没找到它的官网，不过搜索下都有下载，师兄说不用这个是因为它在表格这块上的功能不够

　　　　(4)easyui:http://www.jeasyui.com/index.php(12306也是用这个)

　　　　(5)专做日历的Mydate97:http://www.my97.net/(12306也用到这个)

　　　　(6)专做树的ztree：http://www.ztree.me/v3/main.php#_zTreeInfo

/---------------------------------------------------------------------遇到的小问题总结---------------------------------------------------------------------/

1.1中按chm说明导入包的时候有几个JS文件显示出错，一看都是乱码，是因为编码格式没设置，之前开发的时候每次新建JSP都是手动修改的，没有在MyEclipse里设置。

设置方法：

　　(1)windows->Preferences->general->Workspace，右侧Text file encoding，选择Other->UTF-8，以后新建立工程的Text file encoding就是UTF-8啦。

　　(2)windows->Preferences->general->Content Types，右侧点开Text，选择Java Source File，在最下面的Default encoding旁边的输入框中输入UTF-8，点Update，则设置Java文件编码为UTF-8。

/-------------------------------------------------------------------------------------------------------------------------------------------------------------/

2.级联下拉菜单（简单的，不从后台读数据）

　　2.1说明

　　本例实现一个最简单的二级级联下拉框，选择市，出现对应的区，没有从后台读取数据，作为插件应用的练手。　　

 

　　2.2代码

　　(1)在WebRoot下建一个文件夹Test，在Test下新建一个html文件，引入包

<link rel="stylesheet" type="text/css" href="../css/default/om-default.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/operamasks-ui.min.js"></script>

　　(2)写JS　

<script type="text/javascript">
//设置二级下拉菜单的值
function getCityRecords() {
　　var province = $('#province').omCombo('value');
　　if(province == 'bj'){
　　　　return [ {'text' : '昌平区', 'value' : 'cp'}, {'text' : '朝阳区','value' : 'cy'} , {'text' : '海淀区','value' : 'hd'}];
　　}
　　else if(province == 'sh'){
　　　　return [ {'text' : '杨浦区', 'value' : 'yp'},{'text' : '静安区', 'value' : 'ja'} ,{'text' : '浦东新区', 'value' : 'pd'}];
　　}
　　else{
　　　　return [];
　　}
}
$(document).ready(function() {
　　$('#province').omCombo({
　　　　dataSource : [ {text : '北京', value : 'bj'},{text : '上海', value : 'sh'} ],
　　　　onValueChange : function(target, newValue, oldValue, event) {
　　　　//根据第1个combo的当前值算出第2个combo的值
　　　　　　var records = getCityRecords();
　　　　　　//将算出的值设置为第2个combo的数据源
　　　　　　$('#city').val('').omCombo('setData', records); 
　　　　}
　　}); 
　　$('#city').omCombo({}); 
});
</script>

　　(3)写body

    <span>省市：</span>
    <input id="province" />
    <br /> 
    <span>区县：</span>
    <input id="city" />
    <br /> 

　　2.3代码解读

　　　　(1)$('#id')：代码中出现的$('#province')和$('#city')，这是jquery获取id为province的元素，属于jquery选择器。

　　　　(2)$('#province').omCombo({})：omCombo是operamasks-ui中的组件，这句的作用就是将city这个input设置为下拉框。以往不用jquery和UI插件的时候，下拉框都是写<select>标签

　　　　　　dataSource：omCombo中出现的数据源属性，可以设置为“后台获取数据的URL”或者“JSON数据”，写法是

　　　　dataSource : '/operamasks-ui/getCountryNameServlet.json' 　　　　或者　　　　　

　　　　dataSource : [{"value":"001","text":"张三"}, "value":"002","text":"李四"}]

 

　　　　　　onValueChange:omCombo中的事件，有四个参数：target（当前输入框的对象）, newValue（选择的新值）, oldValue（原来的值）, event（jquery.event对象）

　　　　　　‘setData'：重新加载下拉框里的数据，一般也就是用于级联。records的返回类型是$('#province').omCombo('value');这个value就是得到或者设置omCombo的value值。