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);(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);
