1

kk-container.aspxjQueryロード関数を使用してDefault.aspxにロードされるコントロールとして使用される名前のASP.NETページを設計しました。このページkk-container.aspxには、例のようにバインドされた多くのHTMLコントロールとjavascriptイベントがあります。

<!--Sample code from kk-container.aspx-->
<div id="kk-container">
    <a href="#" id="kk-action">Action</a>
    <!--Many HTML controls here-->
</div>
<script type="text/javascript">
    $(document).ready(function () {
            $("#kk-action").click(function () {
            return false;
        });
    });
    //Many javascript here.
</script>

kk-container.aspxDefault.aspxにそのようなコードを入れて、これをDefault.aspxにロードします。

<div id="mycontainer"></div>
<script type="text/javascript">
    $("#mycontainer").load("kk-container.aspx");
</script>

ここまではすべて正常に機能します。ただし、これをkk-container.aspxDefault.aspxのさらにいくつかのdivにロードする必要があります。これにより、HTMLコントロールのIDで競合が発生します。$("#kk-action").click()すべての人に役立つわけではありません。kk-container.aspxこの問題を解決し、1つのDefault.aspxページに複数回ロードするにはどうすればよいですか。

さらに言うと、のロードごとにHTMLコントロールにランダムなIDを与えることを検討しましkk-container.aspxた。しかし、私はすでにほとんどIDセレクターを使用してスタイルシートを設計していました。そして、私はパケットjavascript、valums uploaderを使用し、で動作しkk-container.aspxます。また、編集が必要になります。もっと簡単な方法があれば、私は全体をコーディングしたくありません。

4

2 に答える 2

1

私はjQueryに期待しすぎて、必死にこの質問をしました。最初に、ページで「kk-container」を1回使用するか複数回使用するかを決定する必要がありました。「kk-container」を複数回ロードするために、次のことを考慮する必要がありました。

  • IDセレクターの代わりにクラスセレクターを使用してCSSを設計する。
  • この質問のように、HTML要素のランダムIDを生成します。
  • それらのランダムIDと互換性があるように動作するようにJavaScript関数を記述します。

したがって、jQueryが読み込まれているページでloadind "kk-container.aspx"を実行しても、IDの競合は発生しません。

とにかく、私は間違いを犯し、コードを書き直したくありませんでした。Default.aspxページに「kk-container.aspx」のコンテンツを問題なくロードするための解決策を見つけました。jQueryロード関数の代わりにiframeを使用しました。

IDが「kk-action」のアイテムが既にあるので、

<a href="#" id="kk-action">Action</a> (like this one)

IDが「kk-action」のアイテムを含むコンテンツをロードすると、問題が発生します。

$("#mycontainer").load("kk-container.aspx?id=" + recordID); //troublesome method.

代わりに、境界線のないiframeを作成し、そのコンテンツをiframeにロードします。

function btnEdit_Click(recordID) {
$('#mycontainer').html("");
    var kayitKutusuFrame = document.createElement("iframe");
    kk-Frame.setAttribute("id", "kk-iframe");
    kk-Frame.setAttribute("src", "kk-container.aspx?id=" + recordID);
    kk-Frame.setAttribute("class", "kk-iframe"); //For border: none;
    kk-Frame.setAttribute("frameBorder", "0");
    kk-Frame.setAttribute("hspace", "0");
    kk-Frame.setAttribute("onload", "heightAdapter();"); //For non-IE
    document.getElementById("Mycontainer").appendChild(kk-Frame);
    if (isIE = /*@cc_on!@*/false) { //For IE
        setTimeout(function () { heightAdapter() }, 500);
    } 
}

「kk-iframe」は複数回使用しないので、ランダムIDは付けませんでした。現在、FaceBoxにあります。iframeを完璧にするには、自動サイズ変更する必要があります。私のheightAdapter（）関数がそれを行います。コンテンツがiframeに読み込まれるときだけでなく、クリックによってコンテンツが動的に変化します。

これは、 GuyMalachiによるコンテンツに合わせてiframeのサイズを変更するための実際のコードです。

function calcHeight(content) {
    //find the height of the internal page
    var the_height = content.scrollHeight;

    //change the height of the iframe
    document.getElementById("kk-iframe").height = the_height;
}

これが私のheightAdapter（）関数で、コンテンツが読み込まれたときと、何かをクリックしてコンテンツが展開されたときの両方で機能します。

function boyutAyarlayici() {
    var content=document.getElementById("kk-Frame").contentWindow.document.body;
    calcHeight(content);
    if (content.addEventListener) { //Forn non-IE
        content.addEventListener('click', function () {
            calcHeight(content);
        }, false);
    }
    else if (content.attachEvent) { //For IE
        content.attachEvent('onclick', function () {
            calcHeight(content);
        });
    }
}

そして、以下はリピーターのリンクです。リンクは複製されるため、aspサーバーによって一意のIDを持つ必要があります。

<a href="#mycontainer" rel="facebox" id='btnEdit-<%# Eval("ID") %>'
onclick='btnEdit_Click(<%# Eval("ID") %>); return false;'>Düzenle</a>

これで、レプリカリンクのいずれかをクリックするたびに、IDが「kk-action」のアイテムを持つコンテンツを、「mycontainer」で作成される完璧なiframeに読み込むことができます。

<div id="mycontainer" class="kk-iframe" style="display:none"></div>

そして、コンテンツは私の派手なFaceBoxに表示されます。

于 2011-12-10T21:00:51.860 に答える
0

要素のスタイルを設定するには、クラスを使用する必要があります。ページごとに一意のIDは1つしか存在できないため、JavaScriptで次のような異なるIDを生成するか、クラスセレクターを使用する必要があります。

$('.kk-action').click()

上記は、そのクラスのすべての要素にバインディングを提供するため、おそらく最善の方法です。

于 2011-12-10T12:28:32.687 に答える