TabPanel
TabPanel
無効状態および非表示のタブ
このビューは、TabPanel コントロール内の個々のタブを無効または非表示にする方法を示します。
機能
ソース
DisabledInvisibleTabsController.cs
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Collections.Generic;
using Microsoft.AspNetCore.Http;
namespace MvcExplorer.Controllers
{
public partial class TabPanelController : Controller
{
// GET: DisabledInvisibleTabs
public ActionResult DisabledInvisibleTabs(IFormCollection collection)
{
var settings = new ClientSettingsModel("tabDisableHide")
{
Settings = CreateDisabledInvisibleSettings(),
DefaultValues = GetDisabledInvisibleDefaultValues()
};
ViewBag.DemoSettingsModel = settings;
return View();
}
private static IDictionary<string, object[]> CreateDisabledInvisibleSettings()
{
var settings = new Dictionary<string, object[]>
{
{"DisableEurope", new object[]{false, true}},
{"ShowOceania", new object[]{false, true}},
};
return settings;
}
private static IDictionary<string, object> GetDisabledInvisibleDefaultValues()
{
var defaultValues = new Dictionary<string, object>
{
{"DisableEurope",true},
{"ShowOceania",true},
};
return defaultValues;
}
}
}
DisabledInvisibleTabs.cshtml
@{
ClientSettingsModel demoSettingModel = ViewBag.DemoSettingsModel;
ViewBag.DemoSettings = true;
}
<script>
function customChangeDisableEurope(control, value) {
control.getTab('tab-europe').isDisabled = value;
}
function customChangeShowOceania(control, value) {
control.getTab('tab-oceania').isVisible = value;
}
</script>
<c1-tab-panel id="@demoSettingModel.ControlId">
<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>
</c1-tab-panel>
@section Summary{
<p>@Html.Raw(TabPanelRes.DisabledInvisibleTabs_Text0)</p>
}
@section Description{
<p>@Html.Raw(TabPanelRes.DisabledInvisibleTabs_Text1)</p>
}
マニュアル