使用谷歌託管主題更改jquery日曆大小

我想實現使用谷歌託管主題的Jquery datepicker。但是日曆太大了。我可以通過改變函數本身來使它變成一個更小的版本，看到我不能改變主題？使用谷歌託管主題更改jquery日曆大小

<link rel="stylesheet" 
     href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"  
     type="text/css" media="all" /> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(function() { 
    $("#datepicker").datepicker({ dateFormat: $.datepicker.W3C }); 
    }); 
</script>

更新：我下載了谷歌託管的CSS文件，並手動更改其中的值。但是，現在我的日曆中的箭頭鍵已經消失。如果我將src =切換到在線的谷歌託管腳本，箭頭出現，但大小再次巨大。

來源

2010-05-05 Ali

的日期選擇器的大小由font-size CSS屬性決定。

<div id="datepicker" style="font-size: 90%"></div>

此外，我看到您使用Google的CDN服務CSS但不是JQuery腳本，爲什麼？

來源

2010-05-05 02:27:03 Ben

但是，你能告訴我我在哪裏放置物業嗎？在身體裏？在頭上？我的意思是我在哪裏放置這個？字體大小：2.5em; – Ali 2010-05-05 02:31:29

@Ali - 在那裏檢查更新。 – Ben 2010-05-05 02:33:23

不好意思，但我應該把上面的陳述放在哪裏。無論我在哪裏放置它，它都會將日曆放在那裏，並將其從輸入字段中斷開。 – Ali 2010-05-05 03:27:41

的demo page給出了一些樣本HTML，你可以對樣式：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"> 
    <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"> 
     <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a> 
     <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a> 
     <div class="ui-datepicker-title"> 
     <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span> 
     </div> 
    </div> 
    <table class="ui-datepicker-calendar"> 
     <thead> 
     <tr> 
     <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th> 
     ... 
     </tr> 
     </thead> 
     <tbody><tr> 
     <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td> 
     ... 
     </tr> 
     </tbody> 
    </table> 
    <div class="ui-datepicker-buttonpane ui-widget-content"> 
     <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button> 
     <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button> 
    </div> 
</div>

應用新的樣式，這些類導入從谷歌樣式表後，你會好到哪裏去。例如（只是作爲一個例子 - 我不知道這是否會好看）：

.ui-datepicker-div { font-size: 75%; }

來源

2010-05-05 02:26:59

使用谷歌託管主題更改jquery日曆大小

回答

相關問題