日历、分页插件的使用

日历插件

1、首先把插件所在的文件导入项目中的"webapp"文件夹下的"jquery"文件夹中,这样就可以使用了在这里插入图片描述

2、在"xxx.jsp"文件中导入依赖注意事项如下:

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />   //由于插件是依赖于bootstrap的,所以在导入插件之前要先导入bootstrap,这个文件也在jquery文件夹下
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" /> 
//这两个的type="text/css",表示是用于页面布局的"css"代码依赖项

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
// 这里导入的是写js代码所依赖的src="jquery/jquery-1.11.1-min.js" js文件   以及   src="jquery/bootstrap_3.3.0/js/bootstrap.min.js" 日历插件文件
<%--bs_datetimepicker插件--%>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>  //到这里完成所有依赖的导入

3、在依赖导入完成后,在js的入库函函数中就可以给想要绑定的文本框等绑定日历了:

//当容器加载完成,对容器调用工具函数
$(".myDate").datetimepicker({ //这个".myDate"使用的是class类型选择器
	language:'zh-CN', //语言
	format:'yyyy-mm-dd', //日期的格式
	minView:'month', //设置日期选择器最小能展示的选择范围视图
	initialDate:new Date(), //设置日历初始化日期
	autoclose:true, //选择日期之后,自动关闭日历视图
	todayBtn:true, //显示"今天"按钮
	clearBtn:true  //显示"清空"按钮
})
<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control myDate" id="create-startTime" readonly> //这里的"readonly"是只读的意思,就是只能选,不能修改
</div>

4、到这里就完成了,可以跑动程序来看看效果了

只读样式点击文本框,弹出日历

分页查询插件

1、分页查询插件的使用和日历插件的第一步是一样的,把文件导入jquery文件夹下即可。

2、第二步原理一样,在js代码块中,导入各种依赖:

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<%-- PAGINATION plugin --%>
<link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

3、导入完成后,给分页查询在页面布局需要使用的地方绑定一个
模块,方便使用:

我这里绑定在页面布局中所有信息的下面
在这里插入图片描述

4、效果

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页