Accordion
Accordion
概要
Accordion コントロールを使用すると、コンテンツを折りたたみ可能なパネルに整理できます。
機能
サンプル
Accordion
アコーディオンのプロパティを変更します。
Connection
Wi-Fi, Mobile, Data usage, and Hotspot
Connected Devices
Bluetooth, NFC
Apps & Notifications
Recent apps, Default apps, Block, Allow
Battery
39% - Should last until about 7:35 PM
説明
このサンプルは、Accordion コントロールの使用法と主なプロパティを示しています。
"最初のパネルには、Accordionコントロールに関するいくつかの機能が表示されます。これらの設定を変更して、アコーディオンの動作をカスタマイズできます。
残りのパネルは、アコーディオンの使用方法を説明するためののコンテンツの例を示します。"
ソース
IndexController.cs
using MvcExplorer.Models; using System.Web.Mvc; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class AccordionController : Controller { // GET: Index public ActionResult Index(FormCollection collection) { return View(); } } }
Index.cshtml
@section Styles{ <style type="text/css"> /* Accordion: customize the labeled inputs */ .wj-labeled-input { width: 30%; } .wj-labeled-input > label > span { display: block; font-weight: normal; font-size: 90%; opacity: .90; color: black; } </style> } @section Scripts{ <script> c1.documentReady(function () { let acc = wijmo.Control.getControl("#mvcAccordion"); link(acc, 'showIcons'); link(acc, 'autoSwitch'); link(acc, 'isAnimated'); link(acc, 'allowCollapseAll'); link(acc, 'allowExpandMany'); }); function link(acc, id) { let cb = document.getElementById(id); acc[id] = cb.checked; cb.addEventListener('click', function(e) { acc[id] = cb.checked; }); } </script> } <div class="container-fluid"> <div id="mvcAccordion"> <div> <!-- pane --> <div class="main-pane"> <!-- header --> Accordion <div class="desc"> @Html.Raw(Resources.Accordion.Index_Pane_Text0) </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="showIcons" type="checkbox" checked /> <label for="showIcons"> ShowIcons <span>@Html.Raw(Resources.Accordion.Index_Pane_Text1)</span> </label> </div> <div class="wj-labeled-input switch"> <input id="autoSwitch" type="checkbox" checked /> <label for="autoSwitch"> AutoSwitch <span>@Html.Raw(Resources.Accordion.Index_Pane_Text2)</span> </label> </div> <div class="wj-labeled-input switch"> <input id="isAnimated" type="checkbox" checked /> <label for="isAnimated"> IsAnimated <span>@Html.Raw(Resources.Accordion.Index_Pane_Text3)</span> </label> </div> <div class="wj-labeled-input switch"> <input id="allowCollapseAll" type="checkbox" /> <label for="allowCollapseAll"> AllowCollapseAll <span>@Html.Raw(Resources.Accordion.Index_Pane_Text4)</span> </label> </div> <div class="wj-labeled-input switch"> <input id="allowExpandMany" type="checkbox" /> <label for="allowExpandMany"> AllowExpandMany <span>@Html.Raw(Resources.Accordion.Index_Pane_Text5)</span> </label> </div> </div> </div> <div> <!-- pane --> <div> <!-- header --> Connection <div class="desc"> Wi-Fi, Mobile, Data usage, and Hotspot </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="wifi" type="checkbox" checked /> <label for="wifi"> Wi-Fi <span>Turn Wi-fi on or off</span> </label> </div> <div class="wj-labeled-input switch"> <input id="mobiledata" type="checkbox" /> <label for="mobiledata"> Mobile Data <span>Turn Mobile data on or off</span> </label> </div> <div class="wj-labeled-input switch"> <input id="bluetooth" type="checkbox" checked /> <label for="bluetooth"> Bluetooth <span>Turn Bluetooth on or off</span> </label> </div> <div class="wj-labeled-input switch"> <input id="apmode" type="checkbox" /> <label for="apmode"> Airplane Mode <span>Turn Airplane mode on or off</span> </label> </div> <div class="wj-labeled-input switch"> <input id="hotspot" type="checkbox" /> <label for="hotspot"> Hot Spot & Tethering <span>Hotspot on, Tethering</span> </label> </div> </div> </div> <div> <!-- pane --> <div> <!-- header --> Connected Devices <div class="desc"> Bluetooth, NFC </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="dev1" type="checkbox" checked /> <label for="dev1"> Gear Fit2 Pro <span>Health monitor</span> </label> </div> <div class="wj-labeled-input switch"> <input id="dev2" type="checkbox" /> <label for="dev2"> SYNC <span>Car connection</span> </label> </div> <div class="wj-labeled-input switch"> <input id="dev3" type="checkbox" /> <label for="dev3"> Samsung XT-9343 <span>TV</span> </label> </div> <button class="btn btn-primary"> See More... </button> </div> </div> <div> <!-- pane --> <div> <!-- header --> Apps & Notifications <div class="desc"> Recent apps, Default apps, Block, Allow </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="app-chrome" type="checkbox" /> <label for="app-chrome"> Chrome <span>Web browser</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-outlook" type="checkbox" /> <label for="app-outlook"> Outlook <span>Mail and schedule</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-fb" type="checkbox" checked /> <label for="app-fb"> Facebook <span>Social media</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-twitter" type="checkbox" /> <label for="app-twitter"> Twitter <span>Social media</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-teams" type="checkbox" checked /> <label for="app-teams"> Teams <span>Chat, Meetings, Calling, Collaboration</span> </label> </div> <div class="wj-labeled-input switch"> <input id="app-skype" type="checkbox" /> <label for="app-skype"> Skype <span>Chat, Meetings, Calling, Collaboration</span> </label> </div> <button class="btn btn-primary"> See More... </button> </div> </div> <div> <!-- pane --> <div> <!-- header --> Battery <div class="desc"> <span style="color:orangered">39%</span> - Should last until about 7:35 PM </div> </div> <div> <!-- content --> <div class="wj-labeled-input switch"> <input id="bat-sav" type="checkbox" checked /> <label for="bat-sav"> Battery Saver <span>Slow down to reduce battery usage</span> </label> </div> <div class="wj-labeled-input switch"> <input id="bat-adapt" type="checkbox" /> <label for="bat-adapt"> Adaptive Battery <span>Detect when apps drain battery</span> </label> </div> <div class="wj-labeled-input switch"> <input id="bat-pct" type="checkbox" /> <label for="bat-pct"> Battery Percentage <span>Show battery percentage</span> </label> </div> </div> </div> </div> </div> @Html.C1().Accordion("#mvcAccordion") @section Summary{ <p>@Html.Raw(Resources.Accordion.Index_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.Accordion.Index_Text1)</p> <p>@Html.Raw(Resources.Accordion.Index_Text2)</p> }
マニュアル