Question

我尝试将jquery ui支持导入到一个非常简单的java应用程序中。

我的第一个目标是获取运行每个jquery安装时附带的示例jquery ui site（http://jqueryui.com/themeroller/）。

我的问题是

http://localhost:9000/

将文件返回给我，但是没有工作javascripts（Accordion就是显示文本但不显示手风琴）。

一旦这样做，我的下一步就是用来自controllers.Applicaiton的数据填充组件。关于它如何工作的建议（例如手风琴）也非常受欢迎。

提前谢谢！

我的公共目录：

公共
- 图像
- Javascript角
  - 的jquery-ui.js
  - 的jquery.js
- 样式表
  - 的jquery-ui.css
  - 的jquery-ui.structure.css
  - 的jquery-ui.theme.css

我的conf / routes文件：

GET     /                           controllers.Application.index()

我的controllers.Application类只有一个方法：

public static Result index() {
  return ok(index.render("Your new application is ready."));
}

我的main.scala.html（编辑：导入顺序在下面发表评论后发生了变化。）

@(title: String)(content: Html)

<!DOCTYPE html>

<html>
 <head>
 <title>@title</title>
 <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/jquery-ui.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/jquery-ui.structure.css")">
 <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/jquery-ui.theme.css")">
 <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
 <script src="@routes.Assets.at("javascripts/jquery.js")" type="text/javascript"></script>
 <script src="@routes.Assets.at("javascripts/jquery-ui.js")" type="text/javascript"></script>

 </head>
 <body>

 @content
 </body>
</html>

最后我的index.scala.html（缩写）。

@(message: String)

@main("NuMap") {


<script type="text/javascript">

$( "#accordion" ).accordion();

... the script from the sample file...
</script>

<h1>Welcome to jQuery UI!</h1>

<div class="ui-widget">
    <p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p>
</div>

<h1>YOUR COMPONENTS:</h1>


<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
 <h3>First</h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
 <h3>Second</h3>
 <div>Phasellus mattis tincidunt nibh.</div>
 <h3>Third</h3>
 <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>

<!-- Autocomplete -->

... all the other components from sample file...

}

我生成的HTML有以下标题：

<head>
 <title>NuMap</title>
 <link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-ui.css">
 <link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-ui.structure.css">
 <link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-ui.theme.css">
 <link rel="stylesheet" media="screen" href="/assets/stylesheets/jquery-my.css">
 <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
 <script src="/assets/javascripts/jquery.js" type="text/javascript"></script>
 <script src="/assets/javascripts/jquery-ui.js" type="text/javascript"></script>

</head>

所以一切看起来都不错，但仍然jquery-ui无效...

Answer 1

我不完全确定这个问题。但是，如果 jQuery 正在运行且您只有 jquery-ui 的问题，那么<script>导入顺序可能就是原因。你正在使用，

<script src="@routes.Assets.at("javascripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/jquery.js")" type="text/javascript"></script>

由于jquery-ui严重依赖jquery。必须首先加载jQuery，然后加载jquery-ui。

希望这对你有所帮助。

此致

将JQuery UI集成到Play Framework中

1 个答案: