0

JavaScriptを使用してcssスタイルをJSFコンポーネントまたはdivに動的に適用できるかどうかを確認するために、成功していません。これは可能ですか？

これは疑似コードです

<div style="myJSStyleFunction("#{myBean.value}")"> stuff </div>

関数は「position:relative;left:25px;」のようなものを返します。

運がなかったので、おそらくできないかもしれませんが、セカンドオピニオンが欲しいです.

編集：

プレゼンテーション/ビューとモデル/コントローラーの間の分離を維持/削減できるかどうかを確認しようとしています。これは、コメントまたは製品レビューをインデントするためのものです (コメントまたはレビューへの返信をネストするため)。私が本当に追跡したいのは、返信の深さに関する整数です。最初のレベル = 0、2 番目のレベル = 1 など。したがって、コメントまたは製品レビューは深さ 0 になり、コメントまたはレビューへの返信は深さ 1 になります。

次に、ELでjavascript関数を呼び出して、次のようなことをしたかった

<script>
    myJSStyleFunction(depth){
        if(depth<=5){
            var nest=20*depth;
            var style="position:relative;left:" + nest + "px;";
            return style;
        }
    }
</script>

次に、第 3 レベルのコメント (返信への返信) の場合、次のようになります。

<div style="position:relative;left:40px;"> stuff </div>

どこ

#{myBean.value}

2に評価されます

ダニエルが言うように、ビューをしっかりと結合する必要があると思いますが、そうする必要はありません。方法がなければならないと思います。しかし、そうではないかもしれません。

4

2 に答える 2

2

これに対するよりクリーンな解決策がどこにあるのかわかりません。ただし、これは1つの提案です。 ページが次のようになり、メソッドがを返す
と仮定します。myBean.getValue()integer

<h:form id="frm">
   <div style="#{myBean.value}"> div1 </div>
   <div style="#{myBean.value}"> div2 </div>
</h:form>

したがって、「window.onload」でこのようなことを行うことができます。

<head>
<script>
window.onload = function() {
   var childList = document.forms['frm'].childNodes;
   for(var i = 0; i &lt; childList.length; i++) {
      if(childList[i].nodeName == 'DIV') {
         var _div = childList[i];
         var depth = _div.getAttribute('style');
         _div.setAttribute('style', 'position:relative;left:' +(depth *20)+ 'px;');
      }
   }
}
</script>
</head>

注：
1。上記のサンプルコードではDIV、フォーム内のすべてのsをインデントする必要があると想定しています。
2. IEの場合、使用する必要がある場合があります。3 _div.style.setAttribute('cssText','position:relative;left:' +(depth *20)+ 'px;')
.質問の別の解決策は<script>、divの直後にタグを使用し、その中にjs部分を配置することです。このように、スクリプトを直接呼び出すことができるため、偽のスタイリングstyle="#{myBean.value}"やイベントを使用する必要はありません。window.onload#{myBean.value}

于 2012-11-08T05:45:46.887 に答える
0

私は JavaScript のアプローチをスキップすることに決め、より単純な方法に落ち着きました。私の状況に合わせて動的な CSS クラスを作成するためのよりクリーンな方法だと思います。コメントが入力されると、各コメントの深さの値を既にキャプチャ/計算しています。だから私はELでその値を返し、それをcssクラスの「ベース名」に次のように連結しています:

<div class="indent_#{(comment.commentDepth le 5) ? comment.commentDepth : 5}" >
    comment comment blah blah blah
</div>

「indent_」は、css クラスのベース名です。したがって、0 レベルのコメントにはclass="indent_0". そのコメントへの返信にはclass="indent_1".

特定のコメントの下に多くの返信がある場合に、ページの右側からインデントされないように、私は三項を使用します。さらに深く進むこともできますが、インデントできるのは 5 レベルまでです。

現時点での私の場合、これは動的に生成された css クラス名を追加するためのよりシンプルでクリーンな方法です。現在、css ファイルでこれに 6 つのクラスを定義する必要がありますが、おそらくボックスをネストする方法を理解する必要がありますが、これは優先事項ではなく、今のところ問題なく機能します。

于 2012-11-12T04:35:06.567 に答える