|
WizPS
|
 |
« Reply #2 on: December 19, 2020, 09:06:26 AM » |
|
Absolutely, Here's a code example <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ribbon - jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="ribbon.css"> <link rel="stylesheet" type="text/css" href="ribbon-icon.css"> <script type="text/javascript" src="../../easyui/jquery.min.js"></script> <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script> <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', name:'paste', text:'Paste', iconCls:'icon-paste-large', iconAlign:'top', size:'large', menuItems:[{ name:'paste', text:'Paste', iconCls:'icon-paste' },{ name:'paste-special', text:'Paste Special...', iconCls:'icon-paste' }] },{ type:'toolbar', dir:'v', tools:[{ name:'cut', text:'Cut', iconCls:'icon-cut' },{ name:'copy', text:'Copy', iconCls:'icon-copy' },{ name:'format', text:'Format', iconCls:'icon-format' }] }] },{ title:'Font', tools:[{ type:'toolbar', tools:[{ type:'combobox', valueField:'text', textField:'text', data:[{text:'Arial',selected:true},{text:'Century'},{text:'Tahoma'}], width:100, panelHeight:'auto', editable:false },{ type:'combobox', valueField:'text', textField:'text', data:[{text:'8'},{text:'12',selected:true},{text:'14'}], width:60, panelHeight:'auto', editable:false }] },{ type:'toolbar', style:{marginLeft:'5px'}, tools:[{ name:'increase-font', iconCls:'icon-increase-font' },{ name:'decrease-font', iconCls:'icon-decrease-font' }] },{ type:'toolbar', style:{clear:'both',marginTop:'2px'}, tools:[{ name:'bold', iconCls:'icon-bold', toggle:true },{ name:'italic', iconCls:'icon-italic', toggle:true },{ name:'underline', iconCls:'icon-underline', toggle:true },{ name:'strikethrough', iconCls:'icon-strikethrough', toggle:true },{ name:'superscript', iconCls:'icon-superscript', toggle:true },{ name:'subscript', iconCls:'icon-subscript', toggle:true }] },{ type:'toolbar', style:{clear:'both'}, tools:[{ name:'case-font', iconCls:'icon-case-font' },{ name:'grow-font', iconCls:'icon-grow-font' },{ name:'shrink-font', iconCls:'icon-shrink-font' }] }] },{ title:'Paragraph', dir:'v', tools:[{ type:'toolbar', tools:[{ name:'slign-left', iconCls:'icon-align-left', toggle:true, group:'p1' },{ name:'align-center', iconCls:'icon-align-center', toggle:true, group:'p1' },{ name:'align-right', iconCls:'icon-align-right', toggle:true, group:'p1' },{ name:'align-justify', iconCls:'icon-align-justify', toggle:true, group:'p1' }] },{ type:'toolbar', style:{marginTop:'2px'}, tools:[{ name:'bullets', iconCls:'icon-bullets' },{ name:'numbers', iconCls:'icon-numbers' }] }] },{ title:'Editing', dir:'v', tools:[{ type:'splitbutton', name:'find', text:'Find', iconCls:'icon-find', menuItems:[{ name:'find', text:'Find', iconCls:'icon-find' },{ name:'go', text:'Go to...', iconCls:'icon-go' }] },{ name:'replace', text:'Replace', iconCls:'icon-replace' },{ type:'menubutton', name:'select', text:'Select', iconCls:'icon-select', menuItems:[{ name:'selectall', text:'Select All', iconCls:'icon-selectall' },{ name:'select-object', text:'Select Objects', iconCls:'icon-select' }] }] }] },{ title:'Insert', groups:[{ title:'Table', tools:[{ type:'menubutton', name:'table', text:'Table', iconCls:'icon-table-large', iconAlign:'top', size:'large' }] },{ title:'Illustrations', tools:[{ name:'picture', text:'Picture', iconCls:'icon-picture-large', iconAlign:'top', size:'large' },{ name:'clipart', text:'Clip Art', iconCls:'icon-clipart-large', iconAlign:'top', size:'large' },{ type:'menubutton', name:'shapes', text:'Shapes', iconCls:'icon-shapes-large', iconAlign:'top', size:'large' },{ name:'smartart', text:'SmartArt', iconCls:'icon-smartart-large', iconAlign:'top', size:'large' },{ name:'chart', text:'Chart', iconCls:'icon-chart-large', iconAlign:'top', size:'large' }] }] }] }; $(function(){ $('#rr').ribbon({ data:data }); }); </script> </head> <body> <div id="rr" style="width:100%;"> </div> </body> </html> in witch I have with of ribbon set to 100% so it always on top as a nice ribbon. Pic 1 and 2 shows wide browser where ribbon follows the with nicely. In Pic 3 the ribbon breaks into 2 rows witch is what i want to prevent. In Pic 4 I simulate how the tabs plugin works with adding right and left scrolling option. A browser scroll might work but also that makes a line break so I have to scroll both horizontal and vertical. horizontal is OK but vertical not. Hope I managed to explain better now and sorry for being unclear earlier. |
