Show Posts
|
Pages: [1] 2 3 ... 5
|
3
|
General Category / EasyUI for jQuery / myeasyUI - A Guide
|
on: June 23, 2023, 01:32:36 PM
|
myeasyUI is a flexible jQuery plugin designed to simplify the creation and configuration of EasyUI components. It allows you to set up complex EasyUI layouts with less code and provides a clear and straightforward way to manage your UI structure. Features- Simple API - Supports a wide range of EasyUI components - Declarative configuration - Automatically handles component creation and layout - Allows creation of nested components How to useThe myeasyUI function is added to the jQuery prototype, so you can call it on any jQuery object. You pass an options object to the function to configure the EasyUI components that you want to create. Here is a simple usage example: $('#app').myeasyUI({ plugin: 'layout', plugincontent: { fit: true }, contentarray: [{ region: 'center', title: 'My Center Panel', border: false }] });
This will initialize a new EasyUI layout on the #app element, with a single center panel. OptionsThe options object you pass to myeasyUI can contain the following properties: - plugin: The type of EasyUI component to create. For example, 'layout', 'tabs', 'accordion', etc. - plugincontent: The options to pass to the EasyUI component's initializer. The properties available depend on the type of component. - contentarray: An array of objects representing the content of the component. Each object can contain the same properties as the main options object, allowing you to create nested components. - onCreate: A function that is called after the component is created. It receives three arguments: the jQuery object for the created element, its parent element, and the root element. Example with Nested Components and Callbacks $('#app').myeasyUI({ plugin: 'layout', plugincontent: { fit: true }, contentarray: [ { region: 'center', title: 'My Center Panel', border: false, href: false, onCreate: function($element, $parent, $root) { console.log('Center panel created'); } }, { region: 'north', title: 'My North Panel', border: false, split: false, height: '135px', collapsible: false, plugin: 'ribbon', ribbonoptions: { method: 'load', params: { href: 'https://my.api.com/ribbon-data', method: 'GET', dataType: 'json', onBeforeLoad: function(){ console.log('Request is about to be sent'); }, onLoad: function(data){ console.log('Request succeeded', data); }, onLoadError: function(){ console.log('Request failed'); } } }, onCreate: function($element, $parent, $root) { console.log('North panel created'); } } ] });
In this example, a layout is created with two panels, 'center' and 'north'. The 'north' panel contains a 'ribbon' plugin. Each plugin has its own onCreate callback. Enjoy creating amazing user interfaces with myeasyUI! myeasyUI(function ($) { $.fn.myeasyUI = function (opts) { return processOpts(opts, this, null); };
function processOpts(opts, $element, $rootElement) { if (!opts || !opts.plugin) return $element; $element[opts.plugin](opts.plugincontent); const contentArray = opts.contentarray; const $root = $rootElement || $element;
if (contentArray instanceof Object) { contentArray.forEach(o => { let $panel;
if (['layout', 'accordion', 'tabs'].includes(opts.plugin)) { $element[opts.plugin]('add', o); $panel = $element[opts.plugin]('panel', o.region || null); } else { $panel = $element; }
if (o.plugin === 'ribbon' && o.ribbonoptions) { $panel.ribbon(o.ribbonoptions.method, o.ribbonoptions.params); }
processOpts(o, $panel, $root); }); }
if (opts.onCreate) opts.onCreate($element, $element.parent(), $root); return $element; } })(jQuery); Updated Ribbin extension (added support to load remote data):(function($){ function buildRibbon(target){ var opts = $.data(target, 'ribbon').options; // $(target).addClass('ribbon').tabs(opts); $(target).addClass('ribbon').tabs($.extend({},opts,{ onSelect: function(title,index){ $(this).ribbon('resizeGroups'); opts.onSelect.call(this,title,index) } })); var tabs = $(target).tabs('tabs'); for(var i=0; i<tabs.length; i++){ tabs[i].addClass('ribbon-tab'); } } function bindEvents(target){ var opts = $.data(target, 'ribbon').options; $(target).find('.l-btn').unbind('.ribbon').bind('click.ribbon', function(e){ var bopts = $(this).linkbutton('options'); opts.onClick.call(target, bopts.name, this); }); $(target).find('.m-btn').each(function(){ var m = $($(this).menubutton('options').menu); if (m.length){ var mopts = m.menu('options'); var onClick = mopts.onClick; mopts.onClick = function(item){ onClick.call(this, item); if (mopts.timer){ clearTimeout(mopts.timer); } mopts.timer = setTimeout(function(){ opts.onClick.call(target, item.name, m[0]); },0); } } }); }
function resizeGroups(target){ var r = $(target); var p = r.tabs('getSelected').find('.ribbon-groups'); var width = 0; p.children().each(function(){ width += $(this)._outerWidth(); }); p._outerWidth(Math.ceil(width)); } function loadData(target, data){ var opts = $.data(target, 'ribbon').options; var r = $(target); for(var i=r.ribbon('tabs').length-1; i>=0; i--){ r.ribbon('close', i); } if (data){ opts.data = data; } opts.data.tabs = opts.data.tabs || []; for(var i=0; i<opts.data.tabs.length; i++){ var tab = opts.data.tabs[i]; r.ribbon('add', $.extend({}, tab, { bodyCls:'ribbon-tab' })); var p = r.ribbon('getTab', i); buildGroups(tab.groups, p); } if (opts.data.selected == undefined){ opts.data.selected = 0; } r.ribbon('select', opts.data.selected); bindEvents(target); function buildGroups(groups, p){ p.empty(); p = $('<div class="ribbon-groups"></div>').appendTo(p); groups = groups || []; for(var i=0; i<groups.length; i++){ var group = groups[i]; group.dir = group.dir || 'h'; var g = $('<div class="ribbon-group"></div>').appendTo(p); $('<div class="ribbon-group-sep"></div>').appendTo(p); $('<div class="ribbon-group-title"></div>').html(group.title||'').appendTo(g); group.tools = group.tools || []; $.map(group.tools, function(tool){ var type = tool.type || 'linkbutton'; if (type == 'toolbar'){ var toolbar = $('<div class="ribbon-toolbar"></div>').appendTo(g); toolbar.css(tool.style||{}); if (group.dir == 'v'){ toolbar.css('clear', 'both'); } var dir = tool.dir || 'h'; $.map(tool.tools, function(tool){ buildTool(tool, toolbar, dir); }); toolbar.append('<div style="clear:both"></div>'); } else { buildTool(tool, g, group.dir); } }); g.find('.ribbon-group-title')._outerWidth(g.outerWidth()-2); }
function buildTool(options, p, dir){ var type = options.type || 'linkbutton'; options.plain = options.plain || true; if (options.menuItems){ var m = $('<div></div>').appendTo('body'); m.menu(); $.map(options.menuItems, function(item){ m.menu('appendItem', item); }); options.menu = m; } var btn = $('<a href="javascript:void(0)"></a>').appendTo(p); if (options.id){ btn.attr('id', options.id); } btn[type](options); if (dir == 'v'){ btn.css('clear','both'); } if (options.tooltip){ if (btn.hasClass('textbox-f')){ btn.next().tooltip({content:options.tooltip}); } else { btn.tooltip({content:options.tooltip}); } } } } } $.fn.ribbon = function(options, param){ if (typeof options == 'string'){ var method = $.fn.ribbon.methods[options]; if (method){ return method(this, param); } else { return this.tabs(options, param); } } options = options || {}; return this.each(function(){ var state = $.data(this, 'ribbon'); if (state){ $.extend(state.options, options); } else { state = $.data(this, 'ribbon', { options: $.extend({}, $.fn.ribbon.defaults, $.fn.ribbon.parseOptions(this), options) }); } buildRibbon(this); bindEvents(this); if (state.options.data){ loadData(this, state.options.data); } }); }; $.fn.ribbon.methods = { options: function(jq){ return $.data(jq[0], 'ribbon').options; }, loadData: function(jq, data){ return jq.each(function(){ loadData(this, data); }); }, load: function(jq, params){ return jq.each(function(){ var target = this; // Ensure that the ribbon is initialized if (!$.data(target, 'ribbon')) { $(target).ribbon(); } $.ajax({ url: params.href, type: params.method || "GET", dataType: params.dataType || "json", beforeSend: function(){ if (params.onBeforeLoad){ params.onBeforeLoad.call(target); } }, success: function(data){ loadData(target, data); if (params.onLoad){ params.onLoad.call(target, data); } }, error: function(){ if (params.onLoadError){ params.onLoadError.call(target); } } }); }); }, resizeGroups: function(jq){ return jq.each(function(){ resizeGroups(this); }); } }; $.fn.ribbon.parseOptions = function(target){ return $.extend({}, $.fn.tabs.parseOptions(target), { }); }; $.fn.ribbon.defaults = $.extend({}, $.fn.tabs.defaults, { onClick:function(name, target){} }); //////////////////////////////// $.parser.plugins.push('ribbon'); })(jQuery);
|
|
|
4
|
General Category / EasyUI for jQuery / Re: How do we create multi step form inside easyui dialog.
|
on: March 15, 2023, 11:51:27 AM
|
To create a multi-step form inside an EasyUI dialog, you can follow these steps: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Multi-step form in EasyUI Dialog</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/themes/icon.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> </head> <body> <!-- Your code will go here -->
<div id="dlg" class="easyui-dialog" style="width:400px;height:300px;padding:10px 20px" closed="true" buttons="#dlg-buttons"> <form id="multiStepForm" method="post" novalidate> <div id="step1" class="step"> <h3>Step 1</h3> <div class="easyui-form-item"> <label for="field1">Field 1:</label> <input id="field1" name="field1" class="easyui-textbox" required="true"> </div> <div class="easyui-form-item"> <label for="field2">Field 2:</label> <input id="field2" name="field2" class="easyui-textbox" required="true"> </div> </div> <div id="step2" class="step" style="display:none"> <h3>Step 2</h3> <div class="easyui-form-item"> <label for="field3">Field 3:</label> <input id="field3" name="field3" class="easyui-textbox" required="true"> </div> <div class="easyui-form-item"> <label for="field4">Field 4:</label> <input id="field4" name="field4" class="easyui-textbox" required="true"> </div> </div> <!-- Add more steps as needed --> </form> </div> <div id="dlg-buttons"> <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="nextStep();" style="width:90px">Next</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a> </div>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="$('#dlg').dialog('open').dialog('setTitle', 'Multi-step Form')">Open Multi-step Form</a>
<script type="text/javascript"> var currentStep = 1;
function nextStep() { var form = $('#multiStepForm'); form.form('submit', { onSubmit: function() { var isValid = $(this).form('validate'); if (isValid) { currentStep++; $('.step').hide(); $('#step' + currentStep).show();
if (currentStep > 1) { $('.c6').linkbutton({ text: 'Submit' }); }
// If there are more steps, return false to prevent form submission if (currentStep < $('.step').length) { return false; } } return isValid; }, success: function(data) { alert('Form submitted successfully'); $('#dlg').dialog('close'); // Reset the form and step form.form('clear'); currentStep = 1; $('.step').hide(); $('#step1').show(); $('.c6').linkbutton({ text: 'Next' }); } }); } </script>
</body> </html>
|
|
|
12
|
General Category / EasyUI for jQuery / hideItem/showItem in menu not working properly
|
on: January 19, 2023, 03:13:57 AM
|
Hello, hideItem/showItem in menu doesn't work properly. In case there are two identical menus, where item ids aren't unique, hideItem/showItem only works for one menu. I think, the problem is with this code: $(_482).show(); $(_482).hide(); it should find the item id within the menu ( e.g. menu.find(_482).hide() ) Currently, it searched the item id on the whole page, instead within the menu. Code: var m = $(this).datagrid('getPanel').find('#actions-btn').menubutton('options').menu; // get the menu object var item = m.menu('findItem', function(item){ if (item.id == 'resend'){ if (data.row.status == "Scheduled") { m.menu('hideItem', $('#'+item.id)[0]); } else { m.menu('showItem', $('#'+item.id)[0]); } } else { if (data.row.status == "Scheduled") { m.menu('showItem', $('#'+item.id)[0]); } else { m.menu('hideItem', $('#'+item.id)[0]); } } });
|
|
|
|