EasyUI Forum
October 03, 2022, 06:31:36 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Ribbon extension to indicate selected "mother" tab when looking at another tab.  (Read 114 times)
WizPS
Jr. Member
**
Posts: 64


View Profile
« on: September 16, 2022, 03:09:05 AM »

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!
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!