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