Question

看了很多类似的问题后，我仍然无法弄清楚为什么我无法显示jquery UI滑块。以下是我的代码。

正在加载js文件，并且css文件位于同一位置。（与html文件位于同一文件夹中）

我知道jquery ui已加载，因为我没有看到警告消息。但我仍然看不到滑块。我试过了

我做错了什么？

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"/>
<script type="text/javascript" src="jquery-ui.js"/>
<link href="jquery-ui.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
    $(document).ready(function () {
         document.body.innerHTML = "ready..."
        //ready();
        if (jQuery.ui) {
            $("#slider").slider()
        } else {
            alert("no jquery ui")
        }
    });
</script>
<title></title>
</head>
<body id="mainBody">
<div id="slider"></div>
not yet ready...
</body>
</html>

Answer 1

您正在使用＆＃34; ready ...＆＃34;替换正文中的所有HTML（包括#slider）。这使$("#slider").slider()无法正常工作，因为它不再是#slider元素。一个更好的方法是包装＆＃34;还没准备好......＆＃34;像这样的DIV：

<body id="mainBody">
<div id="slider"></div>
<div id="status">not yet ready...</div>
</body>

然后将document.body.innerHTML = "ready..."替换为$("#status").html("ready...")

这应该可以解决问题。

jquery UI滑块不显示（附带css）

1 个答案: