jQuery TimePicker主题不起作用

Question

What I have missed? 我错过了什么？ My timepicker looks like this, it doesn't use the theme for timepicker. 我的时间选择器看起来像这样，它不使用主题作为时间选择器。

在此处输入图片说明

Inside html file: 内html文件：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link type="text/css" href="css/jquery-ui-1.8.16.custom.css" />
<link type="text/css" href="css/jquery.ui.all.css" />
<style type="text/css">
    #ui-datepicker-div, .ui-datepicker{ font-size: 80%; }
    .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
    .ui-timepicker-div dl { text-align: left; }
    .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
    .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
    .ui-timepicker-div td { font-size: 90%; }
    .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
<script type="text/javascript" src="script/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="script/jquery-ui-1.8.16.custom.min.js" ></script>
<script type="text/javascript" src="script/jquery-ui-timepicker-addon.js" ></script>
<script type="text/javascript" src="script/jquery-ui-sliderAccess.js" ></script>


<script type="text/javascript">
    $(document).ready(function(){
        $("#time").timepicker({
            addSliderAccess: true,
            sliderAccessArgs: { touchonly: false }
        }); 
    });
</script>
</head>

<body>
    <input type="text" value="" id="time" />
</body>
</html>

Do I have wrong order of loading for js files? js文件的加载顺序是否错误？

在此处输入图片说明

Some reference link. 一些参考链接。

jsfiddle.net/MyNameIsCode/eb8Dz jsfiddle.net/MyNameIsCode/eb8Dz

Thanks in advance! 提前致谢！

Answer 1

Does the theme that you downloaded have a theme name? 您下载的主题有主题名称吗？ Sometimes the theme CSS path might need to include that name... for example, if the theme name is " custom-theme ", it would be like this: 有时主题CSS路径可能需要包含该名称...例如，如果主题名称为“ custom-theme ”，则将如下所示：

<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css" />

Unless you are sure that the paths are correct for your CSS files. 除非您确定CSS文件的路径正确。 It just seems like the CSS part isn't actually getting found, from your first screenshot. 从您的第一个屏幕截图看来，似乎实际上并未找到CSS部分。

EDIT: 编辑：

After looking at the links below, it looks like there's a problem with the jquery-ui theme CSS file (that particular Overcast theme CSS file.) It seems to work if I change out that top CSS link to something like this: 在查看了下面的链接之后，jquery-ui主题CSS文件（特定的Overcast主题CSS文件）似乎出现了问题。如果我将顶部CSS链接更改为以下内容，这似乎可以工作：

<link type="text/css" rel="stylesheet" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css" />

Also note: that CSS link seemed to need the extra: 另请注意：CSS链接似乎需要额外的资源：

rel="stylesheet"

in there... otherwise it still wouldn't appear correctly. 在那里...否则它仍然无法正确显示。

The ui-lightness theme might not be what you are looking for... but, I would probably try re-downloading the Overcast theme to see if that works. ui-lightness主题可能不是您想要的...，但是，我可能会尝试重新下载Overcast主题以查看是否可行。

jQuery TimePicker主题不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-01-25 05:10:51

jQuery TimePicker主题不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-01-25 05:10:51

解决方案1
1 已采纳 2012-01-25 05:10:51