jQuery-ui包的使用方式

最新推荐文章于 2018-05-17 19:06:52 发布

1990_super

最新推荐文章于 2018-05-17 19:06:52 发布

阅读量3.3k

点赞数 2

分类专栏： jQuery 文章标签： jQuery UI DatePicker jquery UI的使用方法

本文链接：https://blog.csdn.net/runbat/article/details/52055081

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在开发中用到了jQuery-ui里的datepicker 日历控件，这就涉及到jQuery UI 源文件的使用，经过摸索，我分享下使用心得，其实也很简单啦

1、首先下载jQuery UI 我下载的是jquery-ui-1.12.0.zip 下载地址：http://jqueryui.com/download/

2、打开压缩包，包内文件有：

3、把这些文件全部放到你的工程下指定的文件夹，这里请注意，其实并不是全部都要放到工程下，但是我是懒人，不想区分哪些是必须的，哪些不是，

我举个例子 jquery-ui.min.js 是jquery-ui.js 压缩后的文件，所有带min的都是压缩后的文件，所以他们是一样的。

4、在你需要使用jquery ui的文件里引入jquery-ui.min.js和jquery-ui.css ，这两个文件会自动去引用他们需要的文件，这就是要将解压后所以的文件都

放到项目下的原因。

5、我举个datepicker小例子，让大家看的更明白

说明下：我的jquery-1.8.2.min.js 在解压后的文件的上一层，本例的代码和解压后的文件在同一个文件下。

<!DOCTYPE html>
<html>
<head>
<title>WdatePicker</title>
<script type="text/javascript" src="../jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./jquery-ui.min.js"></script>
<link href="./jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker({
	dateFormat: 'yy-mm-dd',
	showButtonPanel: true,
	changeYear: true,
});
})

</script
 <style type="text/css">

 </style>
</head>
<body>
<h2 class="demoHeaders">Datepicker</h2>
<div >
	日期：<input id="datepicker" value="" />
</div>
</body>
</html>