moon
/
enigma-bbs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
enigma-bbs/art/views/vertical_menu_view.html

2464 lines
23 KiB
HTML
Raw Blame History

<!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>Vertical Menu View | ENiGMA½ BBS Software</title>
<meta name="generator" content="Jekyll v4.2.1" />
<meta property="og:title" content="Vertical Menu View" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Vertical Menu View A vertical menu view supports displaying a list of times on a screen vertically in a single column, similar to a lightbar. This type of control is often useful for lists of items or menu controls." />
<meta property="og:description" content="Vertical Menu View A vertical menu view supports displaying a list of times on a screen vertically in a single column, similar to a lightbar. This type of control is often useful for lists of items or menu controls." />
<meta property="og:site_name" content="ENiGMA½ BBS Software" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-08-27T23:32:21+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Vertical Menu View" />
<script type="application/ld+json">
{"description":"Vertical Menu View A vertical menu view supports displaying a list of times on a screen vertically in a single column, similar to a lightbar. This type of control is often useful for lists of items or menu controls.","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"/enigma-bbs/assets/images/enigma-logo.png"}},"url":"/enigma-bbs/art/views/vertical_menu_view.html","@type":"BlogPosting","headline":"Vertical Menu View","dateModified":"2023-08-27T23:32:21+00:00","datePublished":"2023-08-27T23:32:21+00:00","mainEntityOfPage":{"@type":"WebPage","@id":"/enigma-bbs/art/views/vertical_menu_view.html"},"@context":"https://schema.org"}</script>
<!-- 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 &amp; 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/spinner_menu_view.html">Spinner Menu View</a></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 class="active-nav">Vertical Menu View</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>
</ul>
<li>Modding</li>
<ul>
<li><a href="/enigma-bbs/modding/wfc.html">Waiting For Caller (WFC)</a></li>
</ul>
<li>Administration</li>
<ul>
<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/toggle_menu_view.html">« Toggle Menu View</a>
<a href="#sidebar" class="btn menu_button">MENU</a>
<a class="btn" style="float: right;margin-left: 20px" href="/enigma-bbs/servers/loginservers/telnet.html">Telnet Server »</a>
<br clear="both">
</div>
<div class="page">
<h1 class="page-title">Vertical Menu View</h1>
<h2 id="vertical-menu-view">Vertical Menu View</h2>
<p>A vertical menu view supports displaying a list of times on a screen vertically in a single column, similar to a lightbar. This type of control is often useful for lists of items or menu controls.</p>
<h2 id="general-information">General Information</h2>
<p>Items can be selected on a menu via the cursor keys, Page Up, Page Down, Home, and End, or by selecting them via a <code class="language-plaintext highlighter-rouge">hotKey</code> - see <strong><em>Hot Keys</em></strong> below.</p>
<blockquote>
<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 vertical menu view is defined with a percent (%) and the characters VM, followed by the view number (if used.) For example: <code class="language-plaintext highlighter-rouge">%VM1</code>.</p>
</blockquote>
<blockquote>
<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>
</blockquote>
<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">itemSpacing</code></td>
<td>Used to separate items vertically in the menu</td>
</tr>
<tr>
<td><code class="language-plaintext highlighter-rouge">height</code></td>
<td>Sets the height of views to display multiple items vertically (default 1)</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">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 vertical 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/vertical_menu_view_example1.gif" alt="Example" title="Vertical menu"></p>
<details>
<summary>Configuration fragment (expand to view)</summary>
<div>
<div class="language-plaintext highlighter-rouge">
<div class="highlight"><pre class="highlight"><code>VM1: {
submit: true
argName: navSelect
items: [
{
text: login
data: login
}
{
text: apply
data: new user
}
{
text: about
data: about
}
{
text: log off
data: logoff
}
]
}
</code></pre></div> </div>
</div>
</details>
</div>
<div class="PageNavigation">
<a class="btn" style="float:left;margin-right: 20px;" href="/enigma-bbs/art/views/toggle_menu_view.html">« Toggle Menu View</a>
<a class="btn" style="float: right;margin-left: 20px" href="/enigma-bbs/servers/loginservers/telnet.html">Telnet Server »</a>
<br clear="both">
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink