Question

我错过了什么？我的timepicker看起来像这样，它不使用timepicker的主题。

enter image description here

内部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>

我是否有错误的加载js文件的顺序？

enter image description here

一些参考链接。

jsfiddle.net/MyNameIsCode/eb8Dz

提前致谢！

Answer 1

您下载的主题是否有主题名称？有时主题CSS路径可能需要包含该名称...例如，如果主题名称为“ custom-theme ”，则它将如下所示：

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

除非您确定CSS文件的路径正确。从您的第一个屏幕截图中看起来似乎没有找到CSS部分。

修改

在查看下面的链接后，看起来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" />

另请注意：CSS链接似乎需要额外的内容：

rel="stylesheet"

在那里......否则它仍然无法正确显示。

ui-lightness 主题可能不是您正在寻找的...但是，我可能会尝试重新下载阴天主题，看看是否有效

jQuery TimePicker主题不起作用

1 个答案: