JQuery1.5体验。二。MenuButton。

最新推荐文章于 2025-12-02 22:03:53 发布

原创最新推荐文章于 2025-12-02 22:03:53 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #dropdown #class #null #css

本文介绍了一种使用CSS和jQuery实现的下拉菜单组件。该组件通过自定义的MenuButton类来创建交互式的菜单，并提供了设置初始值、菜单宽度等配置项。点击菜单项时会触发回调函数。

根据http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx

简单的写了一个MenuButton类……满足基本需求吧……不要太苛刻嘛·～

注：本代码并没有涉及到css，有兴趣者请去源网站去扒css吧~

// items:内容，格式为{} // container:节点ID // defaultValue: 初始值 // width: 下拉菜单高度 // onCommand:选择后的返回函数 var MenuButton = $.Class(); $.extend(MenuButton.prototype, { options: { items: null, container: "", onCommand: null }, setOptions: function (options) { $.extend($.extend(this, this.options), options); }, initialize: function (options) { this.setOptions(options); this.initializeDOM(); this.initializeEvent(); }, initializeDOM: function () { this.value = this.defaultValue; this.items = this.items || {}; this.container = $("#" + this.container); this.render(); }, initializeEvent: function () { this.header.click(function () { this.body.toggle(1000); } .proxy(this)); this.region.find("dd ul li a").click(function (e) { var clicked = $(e.target); this.header.html(clicked.html()); this.body.hide(); this.value = clicked.find("span.value").html(); this.onCommand && this.onCommand(this.value); } .proxy(this)); this.onWindowClickHandler = this.onWindowClick.proxy(this); $(document).bind('click', this.onWindowClickHandler); }, destroyDOM: function () { this.body = null; this.header = null; this.container = null; }, destroyEvent: function () { $(document).unbind('click', this.onWindowClickHandler); }, closed: function () { this.destroyEvent(); this.destroyDOM(); }, onWindowClick: function (e) { var clicked = $(e.target); if (!clicked.parents().filter(this.container).length) { this.body.hide(); } }, //构建选项 render: function () { var n = this.items[this.value] || "无选项"; var v = this.value || ""; this.region = $('<dl class="dropdown"></dl>'); this.container.append(this.region); this.region.append('<dt><a href="#" mce_href="#">' + n + '' + v + '</a></dt>'); this.region.append('<dd><ul></ul></dd>'); this.body = this.region.find("dd ul").css({ width: this.width }); this.header = this.region.find("dt a"); $.each(this.items, function (value, name) { this.body.append('<li><a href="#" mce_href="#">' + name + '' + value + '</a></li>'); } .proxy(this)); }, //获取选项值 getValue: function () { return this.value; }, //返回默认选项 resetValue: function () { this.setValue(this.defaultValue); }, //设定选项值 setValue: function (value) { var n = this.items[value] || "无选项"; var v = value || ""; this.header.html(n + '' + v + ''); this.value = value; } });

于是你你你就有了this……