1. 首頁
  2. 問答
  3. jquery選項卡 - 將內容從包含的jsp切換到另一個

jquery選項卡 - 將內容從包含的jsp切換到另一個

2012-03-31 41 views
1

我有一個包含jquery選項卡的主頁面。我的選項卡的內容是JSP頁面我已經包括：jquery選項卡 - 將內容從包含的jsp切換到另一個

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Users</a></li> 
    </ul> 
    <div id="tabs-1"> <jsp:include page="users.jsp" /> </div> 
</div>

這個jsp頁面中包含顯示用戶詳細信息的表格。這是表格的標題： 我希望最後一列將包含一個「詳細信息」鏈接，當它被點擊時 - 我想 將標籤的內容更改爲顯示用戶詳細信息的不同jsp頁面。

幾個問題：

  1. 我怎麼切換到上點擊第二個JSP？

  2. 爲了呈現請求的用戶的詳細信息，我需要以某種方式將用戶ID傳遞到第二個jsp頁面。我該怎麼做？我有一個鏈接，它的ID是我所需要的用戶名：

    <td><a id="<%=user.getUserID()%>">Details</a></td>

我在這個真正的新，試圖goggling我的問題，但我不能拼湊它一起到一個有效的解決方案。

謝謝！

查看源代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Conf4You</title> 
<link type="text/css" href="css/cupertino/jquery-ui-1.8.18.custom.css" 

    rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 
     $('#tabs').tabs(); 
    }); 

</script> 
<style type="text/css"> 
/*demo page css*/ 

body { 
    font: 62.5% "Trebuchet MS", sans-serif; 
    margin: 50px; 
} 

.demoHeaders { 
    margin-top: 2em; 
} 
</style> 
</head> 
<body> 
<!-- Tabs --> 
<h2 class="demoHeaders">Tabs</h2> 
<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Users</a></li> 
</ul> 
<div id="tabs-1"> 







<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<link type="text/css" href="css/main.css" rel="stylesheet" /> 
<link type="text/css" href="css/tables/tableList.css" rel="stylesheet" /> 
</head> 
<body> 
<p class="horizontal-line">Actions</p> 
<p class="horizontal-line">Users</p> 
<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable"> 
    <thead> 
    <tr> 
     <th><h3>Name</h3></th> 
     <th><h3>Phone 1</h3></th> 
     <th><h3>Phone 2</h3></th> 
     <th><h3>Email</h3></th> 
     <th><h3>Company</h3></th> 
     <th><h3>Last Access</h3></th> 
     <th class="nosort"><h3>Details</h3></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>user0</td> 
     <td>Num10</td> 
     <td>num20</td> 
     <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td> 
     <td>yada</td> 
     <td>31-03-2012 06:32:34 PM</td> 
     <td><a id="1" onclick="detailsAction()" 

        style="color: blue;">Details</a></td> 
     <!-- todo- change details link --> 
    </tr> 
    <tr> 
     <td>user1</td> 
     <td>Num11</td> 
     <td>num21</td> 
     <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td> 
     <td>yada</td> 
     <td>31-03-2012 06:32:34 PM</td> 
     <td><a id="2" onclick="detailsAction()" 

        style="color: blue;">Details</a></td> 
     <!-- todo- change details link --> 
    </tr> 
    <tr> 
     <td>user2</td> 
     <td>Num12</td> 
     <td>num22</td> 
     <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td> 
     <td>yada</td> 
     <td>31-03-2012 06:32:34 PM</td> 
     <td><a id="3" onclick="detailsAction()" 

        style="color: blue;">Details</a></td> 
     <!-- todo- change details link --> 
    </tr> 
    <tr> 
     <td>user3</td> 
     <td>Num13</td> 
     <td>num23</td> 
     <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td> 
     <td>yada</td> 
     <td>31-03-2012 06:32:34 PM</td> 
     <td><a id="4" onclick="detailsAction()" 

        style="color: blue;">Details</a></td> 
     <!-- todo- change details link --> 
    </tr> 
    <tr> 
     <td>user4</td> 
     <td>Num14</td> 
     <td>num24</td> 
     <td><a style="color: blue;" href="mailto:[email protected]">[email protected]</a></td> 
     <td>yada</td> 
     <td>31-03-2012 06:32:34 PM</td> 
     <td><a id="5" onclick="detailsAction()" 

        style="color: blue;">Details</a></td> 
     <!-- todo- change details link --> 
    </tr> 
    </tbody> 
</table> 
<div id="controls"> 
    <div id="perpage"> 
    <select onchange="sorter.size(this.value)"> 
     <option value="5">5</option> 
     <option value="10" selected="selected">10</option> 
     <option value="20">20</option> 
     <option value="50">50</option> 
     <option value="100">100</option> 
    </select> 
    <span>Entries Per Page</span> </div> 
    <div id="navigation"> <img src="css/tables/images/first.gif" width="16" height="16" 

       alt="First Page" onclick="sorter.move(-1,true)" /> <img 

       src="css/tables/images/previous.gif" width="16" height="16" 

       alt="First Page" onclick="sorter.move(-1)" /> <img 

       src="css/tables/images/next.gif" width="16" height="16" 

       alt="First Page" onclick="sorter.move(1)" /> <img 

       src="css/tables/images/last.gif" width="16" height="16" 

       alt="Last Page" onclick="sorter.move(1,true)" /> </div> 
    <div id="text"> Displaying Page <span id="currentpage"></span> of <span 

       id="pagelimit"></span> </div> 
</div> 
<script type="text/javascript" src="js/tables/script.js"></script> 
<script type="text/javascript"> 

     var sorter = new TINY.table.sorter("sorter"); 

     sorter.head = "head"; 

     sorter.asc = "asc"; 

     sorter.desc = "desc"; 

     sorter.even = "evenrow"; 

     sorter.odd = "oddrow"; 

     sorter.evensel = "evenselected"; 

     sorter.oddsel = "oddselected"; 

     sorter.paginate = true; 

     sorter.currentid = "currentpage"; 

     sorter.limitid = "pagelimit"; 

     sorter.init("table", 1); 

    </script> 
</body> 
</html> 
</div> 
</div> 
</body> 
</html>

來源

2012-03-31 Blue

+0

可以發佈html ... jsp轉換html通過查看sourcr – DG3 2012-03-31 15:11:20

+0

完成後添加了查看源代碼，謝謝 – Blue 2012-03-31 15:36:35

回答

1

找到了解決方案，這應該是腳本：

<script type="text/javascript"> 

$(document).ready(function() { 
    $('#tabs').tabs({ 
     load: function(event, ui) { 
      $(ui.panel).delegate('a', 'click', function(event) { 
       $(ui.panel).load(this.href); 
       event.preventDefault(); 
      }); 
     } 
    }); 

    $("#tabs").bind('tabsselect', function(event, ui) { 
     window.location.href=ui.tab; 
    }); 

}); 

</script>

而且它的用法：

<div id="tabs"> 
     <ul> 
      <li><a href="users.jsp"><span>Users</span></a></li> 
      <li><a href="conference.jsp"><span>Conferences</span></a></li> 
      <li><a href="companies.jsp"><span>Companies</span></a></li> 
     </ul> 
</div>

這爲什麼內容，例如，第一個選項卡是users.jsp。在usrs.jsp中，我使用以下鏈接：

<td><a href="userDetails.jsp?userid=<%=user.getUserName()%>"> <img src="/conf4u/resources/imgs/yada.png" alt=""> Details </a> </td>

和userDetails.jsp現在在單擊時在相同的選項卡中打開。

來源

2012-04-15 09:08:54 Blue

相關問題

 相關問題