如何应用jQuery UI主题?

mik*_*ebz 7 javascript jquery jquery-ui

这是一个总的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" >
Run Code Online (Sandbox Code Playgroud)

2)为按钮设置一个类来使用主题:

<button class="ui-button" id='button 1'>hello world</button>
Run Code Online (Sandbox Code Playgroud)

在这个时间点,我认为这就是它所需要的一切.我阅读了一些教程,他们都认为所有主题都是开箱即用的,主要集中在调整它们.

入门的最低要求是什么?

最终的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>
Run Code Online (Sandbox Code Playgroud)

Bla*_*ger 6

你已经加载了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>
Run Code Online (Sandbox Code Playgroud)

  • 我会添加一些东西来拯救某人,因为我在这浪费了几个小时.如果您的网页是通过https提供的,则会无声地失败.在没有http的情况下使用src ="// ajax.googleapis.com"等更安全. (5认同)