Question

这是一个总的n00b问题。我正在尝试使用JQuery UI，似乎JQuery CSS在我的HTML文件中没有任何区别。

以下是我采取的步骤： 1）挑选出一个主题并包含一个链接（我尝试了远程和本地）

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" type="text/css" rel="stylesheet" >

2）为按钮设置一个类来使用主题：

<button class="ui-button" id='button 1'>hello world</button>

此时此刻，我认为这就是它所需要的一切。我阅读了一些教程，他们都假设所有主题都是开箱即用的，主要集中在调整它们上。

开始时最低限度是什么？

最终HTML文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery demo</title>

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" type="text/css" rel="stylesheet" >

    <style>
        a.test { font-weight: bold; }
    </style>

</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<button class="ui-button" id='button 1'>hello world</button>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
    $(document).ready(function(){
    });
</script>
</body>
</html>

Answer 1

您已经加载了jQuery脚本，但没有加载jQuery-UI脚本。（除了jQuery本身，jQuery-UI还需要CSS和JS文件。）

将您的<script>代码更改为：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
});
</script>

如何应用jQuery UI主题？

1 个答案: