2022-02-05 06:30:33 +00:00
<!DOCTYPE html>
< html lang = "en-US" >
< head >
< meta charset = 'utf-8' >
< meta http-equiv = "X-UA-Compatible" content = "chrome=1" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/enigma-bbs/assets/images/favicon-16x16.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/enigma-bbs/assets/images/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/enigma-bbs/assets/images/favicon-32x32.png" >
< link rel = "stylesheet" href = "/enigma-bbs/assets/css/style.css?v=" >
<!-- Begin Jekyll SEO tag v2.7.1 -->
< title > Spinner Menu View | ENiGMA½ BBS Software< / title >
< meta name = "generator" content = "Jekyll v4.2.1" / >
< meta property = "og:title" content = "Spinner Menu View" / >
< meta property = "og:locale" content = "en_US" / >
< meta name = "description" content = "Spinner Menu View A spinner menu view supports displaying a set of times on a screen as a list, with one item displayed at a time. This is generally used to pick one option from a list. Some examples could include selecting from a list of states, themes, etc." / >
< meta property = "og:description" content = "Spinner Menu View A spinner menu view supports displaying a set of times on a screen as a list, with one item displayed at a time. This is generally used to pick one option from a list. Some examples could include selecting from a list of states, themes, etc." / >
< meta property = "og:site_name" content = "ENiGMA½ BBS Software" / >
< meta property = "og:type" content = "article" / >
2022-07-12 05:19:40 +00:00
< meta property = "article:published_time" content = "2022-07-12T05:19:33+00:00" / >
2022-02-05 06:30:33 +00:00
< meta name = "twitter:card" content = "summary" / >
< meta property = "twitter:title" content = "Spinner Menu View" / >
< script type = "application/ld+json" >
2022-07-12 05:19:40 +00:00
{"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"/enigma-bbs/assets/images/enigma-logo.png"}},"description":"Spinner Menu View A spinner menu view supports displaying a set of times on a screen as a list, with one item displayed at a time. This is generally used to pick one option from a list. Some examples could include selecting from a list of states, themes, etc.","url":"/enigma-bbs/art/views/spinner_menu_view.html","@type":"BlogPosting","headline":"Spinner Menu View","dateModified":"2022-07-12T05:19:33+00:00","datePublished":"2022-07-12T05:19:33+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"/enigma-bbs/art/views/spinner_menu_view.html"},"@context":"https://schema.org"}< / script >
2022-02-05 06:30:33 +00:00
<!-- End Jekyll SEO tag -->
< / head >
< body >
< div id = "container" >
< div class = "sidebar" id = "sidebar" >
< hr class = "mobile-divide" >
< div class = "container" >
< a href = "/enigma-bbs/" > < img src = "/enigma-bbs/assets/images/enigma-logo.png" class = "logo" alt = "Enigma logo" > < / a >
< / div >
< ul >
< li > Installation< / li >
< ul >
< li > < a href = "/enigma-bbs/installation/installation-methods.html" > Installation Methods< / a > < / li >
< li > < a href = "/enigma-bbs/installation/install-script.html" > Install Script< / a > < / li >
< li > < a href = "/enigma-bbs/installation/docker.html" > Docker< / a > < / li >
< li > < a href = "/enigma-bbs/installation/manual.html" > Manual Installation< / a > < / li >
< li > OS / Hardware Specific< / li >
< ul >
< li > < a href = "/enigma-bbs/installation/hardware/rpi.html" > Raspberry Pi< / a > < / li >
< li > < a href = "/enigma-bbs/installation/hardware/windows.html" > Installation Under Windows< / a > < / li >
< / ul >
< li > < a href = "/enigma-bbs/installation/network.html" > Network Setup< / a > < / li >
< li > < a href = "/enigma-bbs/installation/testing.html" > Testing Your Installation< / a > < / li >
< li > < a href = "/enigma-bbs/installation/production.html" > Production Installation< / a > < / li >
< / ul >
< li > Configuration< / li >
< ul >
< li > < a href = "/enigma-bbs/configuration/creating-config.html" > Creating Initial Config Files< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/sysop-setup.html" > SysOp Setup< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/config-files.html" > Configuration Files< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/config-hjson.html" > System Configuration< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/hjson.html" > HJSON Config Files< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/menu-hjson.html" > Menu HSJON< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/directory-structure.html" > Directory Structure< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/external-binaries.html" > External Support Binaries< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/archivers.html" > Archivers< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/file-transfer-protocols.html" > File Transfer Protocols< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/email.html" > Email< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/colour-codes.html" > Colour Codes< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/event-scheduler.html" > Event Scheduler< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/acs.html" > Access Condition System (ACS)< / a > < / li >
< li > < a href = "/enigma-bbs/configuration/security.html" > Security< / a > < / li >
< / ul >
< li > Miscellaneous< / li >
< ul >
< li > < a href = "/enigma-bbs/misc/user-interrupt.html" > User Interruptions< / a > < / li >
< / ul >
< li > File Base< / li >
< ul >
< li > < a href = "/enigma-bbs/filebase/index.html" > About File Areas< / a > < / li >
< li > < a href = "/enigma-bbs/filebase/first-file-area.html" > Configuring a File Base< / a > < / li >
< li > < a href = "/enigma-bbs/filebase/acs.html" > ACS< / a > < / li >
< li > < a href = "/enigma-bbs/filebase/uploads.html" > Uploads< / a > < / li >
< li > < a href = "/enigma-bbs/filebase/web-access.html" > Web Access< / a > < / li >
< li > < a href = "/enigma-bbs/filebase/tic-support.html" > TIC Support< / a > < / li >
< li > < a href = "/enigma-bbs/filebase/network-mounts-and-symlinks.html" > Network Mounts & Symlinks< / a > < / li >
< / ul >
< li > Message Areas< / li >
< ul >
< li > < a href = "/enigma-bbs/messageareas/configuring-a-message-area.html" > Message Base< / a > < / li >
< li > < a href = "/enigma-bbs/messageareas/message-networks.html" > Message Networks< / a > < / li >
< li > < a href = "/enigma-bbs/messageareas/bso-import-export.html" > BSO Import / Export< / a > < / li >
< li > < a href = "/enigma-bbs/messageareas/netmail.html" > Netmail< / a > < / li >
< li > < a href = "/enigma-bbs/messageareas/qwk.html" > QWK Support< / a > < / li >
< li > < a href = "/enigma-bbs/messageareas/ftn.html" > FidoNet-Style Networks (FTN)< / a > < / li >
< / ul >
< li > Art< / li >
< ul >
< li > < a href = "/enigma-bbs/art/general.html" > General Art Information< / a > < / li >
< li > < a href = "/enigma-bbs/art/themes.html" > Themes< / a > < / li >
< li > < a href = "/enigma-bbs/art/mci.html" > MCI Codes< / a > < / li >
< li > Views< / li >
< ul >
< li > < a href = "/enigma-bbs/art/views/button_view.html" > Button View< / a > < / li >
< li > < a href = "/enigma-bbs/art/views/edit_text_view.html" > Edit Text View< / a > < / li >
< li > < a href = "/enigma-bbs/art/views/full_menu_view.html" > Full Menu View< / a > < / li >
< li > < a href = "/enigma-bbs/art/views/horizontal_menu_view.html" > Horizontal Menu View< / a > < / li >
< li > < a href = "/enigma-bbs/art/views/mask_edit_text_view.html" > Mask Edit Text View< / a > < / li >
< li > < a href = "/enigma-bbs/art/views/multi_line_edit_text_view.html" > Multi Line Edit Text View< / a > < / li >
< li > < a href = "/enigma-bbs/art/views/predefined_label_view.html" > Predefined Label View< / a > < / li >
< li class = "active-nav" > Spinner Menu View< / li >
< li > < a href = "/enigma-bbs/art/views/text_view.html" > Text View< / a > < / li >
< li > < a href = "/enigma-bbs/art/views/toggle_menu_view.html" > Toggle Menu View< / a > < / li >
< li > < a href = "/enigma-bbs/art/views/vertical_menu_view.html" > Vertical Menu View< / a > < / li >
< / ul >
< / ul >
< li > Servers< / li >
< ul >
< li > Login Servers< / li >
< ul >
< li > < a href = "/enigma-bbs/servers/loginservers/telnet.html" > Telnet Server< / a > < / li >
< li > < a href = "/enigma-bbs/servers/loginservers/ssh.html" > SSH Server< / a > < / li >
< li > < a href = "/enigma-bbs/servers/loginservers/websocket.html" > Web Socket / Web Interface Server< / a > < / li >
< / ul >
< li > Content Servers< / li >
< ul >
< li > < a href = "/enigma-bbs/servers/contentservers/web-server.html" > Web Server< / a > < / li >
< li > < a href = "/enigma-bbs/servers/contentservers/gopher.html" > Gopher Server< / a > < / li >
< li > < a href = "/enigma-bbs/servers/contentservers/nntp.html" > NNTP Server< / a > < / li >
< / ul >
< / ul >
< li > Modding< / li >
< ul >
< li > < a href = "/enigma-bbs/modding/local-doors.html" > Local Doors< / a > < / li >
< li > < a href = "/enigma-bbs/modding/door-servers.html" > Door Servers< / a > < / li >
< li > < a href = "/enigma-bbs/modding/telnet-bridge.html" > Telnet Bridge< / a > < / li >
< li > < a href = "/enigma-bbs/modding/existing-mods.html" > Existing Mods< / a > < / li >
< li > < a href = "/enigma-bbs/modding/file-area-list.html" > File Area List< / a > < / li >
< li > < a href = "/enigma-bbs/modding/last-callers.html" > Last Callers< / a > < / li >
< li > < a href = "/enigma-bbs/modding/whos-online.html" > Who's Online< / a > < / li >
< li > < a href = "/enigma-bbs/modding/user-list.html" > User List< / a > < / li >
< li > < a href = "/enigma-bbs/modding/msg-conf-list.html" > Message Conference List< / a > < / li >
< li > < a href = "/enigma-bbs/modding/msg-area-list.html" > Message Area List< / a > < / li >
< li > < a href = "/enigma-bbs/modding/bbs-list.html" > BBS List< / a > < / li >
< li > < a href = "/enigma-bbs/modding/rumorz.html" > Rumorz< / a > < / li >
< li > < a href = "/enigma-bbs/modding/file-transfer-protocol-select.html" > File Transfer Protocol Select< / a > < / li >
< li > < a href = "/enigma-bbs/modding/onelinerz.html" > Onelinerz< / a > < / li >
< li > < a href = "/enigma-bbs/modding/show-art.html" > The Show Art Module< / a > < / li >
< li > < a href = "/enigma-bbs/modding/file-base-download-manager.html" > File Base Download Manager< / a > < / li >
< li > < a href = "/enigma-bbs/modding/file-base-web-download-manager.html" > File Base Web Download Manager< / a > < / li >
< li > < a href = "/enigma-bbs/modding/set-newscan-date.html" > Set Newscan Date Module< / a > < / li >
< li > < a href = "/enigma-bbs/modding/node-msg.html" > Node to Node Messaging< / a > < / li >
< li > < a href = "/enigma-bbs/modding/top-x.html" > TopX< / a > < / li >
< li > < a href = "/enigma-bbs/modding/user-2fa-otp-config.html" > 2FA/OTP Config< / a > < / li >
< li > < a href = "/enigma-bbs/modding/autosig-edit.html" > Auto Signature Editor< / a > < / li >
< li > < a href = "/enigma-bbs/modding/menu-modules.html" > Menu Modules< / a > < / li >
< / ul >
< li > Administration< / li >
< ul >
< li > < a href = "/enigma-bbs/admin/administration.html" > Administration< / a > < / li >
< li > < a href = "/enigma-bbs/admin/oputil.html" > oputil< / a > < / li >
< li > < a href = "/enigma-bbs/admin/updating.html" > Updating< / a > < / li >
< / ul >
< li > Troubleshooting< / li >
< ul >
< li > < a href = "/enigma-bbs/troubleshooting/monitoring-logs.html" > Monitoring Logs< / a > < / li >
< / ul >
< / ul >
< / div >
< div class = "main_area" >
< div class = "container" >
< section id = "main_content" >
< div class = "PageNavigation" >
< a class = "btn" style = "float:left;margin-right: 20px;" href = "/enigma-bbs/art/views/predefined_label_view.html" > « Predefined Label View< / a >
< a href = "#sidebar" class = "btn menu_button" > MENU< / a >
< a class = "btn" style = "float: right;margin-left: 20px" href = "/enigma-bbs/art/views/text_view.html" > Text View »< / a >
< br clear = "both" >
< / div >
< div class = "page" >
< h1 class = "page-title" > Spinner Menu View< / h1 >
< h2 id = "spinner-menu-view" > Spinner Menu View< / h2 >
< p > A spinner menu view supports displaying a set of times on a screen as a list, with one item displayed at a time. This is generally used to pick one option from a list. Some examples could include selecting from a list of states, themes, etc.< / p >
< h2 id = "general-information" > General Information< / h2 >
< p > Items can be selected on a menu via the cursor keys or by selecting them via a < code class = "language-plaintext highlighter-rouge" > hotKey< / code > - see < strong > < em > Hot Keys< / em > < / strong > below.< / p >
< p > < img class = "emoji" title = ":information_source:" alt = ":information_source:" src = "https://github.githubassets.com/images/icons/emoji/unicode/2139.png" height = "20" width = "20" > A spinner menu view is defined with a percent (%) and the characters SM, followed by the view number (if used.) For example: < code class = "language-plaintext highlighter-rouge" > %SM1< / code > < / p >
< p > < img class = "emoji" title = ":information_source:" alt = ":information_source:" src = "https://github.githubassets.com/images/icons/emoji/unicode/2139.png" height = "20" width = "20" > See < a href = "/enigma-bbs/art/mci.html" > MCI< / a > for general information on how to use views and common configuration properties available for them.< / p >
< h3 id = "properties" > Properties< / h3 >
< table >
< thead >
< tr >
< th > Property< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > textStyle< / code > < / td >
< td > Sets the standard (non-focus) text style. See < strong > Text Styles< / strong > in < a href = "/enigma-bbs/art/mci.html" > MCI< / a >
< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > focusTextStyle< / code > < / td >
< td > Sets focus text style. See < strong > Text Styles< / strong > in < a href = "/enigma-bbs/art/mci.html" > MCI< / a >
< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > focus< / code > < / td >
< td > If set to < code class = "language-plaintext highlighter-rouge" > true< / code > , establishes initial focus< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > width< / code > < / td >
< td > Sets the width of a view on the display (default 15)< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > submit< / code > < / td >
< td > If set to < code class = "language-plaintext highlighter-rouge" > true< / code > any < code class = "language-plaintext highlighter-rouge" > accept< / code > action upon this view will submit the encompassing < strong > form< / strong >
< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > hotKeys< / code > < / td >
< td > Sets hot keys to activate specific items. See < strong > Hot Keys< / strong > below< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > hotKeySubmit< / code > < / td >
< td > Set to submit a form on hotkey selection< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > argName< / code > < / td >
< td > Sets the argument name for this selection in the form< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > justify< / code > < / td >
< td > Sets the justification of each item in the list. Options: left (default), right, center< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > itemFormat< / code > < / td >
< td > Sets the format for a list entry. See < strong > Entry Formatting< / strong > in < a href = "/enigma-bbs/art/mci.html" > MCI< / a >
< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > fillChar< / code > < / td >
< td > Specifies a character to fill extra space in the menu with. Defaults to an empty space< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > items< / code > < / td >
< td > List of items to show in the menu. See < strong > Items< / strong > below.< / td >
< / tr >
< tr >
< td > < code class = "language-plaintext highlighter-rouge" > focusItemFormat< / code > < / td >
< td > Sets the format for a focused list entry. See < strong > Entry Formatting< / strong > in < a href = "/enigma-bbs/art/mci.html" > MCI< / a >
< / td >
< / tr >
< / tbody >
< / table >
< h3 id = "hot-keys" > Hot Keys< / h3 >
< p > A set of < code class = "language-plaintext highlighter-rouge" > hotKeys< / code > are used to allow the user to press a character on the keyboard to select that item, and optionally submit the form.< / p >
< p > Example:< / p >
< div class = "language-plaintext highlighter-rouge" > < div class = "highlight" > < pre class = "highlight" > < code > hotKeys: { A: 0, B: 1, C: 2, D: 3 }
hotKeySubmit: true
< / code > < / pre > < / div > < / div >
< p > This would select and submit the first item if < code class = "language-plaintext highlighter-rouge" > A< / code > is typed, second if < code class = "language-plaintext highlighter-rouge" > B< / code > , etc.< / p >
< h3 id = "items" > Items< / h3 >
< p > A spinner menu, similar to other menus, take a list of items to display in the menu. For example:< / p >
< div class = "language-plaintext highlighter-rouge" > < div class = "highlight" > < pre class = "highlight" > < code > items: [
{
text: First Item
data: first
}
{
text: Second Item
data: second
}
]
< / code > < / pre > < / div > < / div >
< p > If the list is for display only (there is no form action associated with it) you can omit the data element, and include the items as a simple list:< / p >
< div class = "language-plaintext highlighter-rouge" > < div class = "highlight" > < pre class = "highlight" > < code > ["First item", "Second item", "Third Item"]
< / code > < / pre > < / div > < / div >
< h2 id = "example" > Example< / h2 >
< p > < img src = "../../assets/images/spinner_menu_view_example1.gif" alt = "Example" title = "Spinner menu" > < / p >
< details >
< summary > Configuration fragment (expand to view)< / summary >
< div >
< div class = "language-plaintext highlighter-rouge" >
< div class = "highlight" > < pre class = "highlight" > < code > SM1: {
submit: true
argName: themeSelect
items: [
{
text: Light
data: light
}
{
text: Dark
data: dark
}
{
text: Rainbow
data: rainbow
}
{
text: Gruvbox
data: gruvbox
}
]
}
< / code > < / pre > < / div > < / div >
< / div >
< / details >
< / div >
< div class = "PageNavigation" >
< a class = "btn" style = "float:left;margin-right: 20px;" href = "/enigma-bbs/art/views/predefined_label_view.html" > « Predefined Label View< / a >
< a class = "btn" style = "float: right;margin-left: 20px" href = "/enigma-bbs/art/views/text_view.html" > Text View »< / a >
< br clear = "both" >
< / div >
< / section >
< / div >
< / div >
< / div >
< / body >
< / html >
