1

最後に更新！

コメントのセットを持つコンテナパネルがあります。各コメントの長さは異なるため、コンテナーの高さは動的にする必要があります。これは で行うことができますheight:auto。ユーザーが新しいコメントを入力できるようにするには、ボタンをクリックする必要があります。入力テキストがコメント パネルの下に表示されます。そこで、パネルの高さを取得し、それを入力テキストの位置の上部の値として設定する js 関数を作成しました。

var commentPanelStr = 'dataTableFormHM' + ':dataTableHM:' + rowIndex + ':commentPanel';
var commentPanel = $(document.getElementById(commentPanelStr));
commentPanel.css({
    "height":"auto",
    "top":commentPanelTopValue
});

var commentInputPanelStr = 'dataTableFormHM' + ':dataTableHM:' + rowIndex + ':commentInputPanel';
var commentInputPanel = $(document.getElementById(commentInputPanelStr));

var y = parseInt(commentPanel.height())+commentPanelTopValue;
commentInputPanel.css("top", y);

この関数の問題点は次のとおりです。commentPanel.height()実際の高さの値の約半分を返します。下の図は、どのように見えるかを示しています。

ここに画像の説明を入力

しかし、次のようになっています。

ここに画像の説明を入力

$(window).load()関数ヘッダーを代わり に変更しようとしました$(document).ready()。また、outerHeight() $(elem).css('height');$(elem)[0].height; $(elem)[0].innerHeight; $(elem)[0].clientHeight;関数は間違った値を返します。

また、jQuery position() 関数は、以下のコードで、コメント パネルの約半分であるコメント パネルの中央に inputText を挿入します。

commentInputPanel.position({my:"bottom",at:"bottom",of:commentPanel});

jQuery関数は正確な値を取得できないと思いますheight:autoが、なぜですか?

関連する xhtml コード:

<p:panel id="commentPanel" style="width:353px; height:34px;position:absolute;left:370px;top:149px;"
                         styleClass="statusComment">
                    <ui:param name="max" value="#{Status.numOfCommentsShown}"/>
                    <ui:repeat var="Comment" value="#{Status.commentListOfStatus}" varStatus="statusVar">
                        <ui:fragment rendered="#{statusVar.index lt max}">
                            <li>
                                <div class="wrapper" id="wrapperDiv" style="word-wrap: break-word;width: 335px;">
                                    <h:link value="#{Comment.commentAuthorName}: " id="goToProfileWithAuthorName"
                                            outcome="/profile.xhtml" type="submit"
                                            style="text-decoration:none;font-family:arial;font-weight:bold;font-size: 11px;color: rgb(120,120,159);">
                                        <f:param name="userId" value="#{Comment.comauthorId}"/>
                                    </h:link>

                                    <h:outputText id="commentText" value="#{Comment.commentText}"
                                                  style="font-family:arial;font-size: 11px;color: rgb(77,77,103);"></h:outputText>
                                    <br/>
                                    <abbr class="timeago" title="#{Comment.commentDate}"
                                          style="color: #778899;font-size: 10px;">
                                    </abbr>
                                    <p:commandLink styleClass="deleteCommentButton" style="display:none;">
                                        <p:graphicImage value="/images/smallCancel.png" alt="delete"
                                                        style="outline: none; border:none"/>
                                    </p:commandLink>
                                </div>
                            </li>
                        </ui:fragment>
                    </ui:repeat>
                </p:panel>

助けてくれてありがとう。

アップデート！

原因が分かった気がします！xhtml でわかるように、br タグと画像付きのコマンドリンクがあります。その br タグ画像を削除すると、同じ行のコメントの直後に timeago が書き込まれ、この場合、height() は正しく計算されます。

しかし、新しい行があることを意味する<br/>orを使用するたびに、関数が壊れます。しかし、私は修正する方法がわかりませんか？<p/>height()

4

1 に答える 1

1

タグについて調べたところ<br/>、高さがまったくないことがわかりました。強制的に回線を終了するだけです。br タグを気にしないため、すべての js 関数が高さを間違って計算しているのはそのためです。

<br/>タッグを組んでスタイリングするのは、大きくてちょっと笑えるミスでした。私はajaxコールバックパラメータをチェックしていました.javascriptを介して正しい高さを取得するためにほとんどすべての可能性を試しましたが、うまくいきませんでした. 最後に、br タグは私を模倣し、何かを教えようとします。

基本をよく知らなければ、準備されたライブラリをどれだけ深く使用するかはそれほど重要ではありません。

もう1つ、根本的な原因は<li/>タグである可能性もあります。2行ある場合は、2つの<li/>タグがあることを確認してください

于 2013-04-14T20:57:55.290 に答える