Listgroup (Bootstrap) - Revision history

Ghenne: /* Properties and Methods */

2019-10-15T13:35:45Z

Properties and Methods

← Older revision		Revision as of 13:35, 15 October 2019
Line 29:		Line 29:
	\|-		\|-
	\| length \|\| Current number of items. Runtime.		\| length \|\| Current number of items. Runtime.
			\|-
			\| listStyle \|\| Should items be styles as an unordered list or as button list?. Design Time.
	\|}		\|}

Ghenne: /* Properties and Methods */

2019-07-17T19:02:57Z

Properties and Methods

← Older revision		Revision as of 19:02, 17 July 2019
Line 26:		Line 26:
	\| itemBadges \|\| Badges to show, one per line.		\| itemBadges \|\| Badges to show, one per line.
	\|-		\|-
	\| items \|\| Items to show, one per line. Prefix * for disabled, > for selected~~, ! for heading (not all controls support headings)~~. Design Time.		\| items \|\| Items to show, one per line. Prefix * for disabled, > for selected. Design Time.
	\|-		\|-
	\| length \|\| Current number of items. Runtime.		\| length \|\| Current number of items. Runtime.

Ghenne: /* Example */

2019-03-10T14:50:46Z

Example

← Older revision		Revision as of 14:50, 10 March 2019
Line 41:		Line 41:
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	// JavaScript		// JavaScript
	//
	// Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.		// Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.
	Listgroup1.onclick = function(choice) {		Listgroup1.onclick = function(choice) {
Line 66:		Line 66:
	<syntaxhighlight lang="vb.net">		<syntaxhighlight lang="vb.net">
	' Basic		' Basic
	'
	' Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.		' Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.
	Function Listgroup1_onclick(choice)		Function Listgroup1_onclick(choice)

Ghenne: /* Example (Basic) */

2019-03-10T14:50:27Z

Example (Basic)

← Older revision		Revision as of 14:50, 10 March 2019
Line 35:		Line 35:
	Standard [[events\|events]] are supported. For this control, the onclick event will be most useful.		Standard [[events\|events]] are supported. For this control, the onclick event will be most useful.

	== Example ~~(Basic)~~ ==		== Example ==
	~~<pre>~~

	~~</pre>~~



	<tabber>		<tabber>
Line 46:		Line 41:
	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	// JavaScript		// JavaScript
			//
	// Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.		// Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.
	Listgroup1.onclick = function(choice) {		Listgroup1.onclick = function(choice) {
Line 70:		Line 66:
	<syntaxhighlight lang="vb.net">		<syntaxhighlight lang="vb.net">
	' Basic		' Basic
			'
			' Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.
	Function Listgroup1_onclick(choice)		Function Listgroup1_onclick(choice)
	If typeof(choice) = "object" Then return		If typeof(choice) = "object" Then return

Ghenne at 14:49, 10 March 2019

2019-03-10T14:49:19Z

← Older revision		Revision as of 14:49, 10 March 2019
Line 37:		Line 37:
	== Example (Basic) ==		== Example (Basic) ==
	<pre>		<pre>
	~~Function Listgroup1_onclick(choice)~~
	~~If typeof(choice) = "object" Then return~~
	~~MsgBox "The choice is " & choice~~
	~~End Function~~
	~~</pre>~~

	~~Set and unset the 3rd line to active:~~
	~~<pre>~~
	~~$("#Listgroup1_2").addClass("active")~~
	~~$("#Listgroup2_2").removeClass("active")~~
	</pre>		</pre>

	~~Change the text of line n:~~
	~~<pre>~~
	~~NSB.$("Listgroup1_" & n).textContent = "New text"~~
	~~</pre>~~

	~~Change line n as html:~~
	~~<pre>~~
	~~NSB.$("Listgroup1_" & n).innerHTML = "New text"~~
	~~</pre>~~

	~~Change line 1 as html and set the badge:~~
	~~<pre>~~
	~~Listgroup1_1.innerHTML = "<i>item 2</i><span id='Listgroup1_1_badge' class='badge'>2</span>"~~
	~~</pre>~~

	== ~~Example (~~JavaScript~~) ==~~		<tabber>
	Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.		JavaScript=
	~~<pre>~~		<syntaxhighlight lang="JavaScript">
			// JavaScript
			// Ignore the event when the Dropdown is first clicked, and handle the event when a selection is made.
	Listgroup1.onclick = function(choice) {		Listgroup1.onclick = function(choice) {
	if (typeof(choice) === "object") return;		if (typeof(choice) === "object") return;
	NSB.MsgBox("The choice is " + choice);		NSB.MsgBox("The choice is " + choice);
	};		};
	~~</pre>~~

	Set and unset the 3rd line to active:		// Set and unset the 3rd line to active:
	~~<pre>~~
	$("#Listgroup1_2").addClass("active");		$("#Listgroup1_2").addClass("active");
	$("#Listgroup2_2").removeClass("active");		$("#Listgroup2_2").removeClass("active");
	~~</pre>~~

	Change the text of line n:		// Change the text of line n:
	~~<pre>~~
	NSB.$("Listgroup1_" + n).textContent = "New text"		NSB.$("Listgroup1_" + n).textContent = "New text"
	~~</pre>~~

	Change line n as html:		// Change line n as html:
	~~<pre>~~
	NSB.$("Listgroup1_" + n).innerHTML = "New text"		NSB.$("Listgroup1_" + n).innerHTML = "New text"
	~~</pre>~~

	Change line 1 as html and set the badge:		// Change line 1 as html and set the badge:
	~~<pre>~~
	Listgroup1_1.innerHTML = "<i>item 2</i><span id='Listgroup1_1_badge' class="badge">2</span>"		Listgroup1_1.innerHTML = "<i>item 2</i><span id='Listgroup1_1_badge' class="badge">2</span>"
	</~~pre~~>		</syntaxhighlight>
			\|-\|
			BASIC=
			<syntaxhighlight lang="vb.net">
			' Basic
			Function Listgroup1_onclick(choice)
			If typeof(choice) = "object" Then return
			MsgBox "The choice is " & choice
			End Function

			' Set and unset the 3rd line to active:
			$("#Listgroup1_2").addClass("active")
			$("#Listgroup2_2").removeClass("active")

			' Change the text of line n:
			NSB.$("Listgroup1_" & n).textContent = "New text"

			' Change line n as html:
			NSB.$("Listgroup1_" & n).innerHTML = "New text"

			' Change line 1 as html and set the badge:
			Listgroup1_1.innerHTML = "<i>item 2</i><span id='Listgroup1_1_badge' class='badge'>2</span>"
			</syntaxhighlight>
			</tabber>

	== Output ==		== Output ==

Ghenne: /* Properties and Methods */

2019-02-24T14:42:21Z

Properties and Methods

← Older revision		Revision as of 14:42, 24 February 2019
Line 22:		Line 22:
	''type'' can be "active" or "disabled". Runtime.		''type'' can be "active" or "disabled". Runtime.
	\|-		\|-
	\| clear \|\| Clears all items. Runtime.		\| clear() \|\| Clears all items. Runtime.
	\|-		\|-
	\| itemBadges \|\| Badges to show, one per line.		\| itemBadges \|\| Badges to show, one per line.

Ghenne: /* Output */

2019-02-02T14:19:26Z

Output

← Older revision		Revision as of 14:19, 2 February 2019
Line 102:		Line 102:

	[[Category:Bootstrap]]		[[Category:Bootstrap]]

	~~[[Category:iWebKit]]~~

Ghenne: /* Description */

2018-11-14T14:58:36Z

Description

← Older revision		Revision as of 14:58, 14 November 2018
Line 6:		Line 6:
	To restrict the scrollable area, add this to the Listgroup's style property:		To restrict the scrollable area, add this to the Listgroup's style property:
	<pre>		<pre>

	max-height: 300px; overflow:scroll;		max-height: 300px; overflow:scroll;
	</pre>		</pre>

Ghenne: /* Description */

2018-11-14T14:58:19Z

Description

← Older revision		Revision as of 14:58, 14 November 2018
Line 4:		Line 4:

	List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.		List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
			To restrict the scrollable area, add this to the Listgroup's style property:
			<pre>

			max-height: 300px; overflow:scroll;
			</pre>
	Two onclick events happen when a Dropdown is clicked. When the control is initially clicked, an event is sent. When the user makes a selection, onclick is called again with the text of the selection.		Two onclick events happen when a Dropdown is clicked. When the control is initially clicked, an event is sent. When the user makes a selection, onclick is called again with the text of the selection.

Ghenne: /* Example (JavaScript) */

2018-07-29T11:00:16Z

Example (JavaScript)

← Older revision		Revision as of 11:00, 29 July 2018
Line 66:		Line 66:
	<pre>		<pre>
	Listgroup1.onclick = function(choice) {		Listgroup1.onclick = function(choice) {
			if (typeof(choice) === "object") return;
	NSB.MsgBox("The choice is " + choice);		NSB.MsgBox("The choice is " + choice);
	};		};