私はliferay-ui:tabsを使用しています。いずれかのタブをクリックすると、ページ全体がリフレッシュされます。私はページをリフレッシュさせたくありませんでした。そこで、私は liferay-ui:セクションタグを使用し、liferay-ui:tabsの "refresh"属性をfalseに設定してみました。しかし、このようにして、ポートレットが初めてロードされたときに、すべてのタブの内容も同時にロードされるため、パフォーマンス・ファクタが低下することがわかりました。Ajaxを使用してliferay-ui:tabsを実装する方法は?
<liferay-ui:tabs names="<%= tabs %>" refresh="false" param="selectedTab">
<liferay-ui:section >
<liferay-util:include page="/html/resourceurlajax/sample_tab_1.jsp" servletContext="<%=this.getServletContext() %>" />
</liferay-ui:section>
<liferay-ui:section>
<liferay-util:include page="/html/resourceurlajax/sample_tab_2.jsp" servletContext="<%=this.getServletContext() %>" />
</liferay-ui:section>
<liferay-ui:section>
<liferay-util:include page="/html/resourceurlajax/sample_tab_3.jsp" servletContext="<%=this.getServletContext() %>" />
</liferay-ui:section>
</liferay-ui:tabs>
私はのLiferay-UIを保つことによってjQueryのを使用してこれを実装しようとした: はここに私のコードですのdiv要素のタブ、その後のdiv#IDは要素をクリックすると、私が取得しようクリックされたタブの名前。しかし、これは"jQueryが定義されていません"型のエラーを表示していますが、jQueryはtoggle()関数を使用しています。 FireBugコンソールでjQueryコードを実行すると、それぞれのタブ名でタブのonClickという警告が表示されることがわかりましたが、それ以外の場合はエラーが表示されています。
ここはjQueryを使用したコードです。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#<portlet:namespace/>ajax-tabs-demo.aui-tab").click(function(){
alert($('a',this).html());
});
});
/script>
<div id="<portlet:namespace/>ajax-tabs-demo">
<liferay-ui:tabs names="<%= tabs %>" refresh="false" param="selectedTab">
</liferay-ui:tabs>
私はタブをクリックすると、それだけでタブの内容がアウトにロードされるようにするには、この使用してAJAXを(私がクリックしたタブ名またはタブ-IDを取得する場合)を実装する方法はありますリフレッシュどうすればいいか教えてください。私を助けてください。 ありがとうございます。