DateBox初步介绍
前言
今天为大家分享的知识点是DateBox组件,博主自主学习之后决定分享给你们啦,感兴趣的小伙伴们搬好小板凳啦~
案例演示
根据之前学过的easyui中的Tree组件、Tabs选项卡、datagrid组件以来,发现使用这些组件大部分的共同点就是通过以下两种方式实现:
当然,不管怎样实现,还是得经过这些流程:
1、新建一个动态的web项目,也就是Dynamic Web Project !
2、在webcontent下新建一个static的静态资源文件夹,所谓静态资源,就是固定不会改变的东西!
静态资源文件中通常包含js、css、以及images!
3、将相关的easyui的js文件导入到static下的js文件夹
然后下面就是这两种方式的具体实现过程啦!
1、静态html实现
接着上面必不可少的三步来,
首先了解一下DateBox的最终实现效果,以结果为导向,目标会更加明确~
这张是正常显示结果:
这张是点击右边的日历图标进行开始日期的选择~
这张是点击右边的日历图标进行结束日期的选择~
这张是进行了开始日期和结束日期的选择~
当然和动态js最终加载出数据的也是一样的啦~
上代码,首先找到和datebox中demo下的basic.html文件,直接复制以下这段代码就欧克~
首先在webcontent下面新建一个index.jsp文件:
其次记得导入全局样式、图片样式、以及定义图标的样式…导入的时候注意先后顺序,别搞错了~
全局样式、图片样式、以及定义图标的样式,注意这个是放在meta标签下~
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<!--组件库源文件的js文件-->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
&