EasyUI Forum
June 16, 2024, 10:36:32 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: myeasyUI - A Guide  (Read 1456 times)
poeziafree
Jr. Member
**
Posts: 69


View Profile Email
« 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);
« Last Edit: June 23, 2023, 01:34:29 PM by poeziafree » 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!