Title: declaring menulink in html
Post by: featheral on September 16, 2019, 01:05:28 AM
Hi. I wish to create a menuButton declaratively (not through js). Could not it in the docs. What I'm after is quite straight-forward: - build a dropdown menu out of the set of properties retrieved from a backend. Each property has text and code. The text is what needs to be displayed;the code - gets sent to the backend whern a menu item is selected.
- When user selects an option, a url is hit on the backend, providing the a/m code.
Thanks.
Title: Re: declaring menulink in html
Post by: jarry on September 16, 2019, 02:09:17 AM
You can extend a plugin to create the menu items from the remote server. The code looks like this: (function($){
function init(target){
var opts = $.data(target, 'menulink').options;
var m = $('<div></div>').menu({
onClick: function(item){
opts.onClickMenu.call(target, item);
}
});
$(target).menubutton($.extend(opts, {
menu: m
}));
opts.loader.call(target, {}, function(data){
$.map(data, function(row){
m.menu('appendItem', {
id: row.code,
text: row.text
})
});
});
}
$.fn.menulink = function(options, param){
if (typeof options == 'string'){
var method = $.fn.menulink.methods[options];
if (method){
return method(this, param);
} else {
return this.menubutton(options, param);
}
}
options = options || {};
return this.each(function(){
var state = $.data(this, 'menulink');
if (state){
$.extend(state.options, options);
} else {
$.data(this, 'menulink', {
options: $.extend({}, $.fn.menulink.defaults, $.fn.menulink.parseOptions(this), options)
});
}
init(this);
})
};
$.fn.menulink.methods = {
options: function(jq){
return $.data(jq[0], 'menulink');
}
};
$.fn.menulink.parseOptions = function(target){
return $.extend({}, $.fn.menubutton.parseOptions(target), $.parser.parseOptions(target, [
]));
};
$.fn.menulink.defaults = $.extend({}, $.fn.menubutton.defaults, {
method: 'post',
loader: function(param,success,error){
var opts = $(this).menulink('options');
if (!opts.url) return false;
$.ajax({
type: opts.method,
url: opts.url,
data: param,
dataType: 'json',
success: function(data){
success(data);
},
error: function(){
error.apply(this, arguments);
}
});
},
onClickMenu(item){}
});
$.parser.plugins.push('menulink');
})(jQuery);
Usage example: <a href="#" class="easyui-menulink" data-options="
// url: '...',
// emulate to load data from server
loader: function(param,success){
var menus = [{code:'c1',text:'MenuItem1'},{code:'c2',text:'MenuItem2'}];
success(menus)
},
onClickMenu(item){
console.log(item)
}
">MenuLink</a>
Title: Re: declaring menulink in html
Post by: featheral on September 16, 2019, 02:30:22 AM
Thanks Jarry, but not really what I am after.
I am looking for easyui to provide the solution, one that can be used declaratively, without any extra js. The whole point of using the library is to save me the need to write my own impl.
Title: Re: declaring menulink in html
Post by: jarry on September 16, 2019, 06:55:04 PM
You can save the 'menulink' code as a external js file and include it into the page. The usage code is simple, just set the 'url' property and some logic to handle the 'onClickMenu' event. <a href="#" class="easyui-menulink" data-options="
url: '...',
onClickMenu(item){
console.log(item)
}
">MenuLink</a>
Title: Re: declaring menulink in html
Post by: featheral on September 17, 2019, 06:03:28 PM
Thanks, but even if I go along with such a solution, there's still logic (js code) in the html, and I rather avoid that.
Title: Re: declaring menulink in html
Post by: jarry on September 17, 2019, 07:02:27 PM
You can move the menu clicking event code to your menulink plugin according to your logic. No js code at all in the html markup.
|