declaring menulink in html

[featheral]

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.

[jarry]

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>

[featheral]

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.

[jarry]

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>

[featheral]

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.

[jarry]

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.