Coding Standards Menus - Revision history

Rich at 15:53, 25 July 2020

2020-07-25T15:53:30Z

← Older revision		Revision as of 15:53, 25 July 2020
Line 56:		Line 56:
	conform to. But they are all constrained to fit in the area defined by the		conform to. But they are all constrained to fit in the area defined by the
	'''#leftofpage''' statement in the '''board18com.css''' file.		'''#leftofpage''' statement in the '''board18com.css''' file.

			[[Category:Standards]]

Rich: /* Context Menus */

2020-07-24T16:11:20Z

Context Menus

← Older revision		Revision as of 16:11, 24 July 2020
Line 43:		Line 43:
	The ContextMenu(event) functions in the two script files named		The ContextMenu(event) functions in the two script files named
	[[Board18Map6\|Board18Map6.js]] and [[Board18Market6\|Board18Market6.js]]		[[Board18Map6\|Board18Map6.js]] and [[Board18Market6\|Board18Market6.js]]
	use the respective makeMenuItems() functions to include the correct menu		use the respective makeMenuItems() functions from the above files
			to include the correct menu
	items in the menu to be displayed for a particular event.		items in the menu to be displayed for a particular event.

Rich: /* Context Menus */ initial content and added == Left Of Page Menus ==

2020-07-24T16:08:53Z

Context Menus: initial content and added == Left Of Page Menus ==

← Older revision		Revision as of 16:08, 24 July 2020
Line 37:		Line 37:

	== Context Menus ==		== Context Menus ==
			Context menus are dynamic. A context menu is rebuilt every time the menu is to be shown.
			The content of all context menus is determined by the code in the two script files named
			[[Board18Map5\|Board18Map5.js]] and [[Board18Market5\|Board18Market5.js]].

			The ContextMenu(event) functions in the two script files named
			[[Board18Map6\|Board18Map6.js]] and [[Board18Market6\|Board18Market6.js]]
			use the respective makeMenuItems() functions to include the correct menu
			items in the menu to be displayed for a particular event.

			The formats of the context menu is specified in 3 CSS statements the names
			of which each begin with '''.context'''.

			== Left Of Page Menus ==
			The '''leftofpage''' area is used by many pages to display menus of various sorts.
			For example the board18Map and board18Market pages both use this area to display
			tray menues. Due to historical reasons there is no one standard that these menus all
			conform to. But they are all constrained to fit in the area defined by the
			'''#leftofpage''' statement in the '''board18com.css''' file.

Rich: added initial material

2020-07-23T21:26:58Z

added initial material

← Older revision		Revision as of 21:26, 23 July 2020
Line 1:		Line 1:
			{{Coding Standards Index}}
			BOARD18 supports two types of menus. They are '''Main Menus''' and '''Context Menus'''.

			Examples of both kinds of menus are given here.

	== Main Menus ==		== Main Menus ==
	Almost all BOARD18 pages contain a Main Menu. These menus use a common HTML		Almost all BOARD18 pages contain a Main Menu. These menus use a common HTML

Rich: /* Main Menu CSS Statements */

2020-07-23T21:18:07Z

Main Menu CSS Statements

← Older revision		Revision as of 21:18, 23 July 2020
Line 28:		Line 28:
	=== Main Menu CSS Statements ===		=== Main Menu CSS Statements ===
	The bottom 161 lines of the board18com.css file are where all the layout and formatting		The bottom 161 lines of the board18com.css file are where all the layout and formatting
	of all the BOARD18 main menus are specified. This code should ~~not~~ be changed.		of all the BOARD18 main menus are specified. <br>
			<span style="color: Fuchsia">This CSS code should never be changed.</span>

	== Context Menus ==		== Context Menus ==

Rich: initial contents of this page

2020-07-23T21:16:15Z

initial contents of this page

New page

== Main Menus ==
Almost all BOARD18 pages contain a Main Menu. These menus use a common HTML
structure and a common set of CSS statments which are found in board18com.css.

=== Main Menu Example ===
[[File:MenuMain.png|frame]]
To the right you will see an image of the Main Menu for the board18Main page.

And below is the HTML code that produced this menu. As yoy can see, this menu is
actually an unordered list that is enclosed in a division. This division is placed
directly after a span containing the '''MENU''' button. The CSS does the rest.
<pre>
<span id="newmainmenu" onclick="$('#mainmenu').toggle();
event.stopPropagation();"> MENU </span>

<div id="mainmenu" class="menu">
<ul class="bigMenu">
<li onclick="window.location = 'board18New.php';">Make New Game</li>
<li onclick="window.location = 'board18View.php';">View All Games</li>
<li onclick="window.location = 'board18Admin.php';">Administration</li>
<li onclick="$.post('php/logout.php', logoutOK);">Log Out</li>
<li onclick="window.open(BD18.help, 'HelpGuide');">Help</li>
<li onclick="$('.menu').hide();aboutBoard18();">About BOARD18</li>
</ul>
</div>
</pre>

=== Main Menu CSS Statements ===
The bottom 161 lines of the board18com.css file are where all the layout and formatting
of all the BOARD18 main menus are specified. This code should not be changed.

== Context Menus ==