论坛 Forum

字体、表情等点击弹出层的位置调整到菜单栏的上面，如何操作？

以“文字大小”菜单为例源码是这样的：

self.clickToolbar('fontsize', function () {
            var curVal = self.cmd.val('fontsize'),
			menu = self.createMenu({
			    name: 'fontsize',
			    width: 150,
			});
            _each(self.fontSizeTable, function (i, val) {
                menu.addItem({
                    title: '<span style="font-size:' + val + ';" unselectable="on">' + val + '</span>',
                    height: _removeUnit(val) + 12,
                    checked: curVal === val,
                    click: function () {
                        self.exec('fontsize', val).hideMenu();
                    }
                });
            });
        });

那么怎么计算这个菜单的高度并且将此弹出层的位置调整到菜单栏的上面呢？

加了一个函数，创建完菜单后调用一下

/*处理菜单弹出层位置函数*/
        self.setMenuPosition = function (pluginName, menu) {
            var knode = self.toolbar.get(pluginName),
            pos = knode.pos();
            K(menu.div).css("top", pos.y - K(menu.div).height() + "px");
        }

例如：

self.clickToolbar('fontsize', function () {
            var curVal = self.cmd.val('fontsize'),
			menu = self.createMenu({
			    name: 'fontsize',
			    width: 150
			});
            _each(self.fontSizeTable, function (i, val) {
                menu.addItem({
                    title: '<span style="font-size:' + val + ';" unselectable="on">' + val + '</span>',
                    height: _removeUnit(val) + 12,
                    checked: curVal === val,
                    click: function () {
                        self.exec('fontsize', val).hideMenu();
                    }
                });
            });
            /*处理菜单弹出层位置*/
            self.setMenuPosition("fontsize", menu);
        });