Files
luci/jsapi/LuCI.ui.html
2026-02-22 16:19:14 +00:00

3 lines
56 KiB
HTML

<!DOCTYPE html><html lang="en" style="font-size:16px"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.png"><link type="text/css" rel="stylesheet" href="extra.css"><title>Class: ui</title><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><script src="scripts/third-party/hljs.js" defer="defer"></script><script src="scripts/third-party/hljs-line-num.js" defer="defer"></script><script src="scripts/third-party/popper.js" defer="defer"></script><script src="scripts/third-party/tippy.js" defer="defer"></script><script src="scripts/third-party/tocbot.min.js"></script><script>var baseURL="/",locationPathname="";baseURL=(locationPathname=document.location.pathname).substr(0,locationPathname.lastIndexOf("/")+1)</script><link rel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbol id="copy-icon" viewbox="0 0 488.3 488.3"><g><path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124 C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124 c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227 c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6 V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbol id="search-icon" viewBox="0 0 512 512"><g><g><path d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474 c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323 c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848 S326.847,409.323,225.474,409.323z"/></g></g><g><g><path d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328 c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbol id="font-size-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbol id="add-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbol id="minus-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></symbol><symbol id="dark-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbol id="light-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbol id="reset-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbol id="down-icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbol id="codepen-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbol id="close-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbol id="menu-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><body data-theme="fallback-dark"><div class="sidebar-container"><div class="sidebar" id="sidebar"><a href="/" class="sidebar-title sidebar-title-anchor">LuCI Documentation</a><div class="sidebar-items-container"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-JsonRpcHowTo.html">Using JSON RPC daemon</a></div><div class="sidebar-section-children"><a href="tutorial-Modules.html">Modules</a></div><div class="sidebar-section-children"><a href="tutorial-ThemesHowTo.html">Making Themes</a></div><div class="sidebar-section-children"><a href="tutorial-i18n.html">Internationalisation - i18n</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="LuCI.module_cbi.html">cbi</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="LuCI.html">LuCI</a></div><div class="sidebar-section-children"><a href="LuCI.baseclass.html">baseclass</a></div><div class="sidebar-section-children"><a href="LuCI.dom.html">dom</a></div><div class="sidebar-section-children"><a href="LuCI.form.html">form</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractElement.html">AbstractElement</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractSection.html">AbstractSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractValue.html">AbstractValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.Button.html">Button</a></div><div class="sidebar-section-children"><a href="LuCI.form.DirectoryPicker.html">DirectoryPicker</a></div><div class="sidebar-section-children"><a href="LuCI.form.DummyValue.html">DummyValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.DynamicList.html">DynamicList</a></div><div class="sidebar-section-children"><a href="LuCI.form.FileUpload.html">FileUpload</a></div><div class="sidebar-section-children"><a href="LuCI.form.Flag.html">Flag</a></div><div class="sidebar-section-children"><a href="LuCI.form.GridSection.html">GridSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.HiddenValue.html">HiddenValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.JSONMap.html">JSONMap</a></div><div class="sidebar-section-children"><a href="LuCI.form.ListValue.html">ListValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.Map.html">Map</a></div><div class="sidebar-section-children"><a href="LuCI.form.MultiValue.html">MultiValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.NamedSection.html">NamedSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.RangeSliderValue.html">RangeSliderValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.RichListValue.html">RichListValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.SectionValue.html">SectionValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.TableSection.html">TableSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.TextValue.html">TextValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.TypedSection.html">TypedSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.Value.html">Value</a></div><div class="sidebar-section-children"><a href="LuCI.fs.html">fs</a></div><div class="sidebar-section-children"><a href="LuCI.headers.html">headers</a></div><div class="sidebar-section-children"><a href="LuCI.network.html">network</a></div><div class="sidebar-section-children"><a href="LuCI.network.Device.html">Device</a></div><div class="sidebar-section-children"><a href="LuCI.network.Hosts.html">Hosts</a></div><div class="sidebar-section-children"><a href="LuCI.network.Protocol.html">Protocol</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiDevice.html">WifiDevice</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiNetwork.html">WifiNetwork</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiVlan.html">WifiVlan</a></div><div class="sidebar-section-children"><a href="LuCI.poll.html">poll</a></div><div class="sidebar-section-children"><a href="LuCI.request.html">request</a></div><div class="sidebar-section-children"><a href="LuCI.request.poll.html">poll</a></div><div class="sidebar-section-children"><a href="LuCI.response.html">response</a></div><div class="sidebar-section-children"><a href="LuCI.rpc.html">rpc</a></div><div class="sidebar-section-children"><a href="LuCI.session.html">session</a></div><div class="sidebar-section-children"><a href="LuCI.uci.html">uci</a></div><div class="sidebar-section-children"><a href="LuCI.ui.html">ui</a></div><div class="sidebar-section-children"><a href="LuCI.ui.AbstractElement.html">AbstractElement</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Checkbox.html">Checkbox</a></div><div class="sidebar-section-children"><a href="LuCI.ui.ComboButton.html">ComboButton</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Combobox.html">Combobox</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Dropdown.html">Dropdown</a></div><div class="sidebar-section-children"><a href="LuCI.ui.DynamicList.html">DynamicList</a></div><div class="sidebar-section-children"><a href="LuCI.ui.FileUpload.html">FileUpload</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Hiddenfield.html">Hiddenfield</a></div><div class="sidebar-section-children"><a href="LuCI.ui.RangeSlider.html">RangeSlider</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Select.html">Select</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Textarea.html">Textarea</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Textfield.html">Textfield</a></div><div class="sidebar-section-children"><a href="LuCI.ui.changes.html">changes</a></div><div class="sidebar-section-children"><a href="LuCI.ui.menu.html">menu</a></div><div class="sidebar-section-children"><a href="LuCI.ui.tabs.html">tabs</a></div><div class="sidebar-section-children"><a href="LuCI.validation.html">validation</a></div><div class="sidebar-section-children"><a href="LuCI.validation.Validator.html">Validator</a></div><div class="sidebar-section-children"><a href="LuCI.validation.ValidatorFactory.html">ValidatorFactory</a></div><div class="sidebar-section-children"><a href="LuCI.view.html">view</a></div><div class="sidebar-section-children"><a href="LuCI.xhr.html">xhr</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-externals"><div>Externals</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="external-String.html">String</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"><div class="github-home navbar-item"><a id="" href="https://github.com/openwrt/luci" target="">GitHub Project Page</a></div></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#dark-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section><header><h1 id="ui-title" class="has-anchor"><span class="ancestors"><a href="LuCI.html">LuCI</a>.</span> ui</h1><div class="class-description"><p>Provides high level UI helper functionality. To import the class in views, use <code>'require ui'</code>, to import it in external JavaScript, use <code>L.require(&quot;ui&quot;).then(...)</code>.</p></div></header><article><div class="container-overview"><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4150">line 4150</a></li></ul></dd></div></dl></div><h2 id="classes" class="subsection-title has-anchor">Classes</h2><dl><dt><a href="LuCI.ui.AbstractElement.html">AbstractElement</a></dt><dd></dd><dt><a href="LuCI.ui.Checkbox.html">Checkbox</a></dt><dd></dd><dt><a href="LuCI.ui.ComboButton.html">ComboButton</a></dt><dd></dd><dt><a href="LuCI.ui.Combobox.html">Combobox</a></dt><dd></dd><dt><a href="LuCI.ui.Dropdown.html">Dropdown</a></dt><dd></dd><dt><a href="LuCI.ui.DynamicList.html">DynamicList</a></dt><dd></dd><dt><a href="LuCI.ui.FileUpload.html">FileUpload</a></dt><dd></dd><dt><a href="LuCI.ui.Hiddenfield.html">Hiddenfield</a></dt><dd></dd><dt><a href="LuCI.ui.RangeSlider.html">RangeSlider</a></dt><dd></dd><dt><a href="LuCI.ui.Select.html">Select</a></dt><dd></dd><dt><a href="LuCI.ui.Textarea.html">Textarea</a></dt><dd></dd><dt><a href="LuCI.ui.Textfield.html">Textfield</a></dt><dd></dd><dt><a href="LuCI.ui.changes.html">changes</a></dt><dd></dd><dt><a href="LuCI.ui.menu.html">menu</a></dt><dd></dd><dt><a href="LuCI.ui.tabs.html">tabs</a></dt><dd></dd></dl><h2 id="methods" class="subsection-title has-anchor">Methods</h2><h3 class="name has-anchor" id="addNotification"><span class="type-signature"></span>addNotification<span class="signature">(title<span class="signature-attributes">opt</span>, children, &hellip;classes<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node}</span></h3><div class="description"><p>Add a notification banner at the top of the current view.</p><p>A notification banner is an alert message usually displayed at the top of the current view, spanning the entire available width. Notification banners will stay in place until dismissed by the user. Multiple banners may be shown at the same time.</p><p>Additional CSS class names may be passed to influence the appearance of the banner. Valid values for the classes depend on the underlying theme.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>title</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="description last"><p>The title of the notification banner. If <code>null</code>, no title element will be rendered.</p></td></tr><tr><td class="name"><code>children</code></td><td class="type"><span class="param-type">*</span></td><td class="attributes"></td><td class="description last"><p>The contents to add to the notification banner. This should be a DOM node or a document fragment in most cases. The value is passed as-is to the <code>dom.content()</code> function - refer to its documentation for applicable values.</p></td></tr><tr><td class="name"><code>classes</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br>&lt;repeatable><br></td><td class="description last"><p>A number of extra CSS class names which are set on the notification banner element.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4368">line 4368</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-see bold">See</dt><dd class="tag-see"><ul><li>LuCI.dom.content</li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns a DOM Node representing the notification banner element.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Node</span></dd></dl></div><h3 class="name has-anchor" id="addTimeLimitedNotification"><span class="type-signature"></span>addTimeLimitedNotification<span class="signature">(title<span class="signature-attributes">opt</span>, children, timeout<span class="signature-attributes">opt</span>, &hellip;classes<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node}</span></h3><div class="description"><p>Add a time-limited notification banner at the top of the current view.</p><p>A notification banner is an alert message usually displayed at the top of the current view, spanning the entire available width. Notification banners will stay in place until dismissed by the user, or it has expired. Multiple banners may be shown at the same time.</p><p>Additional CSS class names may be passed to influence the appearance of the banner. Valid values for the classes depend on the underlying theme.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>title</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="description last"><p>The title of the notification banner. If <code>null</code>, no title element will be rendered.</p></td></tr><tr><td class="name"><code>children</code></td><td class="type"><span class="param-type">*</span></td><td class="attributes"></td><td class="description last"><p>The contents to add to the notification banner. This should be a DOM node or a document fragment in most cases. The value is passed as-is to the <code>dom.content()</code> function - refer to its documentation for applicable values.</p></td></tr><tr><td class="name"><code>timeout</code></td><td class="type"><span class="param-type">number</span></td><td class="attributes">&lt;optional><br></td><td class="description last"><p>A millisecond value after which the notification will disappear automatically. If omitted, the notification will remain until it receives the click event.</p></td></tr><tr><td class="name"><code>classes</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br>&lt;repeatable><br></td><td class="description last"><p>A number of extra CSS class names which are set on the notification banner element.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4440">line 4440</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-see bold">See</dt><dd class="tag-see"><ul><li>LuCI.dom.content</li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns a DOM Node representing the notification banner element.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Node</span></dd></dl></div><h3 class="name has-anchor" id="addValidator"><span class="type-signature"></span>addValidator<span class="signature">(field, type, optional<span class="signature-attributes">opt</span>, vfunc<span class="signature-attributes">opt</span>, &hellip;events<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {function}</span></h3><div class="description"><p>Add validation constraints to an input element.</p><p>Compile the given type expression and optional validator function into a validation function and bind it to the specified input element events.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>field</code></td><td class="type"><span class="param-type">Node</span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The DOM input element node to bind the validation constraints to.</p></td></tr><tr><td class="name"><code>type</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The datatype specification to describe validation constraints. Refer to the <code>LuCI.validation</code> class documentation for details.</p></td></tr><tr><td class="name"><code>optional</code></td><td class="type"><span class="param-type">boolean</span></td><td class="attributes">&lt;optional><br></td><td class="default">false</td><td class="description last"><p>Specifies whether empty values are allowed (<code>true</code>) or not (<code>false</code>). If an input element is not marked optional it must not be empty, otherwise it will be marked as invalid.</p></td></tr><tr><td class="name"><code>vfunc</code></td><td class="type"><span class="param-type">function</span> |<wbr> <span class="param-type">Array.&lt;function()></span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>Specifies a custom validation function or an array of validation functions which are invoked after the other validation constraints are applied. Each function must return <code>true</code> to accept the passed value. When multiple functions are provided as an array, they are executed serially and validation stops at the first function that returns a non-true value. Any non-true return type is converted to a string and treated as validation error message.</p></td></tr><tr><td class="name"><code>events</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br>&lt;repeatable><br></td><td class="default">blur, keyup</td><td class="description last"><p>The list of events to bind. Each received event will trigger a field validation. If omitted, the <code>keyup</code> and <code>blur</code> events are bound by default.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line5609">line 5609</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-see bold">See</dt><dd class="tag-see"><ul><li><a href="LuCI.validation.html">LuCI.validation</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns the compiled validator function which can be used to trigger field validation manually or to bind it to further events.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">function</span></dd></dl></div><h3 class="name has-anchor" id="awaitReconnect"><span class="type-signature"></span>awaitReconnect<span class="signature">(&hellip;hosts<span class="signature-attributes">opt</span>)</span></h3><div class="description"><p>Wait for device to come back online and reconnect to it.</p><p>Poll each given hostname or IP address and navigate to it as soon as one of the addresses becomes reachable.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>hosts</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br>&lt;repeatable><br></td><td class="default">[window.location.host]</td><td class="description last"><p>The list of IP addresses and host names to check for reachability. If omitted, the current value of <code>window.location.host</code> is used by default.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line5080">line 5080</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="createHandlerFn"><span class="type-signature"></span>createHandlerFn<span class="signature">(ctx, fn, &hellip;args)</span><span class="type-signature"> &rarr; (nullable) {function}</span></h3><div class="description"><p>Create a pre-bound event handler function.</p><p>Generate and bind a function suitable for use in event handlers. The generated function automatically disables the event source element and adds an active indication to it by adding appropriate CSS classes.</p><p>It will also await any promises returned by the wrapped function and re-enable the source element after the promises ran to completion.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>ctx</code></td><td class="type"><span class="param-type">*</span></td><td class="attributes"></td><td class="description last"><p>The <code>this</code> context to use for the wrapped function.</p></td></tr><tr><td class="name"><code>fn</code></td><td class="type"><span class="param-type">function</span> |<wbr> <span class="param-type">string</span></td><td class="attributes"></td><td class="description last"><p>Specifies the function to wrap. In case of a function value, the function is used as-is. If a string is specified instead, it is looked up in <code>ctx</code> to obtain the function to wrap. In both cases the bound function will be invoked with <code>ctx</code> as <code>this</code> context</p></td></tr><tr><td class="name"><code>args</code></td><td class="type"><span class="param-type">*</span></td><td class="attributes">&lt;repeatable><br></td><td class="description last"><p>Any further parameter as passed as-is to the bound event handler function in the same order as passed to <code>createHandlerFn()</code>.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line5659">line 5659</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns the pre-bound handler function which is suitable to be passed to <code>addEventListener()</code>. Returns <code>null</code> if the given <code>fn</code> argument is a string which could not be found in <code>ctx</code> or if <code>ctx[fn]</code> is not a valid function value.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">function</span></dd></dl></div><h3 class="name has-anchor" id="hideIndicator"><span class="type-signature"></span>hideIndicator<span class="signature">(id)</span><span class="type-signature"> &rarr; {boolean}</span></h3><div class="description"><p>Remove a header area indicator.</p><p>This function removes the given indicator label from the header indicator area. When the given indicator is not found, this function does nothing.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>id</code></td><td class="type"><span class="param-type">string</span></td><td class="description last"><p>The ID of the indicator to remove.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4549">line 4549</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns <code>true</code> when the indicator has been removed or <code>false</code> when the requested indicator was not found.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">boolean</span></dd></dl></div><h3 class="name has-anchor" id="hideModal"><span class="type-signature"></span>hideModal<span class="signature">()</span></h3><div class="description"><p>Close the open modal overlay dialog.</p><p>This function will close an open modal dialog and restore the normal view behaviour. It has no effect if no modal dialog is currently open.</p><p>Note that this function is stand-alone, it does not rely on <code>this</code> and will not invoke other class functions so it is suitable to be used as event handler as-is without the need to bind it first.</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4250">line 4250</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="instantiateView"><span class="type-signature"></span>instantiateView<span class="signature">(path)</span><span class="type-signature"> &rarr; {Promise.&lt;<a href="LuCI.view.html">LuCI.view</a>>}</span></h3><div class="description"><p>Load specified view class path and set it up.</p><p>Transforms the given view path into a class name, requires it using <a href="LuCI.html#require"><code>LuCI.require()</code></a> and asserts that the resulting class instance is a descendant of <a href="LuCI.view.html"><code>LuCI.view</code></a>.</p><p>By instantiating the view class, its corresponding contents are rendered and included into the view area. Any runtime errors are caught and rendered using <a href="LuCI.html#error"><code>LuCI.error()</code></a>.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>path</code></td><td class="type"><span class="param-type">string</span></td><td class="description last"><p>The view path to render.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line5700">line 5700</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns a promise resolving to the loaded view instance.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Promise.&lt;<a href="LuCI.view.html">LuCI.view</a>></span></dd></dl></div><h3 class="name has-anchor" id="itemlist"><span class="type-signature"></span>itemlist<span class="signature">(node, items, separators<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node}</span></h3><div class="description"><p>Formats a series of label/value pairs into list-like markup.</p><p>This function transforms a flat array of alternating label and value elements into a list-like markup, using the values in <code>separators</code> as separators and appends the resulting nodes to the given parent DOM node.</p><p>Each label is suffixed with <code>:</code> and wrapped into a <code>&lt;strong&gt;</code> tag, the <code>&lt;strong&gt;</code> element and the value corresponding to the label are subsequently wrapped into a <code>&lt;span class=&quot;nowrap&quot;&gt;</code> element.</p><p>The resulting <code>&lt;span&gt;</code> element tuples are joined by the given separators to form the final markup which is appended to the given parent DOM node.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>node</code></td><td class="type"><span class="param-type">Node</span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The parent DOM node to append the markup to. Any previous child elements will be removed.</p></td></tr><tr><td class="name"><code>items</code></td><td class="type"><span class="param-type">Array.&lt;*></span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>An alternating array of labels and values. The label values will be converted to plain strings, the values are used as-is and may be of any type accepted by <code>LuCI.dom.content()</code>.</p></td></tr><tr><td class="name"><code>separators</code></td><td class="type"><span class="param-type">*</span> |<wbr> <span class="param-type">Array.&lt;*></span></td><td class="attributes">&lt;optional><br></td><td class="default">[E('br')]</td><td class="description last"><p>A single value or an array of separator values to separate each label/value pair with. The function will cycle through the separators when joining the pairs. If omitted, the default separator is a sole HTML <code>&lt;br&gt;</code> element. Separator values are used as-is and may be of any type accepted by <code>LuCI.dom.content()</code>.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4592">line 4592</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns the parent DOM node the formatted markup has been added to.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Node</span></dd></dl></div><h3 class="name has-anchor" id="pingDevice"><span class="type-signature"></span>pingDevice<span class="signature">(proto<span class="signature-attributes">opt</span>, ipaddr<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Promise.&lt;Event>}</span></h3><div class="description"><p>Perform a device connectivity test.</p><p>Attempt to fetch a well known resource from the remote device via HTTP in order to test connectivity. This function is mainly useful to wait for the router to come back online after a reboot or reconfiguration.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>proto</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="default">http</td><td class="description last"><p>The protocol to use for fetching the resource. May be either <code>http</code> (the default) or <code>https</code>.</p></td></tr><tr><td class="name"><code>ipaddr</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="default">window.location.host</td><td class="description last"><p>Override the host address to probe. By default the current host as seen in the address bar is probed.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line5054">line 5054</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns a promise resolving to a <code>load</code> event in case the device is reachable or rejecting with an <code>error</code> event in case it is not reachable or rejecting with <code>null</code> when the connectivity check timed out.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Promise.&lt;Event></span></dd></dl></div><h3 class="name has-anchor" id="showIndicator"><span class="type-signature"></span>showIndicator<span class="signature">(id, label, handler<span class="signature-attributes">opt</span>, style<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h3><div class="description"><p>Display or update a header area indicator.</p><p>An indicator is a small label displayed in the header area of the screen providing few amounts of status information such as item counts or state toggle indicators.</p><p>Multiple indicators may be shown at the same time and indicator labels may be made clickable to display extended information or to initiate further actions.</p><p>Indicators can either use a default <code>active</code> or a less accented <code>inactive</code> style which is useful for indicators representing state toggles.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>id</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The ID of the indicator. If an indicator with the given ID already exists, it is updated with the given label and style.</p></td></tr><tr><td class="name"><code>label</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes"></td><td class="default"></td><td class="description last"><p>The text to display in the indicator label.</p></td></tr><tr><td class="name"><code>handler</code></td><td class="type"><span class="param-type">function</span></td><td class="attributes">&lt;optional><br></td><td class="default"></td><td class="description last"><p>A handler function to invoke when the indicator label is clicked/touched by the user. If omitted, the indicator is not clickable/touchable.</p><p>Note that this parameter only applies to new indicators, when updating existing labels it is ignored.</p></td></tr><tr><td class="name"><code>style</code></td><td class="type"><span class="param-type">"active"</span> |<wbr> <span class="param-type">"inactive"</span></td><td class="attributes">&lt;optional><br></td><td class="default">active</td><td class="description last"><p>The indicator style to use. May be either <code>active</code> or <code>inactive</code>.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4501">line 4501</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns <code>true</code> when the indicator has been updated or <code>false</code> when no changes were made.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">boolean</span></dd></dl></div><h3 class="name has-anchor" id="showModal"><span class="type-signature"></span>showModal<span class="signature">(title<span class="signature-attributes">opt</span>, children, &hellip;classes<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Node}</span></h3><div class="description"><p>Display a modal overlay dialog with the specified contents.</p><p>The modal overlay dialog covers the current view preventing interaction with the underlying view contents. Only one modal dialog instance can be opened. Invoking showModal() while a modal dialog is already open will replace the open dialog with a new one having the specified contents.</p><p>Additional CSS class names may be passed to influence the appearance of the dialog. Valid values for the classes depend on the underlying theme.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>title</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br></td><td class="description last"><p>The title of the dialog. If <code>null</code>, no title element will be rendered.</p></td></tr><tr><td class="name"><code>children</code></td><td class="type"><span class="param-type">*</span></td><td class="attributes"></td><td class="description last"><p>The contents to add to the modal dialog. This should be a DOM node or a document fragment in most cases. The value is passed as-is to the <code>dom.content()</code> function - refer to its documentation for applicable values.</p></td></tr><tr><td class="name"><code>classes</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes">&lt;optional><br>&lt;repeatable><br></td><td class="description last"><p>A number of extra CSS class names which are set on the modal dialog element.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4224">line 4224</a></li></ul></dd></div><div class="details-item-container"><dt class="tag-see bold">See</dt><dd class="tag-see"><ul><li>LuCI.dom.content</li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns a DOM Node representing the modal dialog element.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Node</span></dd></dl></div><h3 class="name has-anchor" id="uploadFile"><span class="type-signature"></span>uploadFile<span class="signature">(path, progressStatusNode<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Promise.&lt;<a href="LuCI.ui.html#.FileUploadReply">LuCI.ui.FileUploadReply</a>>}</span></h3><div class="description"><p>Display a modal file upload prompt.</p><p>This function opens a modal dialog prompting the user to select and upload a file to a predefined remote destination path.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Attributes</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>path</code></td><td class="type"><span class="param-type">string</span></td><td class="attributes"></td><td class="description last"><p>The remote file path to upload the local file to.</p></td></tr><tr><td class="name"><code>progressStatusNode</code></td><td class="type"><span class="param-type">Node</span></td><td class="attributes">&lt;optional><br></td><td class="description last"><p>An optional DOM text node whose content text is set to the progress percentage value during file upload.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4932">line 4932</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Returns a promise resolving to a file upload status object on success or rejecting with an error in case the upload failed or has been cancelled by the user.</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">Promise.&lt;<a href="LuCI.ui.html#.FileUploadReply">LuCI.ui.FileUploadReply</a>></span></dd></dl></div><h2 id="type-definitions" class="subsection-title has-anchor">Type Definitions</h2><h3 class="name has-anchor" id=".FileUploadReply">FileUploadReply</h3><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Object</span></li></ul></div><b class="subsection-title">Properties</b><div class="allow-overflow"><table class="props"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>name</code></td><td class="type"><span class="param-type">string</span></td><td class="description last"><p>Name of the uploaded file without directory components</p></td></tr><tr><td class="name"><code>size</code></td><td class="type"><span class="param-type">number</span></td><td class="description last"><p>Size of the uploaded file in bytes</p></td></tr><tr><td class="name"><code>checksum</code></td><td class="type"><span class="param-type">string</span></td><td class="description last"><p>The MD5 checksum of the received file data</p></td></tr><tr><td class="name"><code>sha256sum</code></td><td class="type"><span class="param-type">string</span></td><td class="description last"><p>The SHA256 checksum of the received file data</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="ui.js.html">ui.js</a>, <a href="ui.js.html#line4905">line 4905</a></li></ul></dd></div></dl></article></section></div></div></div><div class="search-container" id="PkfLWpAbet" style="display:none"><div class="wrapper" id="iCxFxjkHbP"><button class="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><use xlink:href="#close-icon"></use></svg></button><div class="search-box-c"><svg><use xlink:href="#search-icon"></use></svg> <input type="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><div class="search-result-c" id="fWwVHRuDuN"><span class="search-result-c-text">Type anything to view search result</span></div></div></div><div class="mobile-menu-icon-container"><button class="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><use xlink:href="#menu-icon"></use></svg></button></div><div id="mobile-sidebar" class="mobile-sidebar-container"><div class="mobile-sidebar-wrapper"><a href="/" class="sidebar-title sidebar-title-anchor">LuCI Documentation</a><div class="mobile-nav-links"><div class="github-home navbar-item"><a id="" href="https://github.com/openwrt/luci" target="">GitHub Project Page</a></div></div><div class="mobile-sidebar-items-c"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-JsonRpcHowTo.html">Using JSON RPC daemon</a></div><div class="sidebar-section-children"><a href="tutorial-Modules.html">Modules</a></div><div class="sidebar-section-children"><a href="tutorial-ThemesHowTo.html">Making Themes</a></div><div class="sidebar-section-children"><a href="tutorial-i18n.html">Internationalisation - i18n</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="LuCI.module_cbi.html">cbi</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="LuCI.html">LuCI</a></div><div class="sidebar-section-children"><a href="LuCI.baseclass.html">baseclass</a></div><div class="sidebar-section-children"><a href="LuCI.dom.html">dom</a></div><div class="sidebar-section-children"><a href="LuCI.form.html">form</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractElement.html">AbstractElement</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractSection.html">AbstractSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.AbstractValue.html">AbstractValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.Button.html">Button</a></div><div class="sidebar-section-children"><a href="LuCI.form.DirectoryPicker.html">DirectoryPicker</a></div><div class="sidebar-section-children"><a href="LuCI.form.DummyValue.html">DummyValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.DynamicList.html">DynamicList</a></div><div class="sidebar-section-children"><a href="LuCI.form.FileUpload.html">FileUpload</a></div><div class="sidebar-section-children"><a href="LuCI.form.Flag.html">Flag</a></div><div class="sidebar-section-children"><a href="LuCI.form.GridSection.html">GridSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.HiddenValue.html">HiddenValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.JSONMap.html">JSONMap</a></div><div class="sidebar-section-children"><a href="LuCI.form.ListValue.html">ListValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.Map.html">Map</a></div><div class="sidebar-section-children"><a href="LuCI.form.MultiValue.html">MultiValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.NamedSection.html">NamedSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.RangeSliderValue.html">RangeSliderValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.RichListValue.html">RichListValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.SectionValue.html">SectionValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.TableSection.html">TableSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.TextValue.html">TextValue</a></div><div class="sidebar-section-children"><a href="LuCI.form.TypedSection.html">TypedSection</a></div><div class="sidebar-section-children"><a href="LuCI.form.Value.html">Value</a></div><div class="sidebar-section-children"><a href="LuCI.fs.html">fs</a></div><div class="sidebar-section-children"><a href="LuCI.headers.html">headers</a></div><div class="sidebar-section-children"><a href="LuCI.network.html">network</a></div><div class="sidebar-section-children"><a href="LuCI.network.Device.html">Device</a></div><div class="sidebar-section-children"><a href="LuCI.network.Hosts.html">Hosts</a></div><div class="sidebar-section-children"><a href="LuCI.network.Protocol.html">Protocol</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiDevice.html">WifiDevice</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiNetwork.html">WifiNetwork</a></div><div class="sidebar-section-children"><a href="LuCI.network.WifiVlan.html">WifiVlan</a></div><div class="sidebar-section-children"><a href="LuCI.poll.html">poll</a></div><div class="sidebar-section-children"><a href="LuCI.request.html">request</a></div><div class="sidebar-section-children"><a href="LuCI.request.poll.html">poll</a></div><div class="sidebar-section-children"><a href="LuCI.response.html">response</a></div><div class="sidebar-section-children"><a href="LuCI.rpc.html">rpc</a></div><div class="sidebar-section-children"><a href="LuCI.session.html">session</a></div><div class="sidebar-section-children"><a href="LuCI.uci.html">uci</a></div><div class="sidebar-section-children"><a href="LuCI.ui.html">ui</a></div><div class="sidebar-section-children"><a href="LuCI.ui.AbstractElement.html">AbstractElement</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Checkbox.html">Checkbox</a></div><div class="sidebar-section-children"><a href="LuCI.ui.ComboButton.html">ComboButton</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Combobox.html">Combobox</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Dropdown.html">Dropdown</a></div><div class="sidebar-section-children"><a href="LuCI.ui.DynamicList.html">DynamicList</a></div><div class="sidebar-section-children"><a href="LuCI.ui.FileUpload.html">FileUpload</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Hiddenfield.html">Hiddenfield</a></div><div class="sidebar-section-children"><a href="LuCI.ui.RangeSlider.html">RangeSlider</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Select.html">Select</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Textarea.html">Textarea</a></div><div class="sidebar-section-children"><a href="LuCI.ui.Textfield.html">Textfield</a></div><div class="sidebar-section-children"><a href="LuCI.ui.changes.html">changes</a></div><div class="sidebar-section-children"><a href="LuCI.ui.menu.html">menu</a></div><div class="sidebar-section-children"><a href="LuCI.ui.tabs.html">tabs</a></div><div class="sidebar-section-children"><a href="LuCI.validation.html">validation</a></div><div class="sidebar-section-children"><a href="LuCI.validation.Validator.html">Validator</a></div><div class="sidebar-section-children"><a href="LuCI.validation.ValidatorFactory.html">ValidatorFactory</a></div><div class="sidebar-section-children"><a href="LuCI.view.html">view</a></div><div class="sidebar-section-children"><a href="LuCI.xhr.html">xhr</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-externals"><div>Externals</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="external-String.html">String</a></div></div></div><div class="mobile-navbar-actions"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#dark-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html>