jquery - 样式化 jQueryUI DatePicker

Question

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

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

如何让日子变小？

score 24 · Accepted Answer

简单的答案：您可以在 CSS 中将字体大小添加到“.ui-datepicker”。

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

score 11 · Accepted Answer

这有点晚了，但仅供将来参考：在 jquery ui css 参考之后的 , 之间添加。

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

它会变小。

score 10 · Accepted Answer

的最上面一行jquery.ui.theme.css有字体大小：

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

score 9 · Accepted Answer

您的 CSS 规则都没有冲突 - 我可以 100% 自信地验证这一点！

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

您会看到他们正在使基本字体大小大大减小，这是真正的原因。

我也遇到了同样的问题，我的页面上的日期选择器比他们在演示中的大得多。为了确认是他们的 CSS “冲突”，我使用 Firefox 中 Web 开发人员工具栏的 CSS 菜单单独禁用上述 CSS 文件，然后突然之间，他们的演示站点具有相同大小的大型日期选择器作为我的。

因此，这里的最佳答案是不正确的——这对你来说没什么——这完全是他们减少基本尺寸的方式。我向你保证，如果你尝试我在这里提到的，你会发现同样的事情。

score 5 · Accepted Answer

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

我建议在下载之前尽可能多地对其进行自定义，这样在您的网站上使用它时就可以减少需要修改的内容。

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

score 2 · Accepted Answer

演示页面有很多额外的 CSS 来“修复”打包的 CSS 中他们没有在任何地方提及的内容。在我看来，他们在解释这一点方面做得很差，尤其是标准 css 使用了多少次！important。

此外，ThemeRoller 使用 em 作为默认值，它是其他地方设置的字体的 %。

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

它们的正文字体大小为 10pt。在 firebug 中删除它，您可能会看到与您在页面上看到的相同的字体大小。

8 回答 8