如何在同一頁面上使用usercontrol的多個實例（使用jquery）

我一直在處理一個帶有jquery定時器的usercontrol。起初，我有用戶控件內的jquery。但是當我將這兩個控件添加到我的頁面時，第二個用戶控件沒有很好地顯示它的數據。如何在同一頁面上使用usercontrol的多個實例（使用jquery）

現在我已經把jquery放到了主頁面，usercontrol只使用了jquery的id。

這裏是我的用戶：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" 
    Inherits="WebUserControl" %> 
<style type="text/css"> 
    #mainpanel 
    { 
     width: 145px; 
     height: 123px; 
    } 
</style> 
<div id="mainpanel"> 
    <div> 
     test</div> 
    <div id="shortly" style="background-color: #FFFFFF"> 
    </div> 
    <button id="resetButton"> 
     Reset 
    </button> 
</div>

網主頁：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

    <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %> 
    <!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"> 
    <head runat="server"> 
     <title>hoi</title> 
     <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> 
     <script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> 
     <link href="Css/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <script type="text/javascript" src="Scripts/jquery.countdown.js"></script> 
     <script type="text/javascript"> 


      $(document).ready(function() { 

      $(function() { 
      $("#mainpanel"); 
     }); 

       shortly = new Date(); 
       shortly.setSeconds(shortly.getSeconds() + 5.5); 
       $('#shortly').countdown({ until: shortly, 
        onExpiry: liftOff, layout: '{sn}', 
       }); 
       $('#resetButton').click(function() { 
       $('#mainpanel').effect("highlight", {}, 700); 
       $('#shortly').effect("highlight", {}, 700); 
        shortly = new Date(); 
        shortly.setSeconds(shortly.getSeconds() + 5.5); 
        $('#shortly').countdown('change', { until: shortly }); 

       }); 


       function liftOff() { 
        // refresh the page 
        window.location = window.location; 
       } 


      }); 

     </script> 
    </head> 
    <body> 
     <uc1:WebUserControl ID="WebUserControl1" runat="server" /> 
<uc1:WebUserControl ID="WebUserControl2" runat="server" /> 

    </body> 
    </html>

但是還是我的用戶控件都怪怪的，現在我的問題是：「我怎麼能做出同樣的用戶控件上的一個正常工作頁？」

這兩個都使用相同的jQuery代碼，但按鈕等只應該在用戶控件本身內工作。

來源

2010-05-19 Julian

正如David所建議的，當您重複使用用戶控件並且您正在明確設置它們的id時，您將最終得到幾個控件，它們在頁面上共享相同的id。我想$("#someid")會返回頁面中的第一個元素，而不一定是你真正想要的元素。

David建議將CSS類添加到用戶控件中的元素（這與jQuery無關 - 儘管您編寫的jQuery將引用它們）。

例如

3210

[PS。請注意，您應該從您的用戶控件中刪除您的CSS，因爲每次控件出現在頁面上時都會重複該操作，這是不好的做法，例如包括這無論是在您的主頁或單獨的CSS文件]

<style type="text/css"> 
    #mainpanel 
    { 
     width: 145px; 
     height: 123px; 
    } 
    #shortly 
    { 
     background-color: #FFFFFF 
    } 
</style>

你的腳本然後可以像

$(function() { 
    // function that does something exciting? 
    var liftOff = function() { 
     // .... 
    }; 

    // Get a date that is some (short) time in the future 
    var getDeadline = function() { 
     var shortly = new Date(); 
     shortly.setSeconds(shortly.getSeconds() + 5.5); 
     return shortly; 
    }; 

    // Attach click handler to all our buttons 
    $("div.mainpanel button.resetButton").click(function(event){ 

     // I am assuming that you will not be nesting these controls? 
     var $mainpanel = $(this).parents("div.mainpanel") // this will find the mainpanel div that contains the pressed button 
       .effect("highlight", {}, 700); 

     $("div.shortly", $mainpanel) // this will find any div with the class = shortly inside mainpanel 
       .countdown('change', { until: getDeadline() });  
    }); 

    // Start all countdowns going on page load 
    $('#shortly').countdown({ 
     until: getDeadline(), 
     onExpiry: liftOff, 
     layout: '{sn}' 
    }); 
});

來源

2010-05-20 22:17:06

+1提供詳細示例的好工作。 – David 2010-05-21 14:55:53

謝謝你！真正appriciate這！ – Julian 2010-05-28 10:55:50

您的用戶控件在元素上使用id =「」。 Id在一個HTML頁面中必須是唯一的。如果您需要附加css樣式或通過jquery進行查詢，您需要使用類而不是id，以便第二個控件不會違反id必須是唯一的約定。

來源

2010-05-19 16:31:10 David

的ID是唯一的控制本身，忘記粘貼整個炫魅代碼。現在編輯，你看到兩個usercontrols都獲得自己的ID。 – Julian 2010-05-19 16:36:06

不，我的意思是用戶控件本身的標記是在像

這樣的元素上設置標識，你需要使用像

這樣的類，然後使用jquery類選擇器而不是id選擇器 – David 2010-05-19 16:38:04

我打算看看這個，謝謝！如果有人知道其他方式做同樣的事情，請留言。大衛，你可能有很好的例子嗎？ – Julian 2010-05-19 16:42:00

如何在同一頁面上使用usercontrol的多個實例（使用jquery）

回答

相關問題