В настоящее время я пытаюсь внедрить вкладки в мой проект Windows Forms-Application. Я использую ASP. NET для Front End, C# для Back End и jQuery для вкладок.
Пример кода:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example.aspx.cs" Inherits="TestsASP.Example" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<form runat="server">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Device X</a></li>
<li><a href="#tabs-2">Device Y</a></li>
</ul>
<h1>Tab example</h1>
<div id="tabs-1">
Device name:
<br />
<asp:TextBox ID="deviceX" runat="server" Width="200px">Device X</asp:TextBox>
<br /><br />
</div>
<div id="tabs-2">
Device name:
<br />
<asp:TextBox ID="deviceY" runat="server" Width="200px">Device Y</asp:TextBox>
<br /><br />
</div>
</div>
</form>
</body>
</html>
Текущий код работает, но я хотел бы иметь несколько вкладок, которые изменяют одно текстовое поле в зависимости от нажатой вкладки. Например:
- нажатие на tab1> текст textbox1 (ID = box1) - 1
- нажатие на tab2> текст textbox1 (ID = box1) - 2
Я не уверен, как это возможно, но, может быть, что-то вроде этого:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example.aspx.cs" Inherits="TestsASP.Example" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab example</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#tabs").tabs();
$("#tabs-1").on("tabsbeforeload", function(event, ui) {
document.getElementById("<%=deviceX.ClientID%>").value = 1;
})
$("#tabs-2").on("tabsbeforeload", function(event, ui) {
document.getElementById("<%=deviceX.ClientID%>").value = 2;
})
});
</script>
</head>
<body>
<form runat="server">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Device X</a></li>
<li><a href="#tabs-2">Device Y</a></li>
</ul>
<h1>Tab example</h1>
<div id="tabs-1; tabs-2">
Device name:
<br />
<asp:TextBox ID="deviceX" runat="server" Width="200px">Device X</asp:TextBox>
<br /><br />
</div>
</div>
</form>
</body>
</html>