У меня был простой рабочий (ASP.NET) сценарий здесь:
3 asp: RadioButton, каждое из которых имеет событие OnCheckedChanged, которое обновит asp: gridview.
Но теперь я хочу добавить описание для каждого выбора радиокнопок, и я подумал, что было бы неплохо добавить их во вкладки пользовательского интерфейса JQuery, как показано ниже:
<div id="tabs">
<ul>
<li><a href="#tabs-1">
<asp:RadioButton ID="RadioButton1" runat="server" Text="option1" Checked="True"
AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /> </a></li>
<li><a href="#tabs-2">
<asp:RadioButton ID="RadioButton2" runat="server" Text="option2"
AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /></a></li>
<li><a href="#tabs-3">
<asp:RadioButton ID="RadioButton3" runat="server" Text="option3"
AutoPostBack="True" OnCheckedChanged="RadioButton_CheckedChanged" /></a></li>
</ul>
<div id="tabs-1"> <p> content1</p> </div>
<div id="tabs-2"> <p> content2</p> </div>
<div id="tabs-3"> <p> content3</p> </div>
</div>
и jquery
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
Я хочу, чтобы соответствующие радиокнопки для каждой вкладки были выбраны после переключения на эту вкладку (щелкнув в любом месте внутри этой вкладки)
Я не знаю, как это сделать, вероятно, с помощью JQuery или JavaScript или любого другого рода предложения.
Пожалуйста, помогите мне
Источник сгенерированного HTML:
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">
<input type="radio" checked="checked" value="RadioButtonCart" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonCart"/><label for="ctl00_ContentPlaceHolder1_RadioButtonCart">option1</label></a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-2">
<span style="color: Green;"><input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonShetab\',\'\')', 0)" value="RadioButtonShetab" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonShetab"/><label for="ctl00_ContentPlaceHolder1_RadioButtonShetab">option2</label></span></a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-3">
<input type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$RadioButtonFish\',\'\')', 0)" value="RadioButtonFish" name="ctl00$ContentPlaceHolder1$g2" id="ctl00_ContentPlaceHolder1_RadioButtonFish"/><label for="ctl00_ContentPlaceHolder1_RadioButtonFish">option3</label></a></li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
<p> content1</p>
</div>
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<p> content2 </p>
</div>
<div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
<p> content3 </p>
</div>
</div>
ок, спасибо CraigF, я решил 2 проблемы с добавлением
идентификаторы для привязок, таких как id = "tabsA-1" и имитация обратной передачи для OnCheckedChanged = "RadioButton_CheckedChanged" с $ ("# aspnetForm"). submit ();
<script type="text/javascript">
$(document).ready(function() {
$("#tabsA-1").click(function() {
$("#<%=RadioButtonCart.ClientID %>").attr("checked", "checked");
$("#aspnetForm").submit();
});
});
</script>
Мне просто нужно найти способ выбрать нужную вкладку после обратной передачи, и моя проблема решена.
благодаря CraigF Again
вот последний кусок, чтобы выбрать правильную вкладку с помощью asp.net
<script type="text/javascript">
$(function() {
var $tabs = $("#tabs").tabs();
$tabs.tabs('select', '<%= selectedTabIndex %>');
});
</script>
, который selectedTabIndex является общедоступной строкой var в code_behind, и я обновляю ее значение в page_load.
Одна забавная проблема заключалась в том, что .tabs ('select', index) в JQuery не является нулевым индексом вкладки, как сказано на официальном сайте, и начинается с 1.