EasyUI Forum
March 29, 2024, 12:52:00 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
  Home Help Search Login Register  
  Show Posts
Pages: [1] 2 3 ... 5
1  General Category / EasyUI for jQuery / showEvent property to Searchbox Menu on: June 27, 2023, 08:52:16 AM
Hello,

When creating the menu programmatically, there is no option for setting "showEvent: 'click'" to the searchbox menu?
2  General Category / EasyUI for jQuery / NumberSpinner Long Press Increase/Decrease Values on: June 24, 2023, 11:08:18 PM
Hello,

How can we extend the NumberSpinner to allow the long press key to increase or decrease values without clicking the button each time?

Regards,
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 use
The 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:

Code:
$('#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.

Options
The 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

Code:
$('#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

Code:
(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):

Code:
(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:

Code:

<!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>



5  General Category / EasyUI for jQuery / Double click DataGrid checkbox triggers double click row on: February 11, 2023, 01:16:16 AM
Hello,

Double click datagrid checkbox performs the same action as the double click the row.

Is it the expected behavior?
6  General Category / EasyUI for jQuery / Client Side Pagination in ComboGrid on: February 09, 2023, 02:33:59 AM
Hello,

How to enable Client Side Pagination in ComboGrid?

Is there any built-in function?
7  General Category / EasyUI for jQuery / How to apply custom class to textbox label? on: February 05, 2023, 12:46:23 AM
Hello,

Is it possible to apply custom div class to component label?

labelCls or something similar available?

Thanks.
8  General Category / EasyUI for jQuery / Re: Viewport Resize Causes Issues in Fluid Texbox on: February 02, 2023, 02:49:30 AM
Thanks, Jarry!

In this case, on resizing the viewport, the first textbox inner typable area is smaller than the second one.

See the screenshot: the selected area with the red arrow shows that this area is not typable.

Screenshot: https://snipboard.io/736zEe.jpg

The issue is even worse, if there is a button enabled on the first textbox: https://snipboard.io/Tz5tqN.jpg
9  General Category / EasyUI for jQuery / Viewport Resize Causes Issues in Fluid Texbox on: February 01, 2023, 01:21:38 PM
Hello,

I have two fluid textboxes aligned horizontally.

Resize of viewport/parent causes issues with the width of the textbox.

Please see the example and the screenshot below: http://jsfiddle.net/ogszh82p/2/

Screenshot: https://paste.pics/LBVU7

What could be the problem?

Thanks
10  General Category / General Discussion / Re: Calling onBeforeCheck when checkAll is called. on: January 28, 2023, 12:55:39 AM
Have you found any solution?
11  General Category / EasyUI for jQuery / selectOnCheck not triggering onBeforeSelect in Datagrid on: January 28, 2023, 12:25:06 AM
Hello,

I have checkbox enabled in Datagrid.

I also have selectOnCheck: true.

Checking all checkboxes from the header doesn't trigger onBeforeSelect function individually for each row.

Is it a bug?

The idea is that for some rows, checkbox and selection functionality must be disabled.

Thanks
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:

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]); 
                                                            }
                                                       
                                                    }
                                                    });

13  General Category / EasyUI for jQuery / Menu: enableItem/disableItem + showItem/hideItem on: January 19, 2023, 12:41:15 AM
Hello,

I need to automatically hide the menu item on disable event and thus, show the menu item on enable event,

Can anyone help me with that?

Thanks in advance
14  General Category / EasyUI for jQuery / Changing value of datetimebox not triggering onChange in form on: January 03, 2023, 06:47:19 AM
Hello,

Whenever I change datetimebox value from panel, clicking OK doesn't trigger onChange event with a new value in form.

I have form validation in onChange event listener in form. In fact, form validation happens but old value of datetimebox is validated.

Please, fix.

Thanks
15  General Category / EasyUI for jQuery / Re: Listen to onChange in Form Causes Issues on: December 29, 2022, 01:28:08 PM
I believe, it would be better to be able to validate a form both with focus and without focus.

E.g.

1. $("#form").form('validate', 'focus'); ////// focuses on invalid fields

2. 1. $("#form").form('validate', 'Nofocus'); ///// does not focus on invalid fields
Pages: [1] 2 3 ... 5
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!