5

我将 Liferay 6 用于应用程序。我想使用 Jquery 作为 User Interface Part 而不是默认的 Alloy。为此，我通过以这种方式编辑 liferay-portlet.xml 将 JQuery 与 Liferay 集成

<portlet>
        <portlet-name>First</portlet-name>
        <icon>/icon.png</icon>
        <instanceable>true</instanceable>
        <header-portlet-css>/css/main.css</header-portlet-css>
        <header-portlet-javascript>https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js</header-portlet-javascript>
                                   <header-portlet-javascript>https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js</header-portlet-javascript>
        <footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
        <css-class-wrapper>First-portlet</css-class-wrapper>
    </portlet>

这是我的 view.jsp 

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

This is the <b>Sai Nath</b> portlet.

现在请告诉我如何将下面的 Jquery Hello World Alert 放入 view.jsp

这是我的 Jquery Hello World 警报程序 

<html>
<head>
<title>jQuery Hello World Alert box</title>

<script type="text/javascript" src="jquery-1.4.2.js"></script>

</head>
 <script type="text/javascript">
$(document).ready(function(){
$("#cl").click(function(){
alert("HELLO WORLD!");
});
});
</script>
<body>
<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>
</body>
</html>

请让我知道，谢谢阅读。

4

1 回答 1

12

首先：您的 portlet 的 jsp 永远不应包含<html>,<head>或<body>. 这些部分是门户的业务。

此外，您在页面中再次包含 jquery，即使您已要求 Liferay 将其包含在 head 部分中（如您声明的那样）。

如果你忽略它，它就像你上面写的一样工作——我已经测试过了。这是我的jsp：

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />

<script type="text/javascript">
  $(document).ready(function(){
    $("#cl").click(function(){
      alert("HELLO WORLD!");
    });
  });
</script>

<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>

一个完全不同的选项使用 AlloyUI（或 YUI）将jQuery作为 AlloyUI 模块动态加载的能力。不需要在 liferay-portal.xml 中声明。您甚至可以在一页中加载不同版本的 jquery。jsp 看起来像这样：

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

AUI/jQuery
<script>
AUI().use('gallery-yquery', function(A) {
  var jq = A.YQuery();
  jq.version = '1.6.2';
  jq.use( function() {
    alert( 'jquery ' + $.fn.jquery + ' loaded' ); // Will show that 1.6.2 loaded successfully
    $(document).ready(function(){
      $("#cl").click(function(){
        alert("HELLO WORLD!");
      });
    }); 
  });
});
</script>
于 2012-07-04T17:13:57.153 回答