在Liferay 6中使用jquery代碼

我爲應用程序使用Liferay 6。我想使用Jquery的用戶界面部分，而不是默認合金。爲此，我已通過編輯的Liferay-portlet.xml中這樣集成的JQuery與Liferay的在Liferay 6中使用jquery代碼

<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.

現在請告訴我，我怎麼可以把下面的在view.jsp的

這是我的Jquery的Hello World程序警報內的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>

請讓我知道，謝謝你的閱讀。

來源

2012-07-04 Pawan

首先：您的portlet的jsp不應該包含<html>,<head>或<body>。這些部分是門戶的業務。

此外，即使您已經要求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的）能力dynamically load 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-04 17:13:57

謝謝。這是'Alloy UI'的一個非常酷的功能。您可以提供的任何鏈接詳細解釋此功能，以及我們如何知道所有版本可以包含不同的JavaScript庫？ –

是的，鏈接已經在那裏，鏈接到YUI/AlloyUI的YQuery模塊：http://yuilibrary.com/gallery/show/yquery –

感謝您的鏈接！ –

在Liferay 6中使用jquery代碼

回答

相關問題