5

アプリケーションにLiferay 6を使用しています。デフォルトの Alloy の代わりに、ユーザーインターフェイス部分に Jquery を使用したかったのです。このために、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

まず第一に、ポートレットのjspに、、またはを含めることはでき<html>ませ<head>ん<body>。これらのセクションはポータルのビジネスです。

また、（宣言したとおりに）ヘッドセクションにjqueryを含めるようにLiferayに依頼した場合でも、ページにjqueryを再度含めています。

これを省略すると、上記のように機能します。テストしました。これは私の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での宣言は必要ありません。1つのページに異なるバージョンの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 に答える