Create Tabs Dynamically Based on Values Selected in Listbox in ASP.Net -
does know how can create tabs dynamically based on selected listbox?
this have:
listbox:
<asp:listbox id="selectionlistbox" runat="server" appenddatabounditems="true" selectionmode="multiple" height="130px" width="350px"> <asp:listitem text="apple" value ="1" /> <asp:listitem text="watermelon" value ="2" /> <asp:listitem text="kiwi" value ="3" /> <asp:listitem text="plum" value ="4" /> <asp:listitem text="pineapple" value ="5" /> </asp:listbox> retrievebutton:
<asp:button id="retrievebutton" runat="server" text="button" /> based on user has selected listbox, when user pressed on retrieve button, number of tabs created based on number of values user has selected listbox.
for example:
let's user has selected 3 items listbox , click on button, 3 tabs should created @ bottom of page on same page tab names listbox items texts.
output:
+----------------------------------+
listbox retrievebutton +----------------------------------+
tabs: apple | watermelon | kiwi +----------------------------------+
any appreciated. thanks!
the code depend on how plan display tabs. using jqueryui dynamic tabs can added adding li elements. refer code example below (i've used html select - may have use corresponding client id of listbox)
$('document').ready(function(){ $("div#tabs").tabs().hide(); $("button#retrievebutton").click(function (e) { e.preventdefault(); $('#selectionlistbox option:selected').each(function () { var txt = $(this).text(); $("div#tabs ul").append( "<li><a href='#tab" + txt + "'>#" + txt + "</a></li>"); $("div#tabs").append( "<div id='tab" + txt + "'>#" + txt + "</div>"); $("div#tabs").tabs("refresh"); }); if ($("div#tabs ul li").length) { $('div#tabs').show(); $('button#retrievebutton').prop('disabled', true); } }); }; demo: jsfiddle
edit: following code attempts same thing using javascript. please note following code more or less untested, , attempt "reinvent wheel". recommend use jqueryui or bootstrap tabs.
aspx
<head runat="server"> <title></title> <style type="text/css"> .initial { display: block; padding: 4px 18px 4px 18px; float: left; /*background: url("../images/initialimage.png") no-repeat right top;*/ background-color: dimgray; color: black; font-weight: bold; } .initial:hover { color: white; /*background: url("../images/selectedbutton.png") no-repeat right top;*/ background-color: gray; } .clicked { float: left; display: block; /*background: url("../images/selectedbutton.png") no-repeat right top;*/ background-color: blue; padding: 4px 18px 4px 18px; color: black; font-weight: bold; color: white; } #tabs-content { float:left; clear:both; } #tabs-content div { display:none; border-style:double; border-width:2px; min-width: 600px; min-height:200px; } </style> <script type="text/javascript"> function changetab(ctrl) { var id = ctrl.getattribute('data-tab'); var alltabcontents = document.getelementbyid('tabs-content').getelementsbytagname('div'); var tabcontent = document.getelementbyid(id); (var = 0; < alltabcontents.length; i++) { alltabcontents[i].style.display = 'none'; } tabcontent.style.display = 'block'; } function addtabs() { var top = document.getelementbyid('tabs-link'); var bottom = document.getelementbyid('tabs-content'); var alltabcontents = document.getelementbyid('tabs-content').getelementsbytagname('div'); var tabcount = 1; (var = 0; < alltabcontents.length; i++) { tabcount++; } var listbox = document.getelementbyid('selectionlistbox'); (var = 0; < listbox.options.length; i++) { if (listbox.options[i].selected) { var newtab = document.createelement('div'); newtab.setattribute('class', 'initial'); newtab.setattribute('data-tab', 'tab'+tabcount); newtab.setattribute('onclick', 'changetab(this)'); newtab.innertext = listbox.options[i].text; top.appendchild(newtab); var newtabcontent = document.createelement('div'); newtabcontent.setattribute('id', 'tab' + tabcount); newtabcontent.innertext = listbox.options[i].text; bottom.appendchild(newtabcontent); tabcount++; } } return false; } </script> </head> <body > <form id="form1" runat="server"> <asp:listbox id="selectionlistbox" runat="server" appenddatabounditems="true" selectionmode="multiple" height="130px" width="350px"> <asp:listitem text="apple" value ="1" /> <asp:listitem text="watermelon" value ="2" /> <asp:listitem text="kiwi" value ="3" /> <asp:listitem text="plum" value ="4" /> <asp:listitem text="pineapple" value ="5" /> </asp:listbox> <asp:button id="retrievebutton" runat="server" text="button" onclientclick="return addtabs()" /> <div id="tabs"> <div id="tabs-link"> </div> <div id="tabs-content"> </div> </div> </form> </body> 
Comments
Post a Comment