我在支持 bean 中有一个消息列表，我在 ui:repeat 标记中使用它来显示在 xhtml 页面上。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" >
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../Styles/homepage-style.css" />
<link rel="stylesheet" type="text/css" href="../Styles/profile.css" />
<title>Shadi Bandhan | We find the best match for you</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#openMessage").hide();
});
function openMessage(id){
//$("div#openMessage").slideDown(4000);
alert(id);
}
</script>
</h:head>
<h:body>
<div id="header">
<ui:insert name="header" >
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<div id="main-content">
<p:growl autoUpdate="true" />
<div id="left-pane">
<div id="profile-info-area">
<div id="profile-info">
<span>
<img class="profileImg" src="../images/profileImg.jpg" width="185" height="200" />
</span>
<img class="request-btn" src="../images/request_photo_btn.jpg" height="35" width="156"/>
<a href="sentMessages.xhtml">Sent box</a> <br />
<a href="#">Drafts</a> <br />
<a href="#">My Packages</a> <br />
<a href="#">Other Settings</a> <br />
<a href="#">FAQs</a>
</div>
</div>
<div id="home-main-area">
<div id="messages-wrapper">
<div id="messages-header">
<div id="m-heading">
Messages - Inbox
</div>
<div id="m-search">
<div id="searchbox">
Search Messages <input type="text" value="Search" />
</div>
<!-- <div id="newmessage">
<a href="#"> + New Message </a>
</div>-->
</div>
</div>
<h:form id="messagesForm">
<div id="messages">
<p:dialog id="messagesDialog" modal="true" widgetVar="messageDialog" resizable="false" width="750" height="200" header="New Message" >
<h:panelGrid columns="2" id="dialogGrid">
<p:column>
<h:outputLabel for="msgRecepient" value="To"/>
</p:column>
<p:column>
<h:outputLabel id="msgRecepient" value="#{userMsg.userFullname}" >
</h:outputLabel>
</p:column>
<p:column>
<h:outputLabel for="msgContents" value="Message"/>
</p:column>
<p:column>
<p:inputTextarea maxlength="300" id="msgContents" value="#{messagesManagedBean.msg.message}" cols="65" rows="3" >
<p:watermark for="msgContents" value="#{userMsg.userId}" />
</p:inputTextarea>
</p:column>
<p:column>
<p:commandButton id="msgSend" value="Send" action="#{messagesManagedBean.sendMessage('reply')}" oncomplete="messageDialog.hide()" >
<f:param value="#{userMsg.userId}" name="messageSenderId" />
</p:commandButton>
</p:column>
</h:panelGrid>
</p:dialog>
<ui:repeat var="userMsg" value="#{messagesManagedBean.paginator1.model}">
<center><img class="h-diff" src="../images/differentiator-profile.jpg" width="437" height="1" /></center>
<div class="message">
<div id="senderImg">
<img class="senderImg" src="../images/profile-pic.jpg" width="50" height="50" />
</div>
<div id="message-txt-area">
<div id="senderName">
<p:commandLink styleClass="senderName" value="#{userMsg.userFullname}" action="#{myProfileManagedBean.loadProfileFrontInformation(userMsg.userId)}"></p:commandLink>
</div>
<div class="message-txt">
#{userMsg.message}
</div>
<div id="msgAction">
<!-- <a href="#" onclick="messageDialog.show()">Reply</a>-->
<p:commandLink styleClass="reply-btn" value="Reply" oncomplete="messageDialog.show()" update=":messagesForm:dialogGrid">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
<p:commandLink styleClass="open-btn" value="Open" onclick="openMessage(#{userMsg.userId})">
<f:param name="userMsg" value="#{userMsg}" />
</p:commandLink>
</div>
<div id="openMessage">
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
This is the new message. This is the new message. This is the new message.
</div>
</div>
</div>
</ui:repeat>
<center>
<h:commandButton value="< prev" action="#{messagesManagedBean.paginator1.prev}"/>
<h:outputText value="#{messagesManagedBean.paginator1.pageIndex} / #{messagesManagedBean.paginator1.pages}"/>
<h:commandButton value="next >" action="#{messagesManagedBean.paginator1.next}"/>
<h:inputHidden value="#{messagesManagedBean.paginator1.pageIndex}"/>
</center>
</div>
</h:form>
</div>
</div>
</div>
<div id="right-pane">
<div id="right-vline">
<img class="v-differenciator" src="../images/differentiator.jpg" />
</div>
<div id="right-suggestions-top">
<center>
<p>Profiles you may like</p>
</center>
<div id="right-suggestions-top-wrapper">
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
</div>
<center>
<a href="">View More..</a>
</center>
</div>
<div id="right-suggestions-bottom">
<center>
<p>People Who might be Interested in you</p>
</center>
<div id="right-suggestions-top-wrapper">
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
<div id="p-info-area-top-sugesstion">
<div id="p-img-sugesstion-top" >
<img src="../images/profile-pic.jpg" width="50" height="50"></img>
</div>
<div id="p-text-sugesstion-top" >
<p>Sania Mirza</p>
21<br/>
Muslim<br/>
Pakistan-Islamabad
</div>
</div>
</div>
<center>
<a href="">View More..</a>
</center>
</div>
<div id="fb-twitter-icons" >
<img class="fb-icon" src="../images/fb-icon.jpg" />
<img class="twitter-icon" src="../images/twitter-icon.jpg" />
</div>
<div id="fb-twitter-labels">
<h:outputLabel style="color: #680B0C;font-weight: bold;" value="Share & likes"/>
</div>
<div id="text-info-profile" >
<b>Want to know why you are still single?</b>
<p>
We understand it is not easy to find a suitable match,ShadiBandhan.com provides safe plateform to find your ideal match.
</p>
<a href="#">[Read More..]</a>
</div>
</div>
</div>
<div id="footer">
<ui:insert name="footer" >
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
现在，我想要那个
- 当前显示在主页上的消息将类似于“hello it my...”和
- 当一个人点击打开时，会向下滑动一个 div，其中将显示完整的消息以及一个回复和关闭按钮。
我正在使用primefaces，如果primefaces中有一个控件可以用来实现这一切，请告诉我。我想创建动态 div id，但不知道如何使它工作，这就是为什么在这里发帖......
任何建议表示赞赏。