Javascript 如何使jQueryUI中的元素正确设置样式和格式_Javascript_Html_Jquery Ui_Asp.net

Javascript 如何使jQueryUI中的元素正确设置样式和格式

javascript html jquery-ui asp.net

Javascript 如何使jQueryUI中的元素正确设置样式和格式,javascript,html,jquery-ui,asp.net,Javascript,Html,Jquery Ui,Asp.net,这是我的问题。我曾多次下载jQueryUI并尝试使用它。然而，在下载中提供的示例中，UI元素看起来很棒，但在我的页面中，当我尝试使用它们时，所有的格式和样式都被弄乱了。以下是日期选择器的示例：这是我的密码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

这是我的问题。我曾多次下载jQueryUI并尝试使用它。然而，在下载中提供的示例中，UI元素看起来很棒，但在我的页面中，当我尝试使用它们时，所有的格式和样式都被弄乱了。以下是日期选择器的示例：

这是我的密码：

<!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>

对于我的页面（一个“.aspx”页面，如果这有什么区别的话），我将所有图像放在css文件下一级的图像文件夹中，就像在示例文件夹中一样，脚本文件都放在另一个文件夹中。有什么我需要的东西我没有。我不需要“demo.css”文件，是吗？站点形式的项目是否有特殊的命名约定？是否有一些特殊的方式，我需要有文件夹/css文件/源脚本设置，如特定的文件夹配置，使其工作

在这件事上有点迷路了。可能是一个非常简单的修复方法，但我对使用它还很陌生。非常感谢您的帮助。

如果您在安装了的Firefox浏览器中打开页面，您将能够在“网络”选项卡上看到缺少的资源。类似于，但缺少的资源将是红色的。

您可能需要demo.css-我会先尝试链接到demo.css，看看它是否起作用。这不起作用。它只是格式化了我的标签、输入框等。日期选择器看起来仍然是这样。这很有效。不久前我做了这个，发现我缺少了一些我需要的CSS文件。很高兴终于有人回应了。英雄联盟

<!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>