设置jQueryUI DatePicker的样式

时间:2009-08-20 22:34:08

标签: jquery coding-style datepicker

我正在使用jquery datepicker(http://jqueryui.com/demos/datepicker/)。

演示页面上的日期选择器小而紧凑。但是,当我在我的网站上使用datepicker时,日历是巨大的。我估计每个日期都使用12磅字体。

如何让日子缩小?

8 个答案:

答案 0 :(得分:24)

简单的答案:您可以在css中添加字体大小为“.ui-datepicker”。

但我认为你可能有一些相互矛盾的css规则。您应该使用Paulo的链接中的方法来检查是否是这种情况。

答案 1 :(得分:11)

这有点晚了,但仅供将来参考: 在jquery ui css引用之后,在你的之间添加它。

<style type="text/css">
    .ui-datepicker { font-size: 9pt !important; }
</style>

它会变小。

答案 2 :(得分:10)

jquery.ui.theme.css的最顶行有字体大小:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: .9em; }

答案 3 :(得分:9)

您的CSS规则都没有冲突 - 我可以100%放心地验证这一点!

原因是因为jQuery的演示页面可能会非常误导。正如Seth所说,他们的页面在默认库CSS之上添加了许多额外的CSS规则。如果你看这里:

http://jqueryui.com/demos/demos.css

你会发现它们使基本字体大小相当小,这才是真正的原因。

我也得到了同样的问题,我在我的网页上获得了比他们的演示更大的日期选择器。为了确认它是 THEIR CSS,它是“冲突的”,我使用Firefox中的Web Developer Toolbar的CSS菜单来单独禁用上述CSS文件,然后所有突然的THEIR演示站点都有大型拣选机与我的相同尺寸。

因此,这里最好的答案是不正确的 - 它不是你的结果 - 它完全是他们如何减少基本尺寸。我保证,如果你尝试我在这里提到的,你会发现同样的事情。

答案 4 :(得分:5)

jQuery UI有一个theme roller,允许您在下载之前自定义一个现有主题,包括字体,颜色和背景。您可以执行其他操作,例如设置角半径,边距和填充。

我建议尝试在下载之前尽可能多地自定义,这样您在网站上使用它时就会更少修补。

请记住在调用jQuery UI样式表之后设置整个页面的默认字体大小。

答案 5 :(得分:2)

演示页面有相当多的额外CSS来“修复”打包的CSS,它们在任何地方都没有提到。在我看来,他们在解释这个方面做得不好,尤其是标准css使用了多少时间!重要。

此外,ThemeRoller使用em作为默认值,这是其他地方设置的字体的百分比。

无论如何,日期是链接,所以为了使它们更小,设置大小为9px。

这是我在使用任何jquery之前所做的事情:

h1 {font-size:10px;}
h2 {font-size:11px;}
h3 {font-size:11px;}
p {font-size:11px;}
a {font-size:11px;}

答案 6 :(得分:1)

您是否在CSS声明中包含了jquery-ui.css?

此外,示例页面的CSS中有一堆字体大小的声明。

答案 7 :(得分:1)

它们的字体大小为10pt。在firebug中删除它,你可能会看到你在页面上看到的相同字体大小。