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值。