使用 Google 托管的 jquery-ui.js 让主题在 jQueryUI 中工作时出现问题

发布于 2024-07-11 20:48:38 字数 2055 浏览 9 评论 0原文

我是 jQueryUI 新手，我认为我忽略了一些非常基本的东西...

我使用的问题的快速描述

ThemeRoller 下载 jQueryUI 主题，它还会生成 jQueryUI javascript 文件。我宁愿使用 Google 托管的文件 (http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js)，但是当我这样做主题没有被采纳。我很难相信我必须使用 ThemeRoller 生成的脚本，因为如果是这种情况，那么 Google 托管的 jQueryUI 将完全无用！我在这里做错了什么？

更多详细信息

因此，我从 Themeroller 下载了“Smoothness”主题，如下所示：

转到 ThemeRoller 站点。
单击“图库”按钮。
单击“平滑度”主题下方的“下载”按钮。
将 .zip 文件（使用文件夹名称）解压缩到本地目录（例如，C:\jqueryui_test）。

现在，我在同一目录中创建了一个非常简单的 test.html 文件，其中包含以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#datepicker").datepicker({inline: true});
});
</script>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>

当我在浏览器中打开 test.html 时，日期选择器组件没有样式（没有背景图像或任何东西）。但是，如果我将 Google 托管的 jquery-ui.min.js 行更改为 ThemeRoller 生成的行 ()，页面的样式符合预期。

更新我接受的答案并不是真正的最终解决方案，但它引导我走上了正确的道路。事实证明，如果您只下载 JQueryUI，您会得到很多东西。 Google 托管的文件可以只替换“jquery.ui.all.js”文件，但您仍然需要“themes”目录。另外，Themeroller 主题在 1.5.3 上运行得不太好（甚至是“1.5.3 用户”链接）。由于这仅适用于管理页面，因此我只使用了内置的“flora”主题。看起来 jQuery UI 1.6 好多了，但它还不是“稳定”版本（截至撰写本文时......）。

原文

I'm new to jQueryUI and I think I am overlooking something very basic...

Quick description of my problem

I used ThemeRoller to download a jQueryUI theme, which also generates a jQueryUI javascript file. I'd rather use the file hosted at Google (http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js), but when I do this the theme is not picked up. I find it hard to believe that I must use the ThemeRoller-generated script, because if this were the case then the Google-hosted jQueryUI would be completely useless! What am I doing wrong here??

More details

So I downloaded the "Smoothness" theme from Themeroller as follows:

Go to ThemeRoller site.
Click "Gallery" button.
Click "Download" button beneath "Smoothness" theme.
Extract the .zip file (using folder names) to a local directory (say, C:\jqueryui_test).

Now, I created a very simple test.html file in that same directory, which has the following content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#datepicker").datepicker({inline: true});
});
</script>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>

When I open test.html in my browser, the date picker component is not styled (no background images or anything). But if I change the Google-hosted jquery-ui.min.js line to the one that ThemeRoller generated (<script type="text/javascript" src="jquery.ui.all.js"></script>), the page is styled as expected.

Update The answer I accepted wasn't really the final solution, but it lead me down the right path. Turns out if you just download JQueryUI, you get lots of stuff. The Google-hosted file can just replace the "jquery.ui.all.js" file, but you still need the "themes" directory. Plus, the Themeroller themes don't work very well with 1.5.3 (even the "1.5.3 users" link). Since this was only for an admin page, I just used the "flora" theme that was built in. Looks like jQuery UI 1.6 is much better but it's not in "stable" release yet (as of this writing...).

分享到QQ

分享到微博