設計jQueryUI DatePicker

演示頁面上的日期選擇器小而緊湊。但是，當我在我的網站上使用日期選擇器時，日曆很大。我估計每個日期都使用12磅字體。

我如何得到更小的日子？

2009-08-20 Villager

簡單的答案：你可以在你的css中添加一個字體大小爲「.ui-datepicker」。

但我認爲你可能有一些css規則是衝突的。您應該使用Paulo鏈接中的方法來檢查是否屬於這種情況。

2009-08-20 22:41:34 MrHus

你在CSS聲明中包含jquery-ui.css嗎？

另外，示例頁面在CSS中有一堆字體大小的聲明。

2009-08-20 22:35:50 seth

它們的字體大小爲10pt。刪除在螢火蟲，你可能會看到相同的字體大小，你看到的頁面上。

2009-08-20 22:38:46 redsquare

jQuery UI有一個theme roller，允許您在下載之前自定義現有主題之一，包括字體，顏色和背景。你可以做其他的事情，比如設置圓角半徑，邊距和填充。

我建議儘量嘗試在之前對其進行自定義下載，這樣在網站上使用它時就不需要修改了。

記得在之後的整個頁面中設置默認的字體大小，你調用了jQuery UI樣式表。

2009-08-20 23:28:00 eksith

您的CSS規則都沒有衝突 - 我可以100％自信地驗證這一點！

原因是因爲jQuery的演示頁面可能非常容易讓人誤解。正如Seth所說，他們的頁面在默認庫CSS的頂部添加了很多額外的CSS規則。如果你看看這裏：

你會看到他們正在基本字體大小相當小，這是真正的原因。

我也得到了相同的確切問題，我在頁面上獲得的日期選擇器比他們的演示版本大得多。爲了確認它是「衝突」的CSS，我使用Firefox中的Web Developer Toolbar的CSS菜單來單獨禁用上述CSS文件，然後突然他們的演示站點只有大量的日期選擇器與我的尺寸相同。

因此，這裏最好的答案是不正確的 - 它不是你的目的 - 它完全是如何減小基本尺寸的。我向你保證，如果你嘗試我在這裏提到的，你會發現同樣的事情。

2010-07-06 13:08:47 Lev

的jquery.ui.theme.css極頂線有字體大小：

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

2010-10-30 20:05:57 Clay

演示頁面有相當多的額外的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;}

2012-10-07 01:21:23

@seth - 如果他沒有包含CSS，則日期選擇器不會是日期選擇器。 – 2012-10-07 01:27:00

這是一個有點晚，但僅在將來參考：添加這是你之間的jQuery UI的CSS引用後。

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

它會變小。

2012-12-11 05:38:16

回答