日历jquery的datepicker在本地(不联网)实现

penny.gu 发布于 2012/07/27 15:27
阅读 965
收藏 0

我把css和js文件下载到本地,link href=jquery-ui.css,script src=jquery.min.js和jquery-ui.min.js,但是运行错误,不理解为什么?哪里需要修改吗?

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body style="font-size:62.5%;">
<div id="datepicker"></div>

</body>
</html>

加载中
0
情天大圣
情天大圣

直觉那两边的按钮有图片的成分,于是查看了下jquery-ui.css的源码,发现大量如下样式:

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }

的确用到了图片,这属于网络资源,而且跟你的css文件的路径有关!

推荐你用另一个时间控件JSCal2,效果图:

penny.gu
penny.gu
原来如此啊,图片是网络资源,不是写出来的,了解了
0
樂
IE8.0 和谷歌浏览器下运行正常
樂
回复 @penny.gu : 呵呵 没注意到没图片资源 但是JS是没错误的
penny.gu
penny.gu
是IE8,发现可以运行,但是界面显示有问题,一样的css怎么就显示不同,按钮怎么被隐藏了的?
0
情天大圣
情天大圣

将以下三个文件下载到本地,存放到和html同级目录(看自己习惯):

  1. jquery-ui.css
  2. jquery.min.js
  3. jquery-ui.min.js

目录结构如图:

页面HTML代码如下:

 

<!DOCTYPE html>
<html>
	<head>
		<link href="./jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="./jquery.min.js"></script>
		<script src="./jquery-ui.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#datepicker").datepicker();
			});
		</script>
	</head>
	<body style="font-size:62.5%;">
		<div id="datepicker"></div>
	</body>
</html>

效果图如下:

0
penny.gu
penny.gu

不是本地的话显示应该是这样的。

我看到年月两边的按钮不见了,以为运行错误了。原来鼠标放按钮(显示不出)所在处还是可以运行的。不过按钮怎么就显示不出,css联网和本地的不是一样么,很奇怪,还是出错了这里?

返回顶部
顶部