当前位置:首页 > 开发 > Web前端 > Jquery > 正文

使用JQuery DatePicker屏幕下方会出现一个div情况的处理

发表于: 2012-09-25   作者:breakyang   来源:转载   浏览次数:
摘要: 在项目中需要使用一个日期控件来完成表单,由于项目使用了JQuery,所以干脆就是使用JQuery自带的DatePicker了。 在自定义DatePicker的Style过程中会发现屏幕的下方会出现一条不知名的线(上图不是很方便)。我查看了一下源代码,代码是这样的:<div id="ui-datepicker-div" class="ui-d

在项目中需要使用一个日期控件来完成表单,由于项目使用了JQuery,所以干脆就是使用JQuery自带的DatePicker了。

在自定义DatePicker的Style过程中会发现屏幕的下方会出现一条不知名的线(上图不是很方便)。我查看了一下源代码,代码是这样的:
<div id="ui-datepicker-div" class="ui-datepicker ui-widget

ui-widget-content ui-helper-clearfix ui-corner-all">

</div>

个人觉得应该是datepicker实现过程中必须的东西,但是为了美观,我们也不能让他一直在页面上,经过我的调查,我找到了两种方法。一种是我在CSDN上找到的,一种是我自己发现的。

先说第一种:

在jquery的onready方法中加上 $("#ui-datepicker-div").hide(); 加载时隐藏下就行了!

(感谢CSDN这位朋友,他的ID为chuxu000)

这种方法方法一开始我没有明白,但是经过我几次尝试,成功的起到了效果,我写一个demo,这样更直观一些:


 $(document).ready(function(){

$( "#Date" ).datepicker(); 

$("#ui-datepicker-div").hide();

})

这种方法的确是有效果的,但是对于一个项目来说,如果项目中有许多地方用到Datepicker的话,那么就会变的很麻烦,也不利于维护。可以说是"治标不治本"。


经过我的思考,$("#ui-datepicker-div").hide();这段代码无非是想这个div在页面加载的时候不显示,所以我就想到了在css的属性中有一个Display属性,所有就尝试了一下,最后成功了解决了这个问题,这样我们便不用一个页面一个页面的去修改我们的Datepicker控件了。下面是我修改css的文件和位置:

css文件的名字一般叫做jquery.ui.datepicker.css。总是就是存放datepicker的css,名字不必拘泥。下面说需要修改的那段位置:

.ui-datepicker { width: 17em; padding: .2em .2em 0; font-size: 0.8em; display: none;}

在这段css中加入我注红的地方,也就是display: none;这段代码。经过测试,bug消失了。

由于小弟也是对css样式表不是很了解,解决这个问题也是通过经验来判断,具体原因,在我学习完css之后我会继续补充

 

使用JQuery DatePicker屏幕下方会出现一个div情况的处理

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插
找了很久,终于找到了。现在分享。 1.下载jquery,链接css文件。 2.新建一个<div>,如下: <
先堆几个地址: JQuery官方地址:http://jquery.com/ 你可以在这里下载到JQuery的核心框架的最新版
一、相关参考: http://docs.jquery.com/UI/Datepicker JQuery官网关于Datapicker的使用 http://jqu
Jquery ui datepicker时间控件的使用,引入以下的JS文件。 <script language="javascript" src="
环境: ruby 1.9.3 rails 3.2.8 1.如何在rails中使用漂亮的日期控件 创建工程,简单的步骤,还是记
近期项目中用到日期控件,感觉不错,写出来分享给大家看看,先给大家看两张效果图 在例子中我控制的
jQuery-ui的datepicker做得很不错,在项目中经常用到,但对其老是在界面上出现 “?” 感觉很不爽。
DatePicker.html <!doctype html> <html lang="en"> <head> <meta charset="u
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号