Print Page - Ribbon extension to indicate selected "mother" tab when looking at another tab.

Hi, I use ribbon extension and want the tab of the selected menu (mother tab) to indicate its current having that selection, when user looks at another tab (non mother tab).

So when the user selects a menu objects, it gets "selected". However when user clicks another tab, its no longer visible under witch tab the active and selected menu object is. Therefore it would be good to highlight the "mother tab" when a "non mother tab" gets selected. Possibly by changing the background colour of the "mother tab" or similar.

Code:

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Ribbon - jQuery EasyUI</title>

	<meta charset="UTF-8">
	<title>Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

	<link rel="stylesheet" type="text/css" href="ribbon.css">
	<link rel="stylesheet" type="text/css" href="ribbon-icon.css">
	<script type="text/javascript" src="jquery.ribbon.js"></script>
	<script type="text/javascript">
		var data = {
			selected: 0,
			tabs: [{
				title: 'Home',
				groups: [{
					title: 'Clipboard',
					tools: [{
						type: 'splitbutton',
						id: 'paste',
						text: 'Paste',
						iconCls: 'icon-paste-large',
						iconAlign: 'top',
						size: 'large',
						menuItems: [{
							id: 'paste',
							text: 'Paste',
							iconCls: 'icon-paste'
						}, {
							id: 'paste-special',
							text: 'Paste Special...',
							iconCls: 'icon-paste'
						}]
					}, {
						type: 'toolbar',
						dir: 'v',
						tools: [{
							id: 'cut',
							text: 'Cut',
							iconCls: 'icon-cut'
						}, {
							id: 'copy',
							text: 'Copy',
							iconCls: 'icon-copy'
						}, {
							id: 'format',
							text: 'Format',
							iconCls: 'icon-format'
						}]
					}]
				}, {
					title: 'Editing',
					dir: 'v',
					tools: [{
						type: 'splitbutton',
						id: 'find',
						text: 'Find',
						iconCls: 'icon-find',
						menuItems: [{
							id: 'find',
							text: 'Find',
							iconCls: 'icon-find'
						}, {
							id: 'go',
							text: 'Go to...',
							iconCls: 'icon-go'
						}]
					}, {
						id: 'replace',
						text: 'Replace',
						iconCls: 'icon-replace'
					}, {
						type: 'menubutton',
						id: 'select',
						text: 'Select',
						iconCls: 'icon-select',
						menuItems: [{
							id: 'selectall',
							text: 'Select All',
							iconCls: 'icon-selectall'
						}, {
							id: 'select-object',
							text: 'Select Objects',
							iconCls: 'icon-select'
						}]
					}]
				}]
			}, {
					title: 'Home2',
					groups: [{
						title: 'Clipboard2',
						tools: [{
							type: 'splitbutton',
							id: 'paste2',
							text: 'Paste2',
							iconCls: 'icon-paste-large',
							iconAlign: 'top',
							size: 'large',
							menuItems: [{
								id: 'paste2',
								text: 'Paste2',
								iconCls: 'icon-paste'
							}, {
								id: 'paste-special2',
								text: 'Paste Special2...',
								iconCls: 'icon-paste'
							}]
						}, {
							type: 'toolbar',
							dir: 'v',
							tools: [{
								id: 'cut2',
								text: 'Cut2',
								iconCls: 'icon-cut'
							}, {
								id: 'copy2',
								text: 'Copy2',
								iconCls: 'icon-copy'
							}, {
								id: 'format2',
								text: 'Format2',
								iconCls: 'icon-format'
							}]
						}]
					}]
				}, {
				title: 'Insert',
				groups: [{
					title: 'Table',
					tools: [{
						type: 'menubutton',
						id: 'table',
						text: 'Table',
						iconCls: 'icon-table-large',
						iconAlign: 'top',
						size: 'large'
					}]
				}, {
					title: 'Illustrations',
					tools: [{
						id: 'picture',
						text: 'Picture',
						iconCls: 'icon-picture-large',
						iconAlign: 'top',
						size: 'large'
					}, {
						id: 'clipart',
						text: 'Clip Art',
						iconCls: 'icon-clipart-large',
						iconAlign: 'top',
						size: 'large'
					}, {
						type: 'menubutton',
						id: 'shapes',
						text: 'Shapes',
						iconCls: 'icon-shapes-large',
						iconAlign: 'top',
						size: 'large'
					}, {
						id: 'smartart',
						text: 'SmartArt',
						iconCls: 'icon-smartart-large',
						iconAlign: 'top',
						size: 'large'
					}, {
						id: 'chart',
						text: 'Chart',
						iconCls: 'icon-chart-large',
						iconAlign: 'top',
						size: 'large'
					}]
				}]
			}]
		};

		$(function () {
			$('#rr').ribbon({
				data: data
				, onClick: function (name, target) {
					var selected = $('.l-btn-selected');	
					for (var obj of selected) {
						console.log($(obj).linkbutton('options').id);
						$(obj).linkbutton('unselect');
					}
					$('#' + $(target).linkbutton('options').id).linkbutton("select");
				}
			});
			
		});



	</script>
</head>
<body>
	<div id="rr" style="width:100%;">
	</div>
	<div id="content" style="width:100%;">
	</div>
</body>
</html>

Thanks for advice!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: WizPS on September 16, 2022, 03:09:05 AM