데이터베이스 생성 JQuery와 탭

간단한 스크립트를 들어, jQuery를 사용하여 동적으로 생성 된 DOM 작업을 살 것입니다. 그게 문제가있는 곳인가요?

업데이트 1 : 나는 이상한 결과를 제공하는 $("#tabs").tabs({ 섹션에서 get_tab_frame.aspx의 아약스를 이동 시도

, 즉 그냥 탭 내용없이 서식 탭의 이름을 반환합니다. 그런 다음 서식없는 탭을 클릭하고 탭 내용을 표시하는 대신 새 창을 엽니 다.

원래의 질문 :

<!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> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#tabs").tabs({ ajaxOptions: { success: function(){ $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .end() .find(".portlet-content"); $(".column").disableSelection(); } } }); }); </script> <style type="text/css"> .column { width: 170px; float: left; padding-bottom: 100px; } .portlet { margin: 0 1em 1em 0; } .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } .portlet-header .ui-icon { float: right; } .portlet-content { padding: 0.4em; } .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } .ui-sortable-placeholder * { visibility: hidden; } </style> </head> <body> <div id="tabs"> <ul> <li class="tab" id="tab_1"><a href="tabs.aspx?tab=1">Default</a></li> <li class="tab" id="tab_2"><a href="tabs.aspx?tab=2">Reports</a></li> <li class="tab" id="tab_3"><a href="tabs.aspx?tab=3">Other</a></li> </ul> </div> </body> </html>

지금이다 :

다음 스크립트는 단순히 3 개의 탭을 생성하고 쿼리 문자열 tab에 따라 tabs.aspx에서 각 탭의 내용을 얻을 수있는, 잘 작동 데이터베이스에 id="tabs"의 내용을 생성하고 다음 스크립트를 사용하여 jquery를 사용하여 생성 된 html을 div 탭에 삽입하십시오.

<!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> 
     <title></title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
     <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 

     <script type="text/javascript" language="javascript"> 
      $(document).ready(function() { 
       $("#tabs").tabs({ 
        ajaxOptions: { 
         success: function(){ 
          $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") 
           .find(".portlet-header") 
            .addClass("ui-widget-header ui-corner-all") 
            .end() 
           .find(".portlet-content"); 

          $.ajax({ 
           url: 'get_tab_frame.aspx?rand=' + Math.random(), 
           type: 'GET', 
           error: function(xhr, status, error) 
           { 
            alert(status); 
            alert(xhr.responseText); 
           }, 
           success: function(results) 
           { 
            $("#tabs").empty().html(results); 
           } 
          }); 

          $(".column").disableSelection(); 
         } 
        } 
       }); 
      }); 
     </script> 

     <style type="text/css"> 
      .column { width: 170px; float: left; padding-bottom: 100px; } 
      .portlet { margin: 0 1em 1em 0; } 
      .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; } 
      .portlet-header .ui-icon { float: right; } 
      .portlet-content { padding: 0.4em; } 
      .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } 
      .ui-sortable-placeholder * { visibility: hidden; } 
     </style> 
    </head> 
    <body> 
     <div id="tabs"> </div> 
    </body> 
</html>

이것은 어떤 이유로 작동하지 않습니다. get_tab_frame.aspx 정확히 같은 HTML을 생성하더라도 난 그냥 빈 화면을 얻을 즉, 내가 잘못하고있는 중이 야 어떻게 내가이 일을 어떻게해야합니까 무엇

<ul> 
    <li class="tab" id="tab_1"><a href="tabs.aspx?tab=1">Default</a></li> 
    <li class="tab" id="tab_2"><a href="tabs.aspx?tab=2">Reports</a></li> 
    <li class="tab" id="tab_3"><a href="tabs.aspx?tab=3">Other</a></li> 
</ul>

출처

2011-05-16 oshirowanen