1

kk-container.aspx我设计了一个名为用作控件的 ASP.NET 页面，该页面将通过 jQuery 加载函数加载到 Default.aspx 中。该页面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.aspx在 Default.aspx 的几个 div 中加载它。这会导致 HTML 控件的 id 发生冲突。$("#kk-action").click()不适用于所有人。如何解决此问题并kk-container.aspx在一个 Default.aspx 页面中多次加载。

更要说的是：我考虑为每次加载的 HTML 控件提供随机 id kk-container.aspx。然而，我已经设计了我的样式表，主要是使用 id 选择器。我使用包 javascript，valuems 上传器，在kk-container.aspx. 它还需要编辑。如果有更简单的方法，我不想全部编码。

4

2 回答 2

1

我对 jQuery 期望太高，拼命问这个问题。我应该首先决定是否在一个页面中使用一次或多次“kk-container”。为了多次加载“kk-container”的东西，我不得不考虑这些：

  • 使用类选择器而不是 id 选择器来设计 CSS。
  • 像这个问题一样为我的 HTML 元素生成随机 id 。
  • 编写我的 javascript 函数，以便它们与那些随机 id 兼容。

因此，在带有 jQ​​uery 加载的页面中加载“kk-container.aspx”不会导致任何 id 冲突。

无论如何，我做错了，不想重写我的代码。我找到了一个解决方案，可以在我的 Default.aspx 页面中毫无问题地加载“kk-container.aspx”的内容。我使用 iframe 而不是 jQuery 加载函数。

由于已经有一个 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 中时，内容也会因为我的点击而动态变化。

这是Guy Malachi调整 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”的项目的内容加载到我的完美 iframe 中，该 iframe 将在“mycontainer”中创建。

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

内容将显示在我的花哨的 FaceBox 中。

于 2011-12-10T21:00:51.860 回答
0

您将不得不使用类来设置元素的样式。每个页面只能有一个唯一 ID，因此您将不得不生成不同的 ID 或在 JavaScript 中使用类选择器，例如：

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

以上可能是最好的方法，因为它将为该类的每个元素提供绑定

于 2011-12-10T12:28:32.687 回答