AppSuite:BackboneMiniViews - Revision history

Khgras: Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/components/backbone-mini-views.html Note: Open-Xchange is in the process of migrati..."

2017-05-22T09:14:04Z

Replaced content with "The content on this page has moved to https://documentation.open-xchange.com/latest/ui/components/backbone-mini-views.html Note: Open-Xchange is in the process of migrati..."

Show changes

Frank.paczynski at 06:51, 10 February 2016

2016-02-10T06:51:17Z

← Older revision		Revision as of 06:51, 10 February 2016
Line 1:		Line 1:
			<!-- !!! -->
			<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
			<!-- !!! -->


	<div class="title">Backbone mini views</div>		<div class="title">Backbone mini views</div>

Christoph.kopp: /* Dropdown Link */

2015-07-15T11:58:45Z

Dropdown Link

← Older revision		Revision as of 11:58, 15 July 2015
Line 321:		Line 321:
	<pre class="language-javascript">		<pre class="language-javascript">
	var dropdownOptions = {		var dropdownOptions = {
	'value1': '~~label1~~',		'value1': 'Dropdownlink 1',
	'value2': '~~label2~~',		'value2': 'Dropdownlink 2',
	'value3': '~~label3~~'		'value3': 'Dropdownlink 3'
	};		};
	</pre>		</pre>

Christoph.kopp: /* Dropdown Link */

2015-07-15T11:57:44Z

Dropdown Link

← Older revision		Revision as of 11:57, 15 July 2015
Line 332:		Line 332:
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menuitem" aria-haspopup="true" tabindex="1">label1</a>		<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menuitem" aria-haspopup="true" tabindex="1">label1</a>
	<ul class="dropdown-menu" role="menu">		<ul class="dropdown-menu" role="menu">
	<li><a href="#" data-action="change-value" data-value="value1" tabindex="1">~~label1~~</a></li>		<li><a href="#" data-action="change-value" data-value="value1" tabindex="1">Dropdownlink 1</a></li>
	<li><a href="#" data-action="change-value" data-value="value2" tabindex="1">~~label2~~</a></li>		<li><a href="#" data-action="change-value" data-value="value2" tabindex="1">Dropdownlink 2</a></li>
	<li><a href="#" data-action="change-value" data-value="value3" tabindex="1">~~label3~~</a></li>		<li><a href="#" data-action="change-value" data-value="value3" tabindex="1">Dropdownlink 3</a></li>
	</ul>		</ul>
	</div>		</div>

Christoph.kopp: /* Dropdown Link */

2015-07-15T11:56:36Z

Dropdown Link

← Older revision		Revision as of 11:56, 15 July 2015
Line 318:		Line 318:
	</pre>		</pre>

	Use this.options.values to set the list of available ~~options~~ and labels.		Use this.options.values to set the list of available values and labels.
	<pre class="language-javascript">		<pre class="language-javascript">
	var dropdownOptions = {		var dropdownOptions = {

Christoph.kopp: /* Playground */

2015-07-15T11:50:48Z

Playground

← Older revision		Revision as of 11:50, 15 July 2015
Line 374:		Line 374:

	var dropdownOptions = {		var dropdownOptions = {
	'value1': '~~label1~~',		'value1': 'Dropdownlink 1',
	'value2': '~~label2~~',		'value2': 'Dropdownlink 2',
	'value3': '~~label3~~'		'value3': 'Dropdownlink 3'
	};		};

Christoph.kopp: /* Playground */

2015-07-15T11:48:16Z

Playground

← Older revision		Revision as of 11:48, 15 July 2015
Line 453:		Line 453:
	),		),
	$('<div class="row form-group">').append(		$('<div class="row form-group">').append(
	$('<~~label~~ class="~~control-label~~ col-sm-~~4">').text('Dropdown Link'),~~		$('<div class="col-sm-8 col-sm-offset-4">').append(
	~~$('<div class="~~col-sm-8">').append(
	new mini.DropdownLinkView({ id: 'dropdownLink', model: model, values: dropdownOptions }).render().$el		new mini.DropdownLinkView({ id: 'dropdownLink', model: model, values: dropdownOptions }).render().$el
	)		)

Christoph.kopp: /* Playground */

2015-07-15T08:36:06Z

Playground

← Older revision		Revision as of 08:36, 15 July 2015
Line 455:		Line 455:
	$('<label class="control-label col-sm-4">').text('Dropdown Link'),		$('<label class="control-label col-sm-4">').text('Dropdown Link'),
	$('<div class="col-sm-8">').append(		$('<div class="col-sm-8">').append(
	new mini.DropdownLinkView({ id: 'dropdownLink', model: model }).render().$el		new mini.DropdownLinkView({ id: 'dropdownLink', model: model, values: dropdownOptions }).render().$el
	)		)
	)		)

Christoph.kopp: /* Playground */

2015-07-15T08:34:58Z

Playground

← Older revision		Revision as of 08:34, 15 July 2015
Line 357:		Line 357:
	dropdownOptions: 'firstOption',		dropdownOptions: 'firstOption',
	dropdownChoice: 'firstChoice',		dropdownChoice: 'firstChoice',
	dropdownLink: '~~firstValue~~'		dropdownLink: 'value1'
	});		});

Christoph.kopp: /* Playground */

2015-07-15T08:31:57Z

Playground

← Older revision		Revision as of 08:31, 15 July 2015
Line 356:		Line 356:
	date: 1411023212550,		date: 1411023212550,
	dropdownOptions: 'firstOption',		dropdownOptions: 'firstOption',
	dropdownChoice: 'firstChoice'		dropdownChoice: 'firstChoice',
			dropdownLink: 'firstValue'
	});		});

Line 371:		Line 372:
	{ label: '3', value: '3'}		{ label: '3', value: '3'}
	];		];

			var dropdownOptions = {
			'value1': 'label1',
			'value2': 'label2',
			'value3': 'label3'
			};

	var dropdown = new Dropdown({ model: model, label: 'Dropdown' })		var dropdown = new Dropdown({ model: model, label: 'Dropdown' })
Line 443:		Line 450:
	new mini.DateView({ id: 'date', model: model }).render().$el,		new mini.DateView({ id: 'date', model: model }).render().$el,
	new mini.ErrorView({ selector: '.row' }).render().$el		new mini.ErrorView({ selector: '.row' }).render().$el
			)
			),
			$('<div class="row form-group">').append(
			$('<label class="control-label col-sm-4">').text('Dropdown Link'),
			$('<div class="col-sm-8">').append(
			new mini.DropdownLinkView({ id: 'dropdownLink', model: model }).render().$el
	)		)
	)		)