Disabled and Invisible Tabs
You can disable or hide individual tabs using the Tab's isDisabled and isVisible properties.
Invisible and disabled tabs cannot be selected by the user.
You can disable or hide individual tabs using the Tab's isDisabled and isVisible properties.
Invisible and disabled tabs cannot be selected by the user.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // This file locates: "Scripts/Lesson/C1Nav/TabPanelDisabledInvisibleTabs.js".c1.documentReady(function () { var theTabPanel = wijmo.Control.getControl('#theTabPanel'); // toggle Europe's disabled state document.getElementById('disableEurope').addEventListener('click', function (e) { theTabPanel.getTab('tab-europe').isDisabled = e.target.checked; }); // toggle Oceania's visibility document.getElementById('showOceania').addEventListener('click', function (e) { theTabPanel.getTab('tab-oceania').isVisible = e.target.checked; });}); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1NavController : Controller { // GET: Adding public ActionResult TabPanelDisabledInvisibleTabs() { return View(); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <h1> @Html.Raw(Resources.C1Nav.TabPanelDisabledInvisibleTabs_Title)</h1><p> @Html.Raw(Resources.C1Nav.TabPanelDisabledInvisibleTabs_Text1) </p><p> @Html.Raw(Resources.C1Nav.TabPanelDisabledInvisibleTabs_Text2)</p><div id="theTabPanel"> <div> <a>Africa</a> <div> <ul> <li>Algeria</li> <li>Angola</li> <li>Benin</li> <li>Botswana</li> </ul> </div> </div> <div> <a>America</a> <div> <ul> <li>Canada</li> <li>Chile</li> <li>Mexico</li> <li>United States</li> </ul> </div> </div> <div> <a>Asia</a> <div> <ul> <li>China</li> <li>Korea</li> <li>India</li> <li>Japan</li> </ul> </div> </div> <div> <a id="tab-europe" class="wj-state-disabled">Europe</a> <div> <ul> <li>Austria</li> <li>England</li> <li>France</li> <li>Germany</li> <li>Netherlands</li> <li>Switzerland</li> </ul> </div> </div> <div> <a id="tab-oceania">Oceania</a> <div> <ul> <li>Australia</li> <li>Fiji</li> <li>New Zealand</li> <li>Samoa</li> </ul> </div> </div></div>@Html.C1().TabPanel("#theTabPanel")<div class="options"> <label for="disableEurope"> Disable Europe </label> <input id="disableEurope" type="checkbox" checked></div><div class="options"> <label for="showOceania"> Show Oceania </label> <input id="showOceania" type="checkbox" checked></div> |