如何讓jQuery UI中的元素正確設置樣式和格式

這是我的問題。我有多次下載jQuery UI並試圖使用它。但是，發生的情況是，在下載提供的示例中，UI元素看起來不錯，但在我的頁面中，當我嘗試使用它們時，所有格式和樣式的東西都搞亂了。下面是日期選擇器的例子：如何讓jQuery UI中的元素正確設置樣式和格式

Good Example
Bad Example

這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Reports</title> 

    <meta charset="UTF-8" /> 
    <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" /> 
    <meta http-equiv="PRAGMA" content="NO-CACHE" /> 

    <link type="text/css" href="../css/jquery.ui.all.css" rel="stylesheet" /> 

    <script type="text/javascript" src="../scripts/jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="../scripts/jquery.ui.core.js"></script> 
    <script type="text/javascript" src="../scripts/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="../scripts/jquery.ui.datepicker.js"></script> 

    <script type="text/javascript"> 

     $(function() { 

      $('#start_date').datepicker({ 
       changeMonth: true, 
       changeYear: true 
      }); 

      $('#end_date').datepicker({ 
       changeMonth: true, 
       changeYear: true 
      }); 

     }); 

    </script> 
</head> 
<body> 
    <form id="Form_Reports" method="post" action="Reports.aspx" runat="server"> 

    <!-- The date input form --> 
    <table> 
     <tbody> 
      <tr> 
       <td class="label">Start Date:</td> 
       <td><input class="text" type="text" name="start_date" id="start_date" runat="server"/></td> 
      </tr> 
      <tr> 
       <td class="label">End Date:</td> 
       <td><input class="text" type="text" name="end_date" id="end_date" runat="server"/></td> 
      </tr> 
      <tr> 
       <td class="label">Program</td> 
       <td><select class="text" name="program_name" id="program_name" runat="server"></select></td> 
      </tr> 
     </tbody> 
     <tbody> 
      <tr> 
       <td colspan="2" style="text-align:center"><input type="submit" name="cmdReport" value="Get the Report"/></td> 
      </tr> 
     </tbody> 
    </table> 

    </form> 
</body>

這裏是他們的代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <title>jQuery UI Datepicker - Display month &amp; year menus</title> 
    <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> 
    <script type="text/javascript" src="../../jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> 
    <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="../../ui/jquery.ui.datepicker.js"></script> 
    <link type="text/css" href="../demos.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
    $(function() { 
      $('#datepicker').datepicker({ 
        changeMonth: true, 
        changeYear: true 
      }); 
    }); 
    </script> 
</head> 
<body> 

<div class="demo"> 

<p>Date: <input type="text" id="datepicker"></p> 

</div><!-- End demo --> 

<div class="demo-description"> 

<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p> 

</div><!-- End demo-description --> 

</body>

對於我的網頁（一'.aspx'頁面，如果這樣做有什麼區別）我將圖像文件夾中的所有圖像放在css文件的下一級，只是因爲它在示例文件夾中，並且腳本文件都在另一個文件夾中。有沒有我需要的東西，我沒有。我不應該需要「demo.css」文件，我應該嗎？對於網站形式的項目是否有特殊的命名約定？是否有一些特殊的方式需要設置文件夾/ css文件/源腳本（如特定的文件夾配置）才能使其工作？

這種遺失的種類。可能是一個非常簡單的解決方案，但我很新，使用它。任何幫助表示讚賞。

來源

2010-06-23 Mike Webb

您可能需要demo.css - 我會嘗試鏈接到第一個，看看它是否有所作爲。 – nearlymonolith 2010-06-23 21:01:46

這沒有奏效。它只是格式化我的標籤，輸入框等等。日期選擇器看起來仍然像。 – 2010-06-23 21:07:46

如果您在安裝了FireBug的Firefox瀏覽器中打開您的頁面，在Net選項卡上，您將能夠看到缺少的資源。類似there，但缺少資源將呈紅色。

來源

2011-01-27 16:36:20

這工作。我前一陣子做了這個，發現我缺少一些我需要的CSS文件。很高興有人終於迴應。大聲笑 – 2011-01-27 16:50:51

如何讓jQuery UI中的元素正確設置樣式和格式

回答

相關問題