Skip to content

Commit

Permalink
review menu
Browse files Browse the repository at this point in the history
  • Loading branch information
yiminghe committed Jul 16, 2014
1 parent b26efde commit d8ba759
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 80 deletions.
4 changes: 2 additions & 2 deletions src/menu/demo/other/mouse-menubutton.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h1 style="text-align: center;">
prefixCls:"nav-",
width:90,
// boolean,是否鼠标脱离菜单后自动隐藏全部下拉菜单
// autoHideOnMouseLeave:true,
autoHideOnMouseLeave:true,
children:[
new Menu.Item({
prefixCls:"nav-",
Expand Down Expand Up @@ -93,7 +93,7 @@ <h1 style="text-align: center;">
menu.render();

menu.on("click", function (e) {
alert(e.target.get("content"));
S.log(e.target.get("content"));
});
});
</script>
Expand Down
96 changes: 47 additions & 49 deletions src/menu/demo/other/topmenu.html
Original file line number Diff line number Diff line change
@@ -1,113 +1,111 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta charset="utf-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<title>top menu 测试</title>
<link href="../assets/menu.css" rel="stylesheet"/>
<link href="../assets/menuitem.css" rel="stylesheet"/>
<link href="../assets/submenu.css" rel="stylesheet"/>
<style>
#menuTest {
width: 300px;
}

.horizonal .ks-menuitem {
float: left;
width: 100px;
overflow: hidden;
}

.horizonal {
zoom: 1;
overflow: hidden;
}
</style>
<title>top menu 测试</title>
<link href="../assets/menu.css" rel="stylesheet"/>
<link href="../assets/menuitem.css" rel="stylesheet"/>
<link href="../assets/submenu.css" rel="stylesheet"/>
<style>
#menuTest {
width: 300px;
}

.horizonal .ks-menuitem {
float: left;
width: 100px;
overflow: hidden;
}

.horizonal {
zoom: 1;
overflow: hidden;
}
</style>
</head>
<body>
<h1 style="text-align: center;">
顶部导航菜单
</h1>

<div id="context" style="width: 500px;margin:50px auto;">

</div>
<script src="/kissy/build/seed-debug.js"></script>
<script src="/gen/dev.js"></script>
<script>


KISSY.use("menu,separator,node", function (S, Menu,Separator,$) {
KISSY.use("menu,separator,node", function (S, Menu, Separator, $) {
var context = $("#context");

var sb = new Menu.PopupMenu({
// boolean,是否鼠标脱离菜单后自动隐藏
autoHideOnMouseLeave:true,
align:{
offset:[-1, 4],
points:['bl', 'tl']
autoHideOnMouseLeave: true,
align: {
offset: [-1, 4],
points: ['bl', 'tl']
}
});

sb.addChild(new Menu.Item({

content:"submenuitem1"}));
content: "submenuitem1"}));
sb.addChild(new Menu.Item({

content:"submenuitem2"}));
content: "submenuitem2"}));

sb.addChild(new Separator());

var sb2 = new Menu.PopupMenu({

// boolean,是否鼠标脱离菜单后自动隐藏
autoHideOnMouseLeave:true,
children:[
autoHideOnMouseLeave: true,
children: [
new Menu.Item({

content:"submenuitem141"})
content: "submenuitem141"})
],
// bug elStyle 无效
elStyle:{
color:"red"
elStyle: {
color: "red"
}
});
sb2.addChild(new Menu.Item({

content:"submenuitem22"}));
content: "submenuitem22"}));

var b2 = new Menu.SubMenu({

content:"sub-sub-menu",
menu:sb2
content: "sub-sub-menu",
menu: sb2
});

sb.addChild(b2);

var b = new Menu.SubMenu({
content:"submenu",
menu:sb
content: "submenu",
menu: sb
});

var menu = new Menu({

width:440,
render:'#context',
elCls:"horizonal",
children:[b, new Menu.Item({

content:"alone"})]
width: 440,
render: '#context',
elCls: "horizonal",
children: [b,
new Menu.Item({
content: "alone"
})]
});

menu.render();

menu.on("click", function (e) {
alert(e.target.get("content"));
S.log(e.target.get("content"));
});
});

</script>
</body>
</html>
37 changes: 19 additions & 18 deletions src/menu/src/menu/control.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,10 @@ module.exports = Container.extend([
},

_onSetVisible: function (v, e) {
this.callSuper(v, e);
var self = this;
self.callSuper(v, e);
var highlightedItem;
if (!v && (highlightedItem = this.get('highlightedItem'))) {
if (!v && (highlightedItem = self.get('highlightedItem'))) {
highlightedItem.set('highlighted', false);
}
},
Expand All @@ -59,36 +60,38 @@ module.exports = Container.extend([
},

handleMouseEnterInternal: function (e) {
this.callSuper(e);
var rootMenu = this.getRootMenu();
var self = this;
self.callSuper(e);
var rootMenu = self.getRootMenu();
// maybe called by popupmenu, no submenu
if (rootMenu !== this && rootMenu._popupAutoHideTimer) {
if (rootMenu !== self && rootMenu._popupAutoHideTimer) {
clearTimeout(rootMenu._popupAutoHideTimer);
rootMenu._popupAutoHideTimer = null;
}
},

handleBlurInternal: function (e) {
this.callSuper(e);
var self = this;
self.callSuper(e);
var highlightedItem;
if ((highlightedItem = this.get('highlightedItem'))) {
if ((highlightedItem = self.get('highlightedItem'))) {
highlightedItem.set('highlighted', false);
}
},

//dir : -1 ,+1
//skip disabled items
_getNextEnabledHighlighted: function (index, dir) {
var children = this.get('children'),
len = children.length,
o = index;
var children = this.get('children');
var len = children.length;
var cur = index;
do {
var c = children[index];
var c = children[cur];
if (!c.get('disabled') && (c.get('visible') !== false)) {
return children[index];
return children[cur];
}
index = (index + dir + len) % len;
} while (index !== o);
cur = (cur + dir + len) % len;
} while (cur !== index);
return undefined;
},

Expand All @@ -108,7 +111,6 @@ module.exports = Container.extend([
*/
handleKeyDownInternal: function (e) {
var self = this;

// Give the highlighted control the chance to handle the key event.
var highlightedItem = self.get('highlightedItem');

Expand All @@ -117,8 +119,8 @@ module.exports = Container.extend([
return true;
}

var children = self.get('children'),
len = children.length;
var children = self.get('children');
var len = children.length;

if (len === 0) {
return undefined;
Expand Down Expand Up @@ -185,7 +187,6 @@ module.exports = Container.extend([
*/
containsElement: function (element) {
var self = this;

var $el = self.$el;

// 隐藏当然不包含了
Expand Down
4 changes: 2 additions & 2 deletions src/menu/src/menu/popupmenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = Menu.extend([
cur = self,
last;
do {
// 沿着 menumenuitem 链
// 沿着 menu menuitem 链
last = cur;
cur = cur.get('parent');
} while (cur && (cur.isMenuItem || cur.isMenu));
Expand Down Expand Up @@ -84,7 +84,7 @@ module.exports = Menu.extend([

/**
* Whether the whole menu tree which contains popup menu hides when mouseleave.
* Only valid for submenu 's popupmenu.
* Only valid for submenu's popupmenu.
* Defaults to: false.
* @cfg {Boolean} autoHideOnMouseLeave
*/
Expand Down
15 changes: 6 additions & 9 deletions src/menu/src/menu/submenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@ var util = require('util');
var SubMenuTpl = require('./submenu-xtpl');
var MenuItem = require('./menuitem');
var ContentBox = require('component/extension/content-box');

var KeyCode = require('node').Event.KeyCode,
MENU_DELAY = 0.15;
var KeyCode = require('node').Event.KeyCode;
var MENU_DELAY = 0.15;

function afterHighlightedChange(e) {
var target = e.target,
Expand All @@ -37,13 +36,12 @@ module.exports = MenuItem.extend([ContentBox], {
isSubMenu: 1,

decorateDom: function (el) {
var self = this,
prefixCls = self.get('prefixCls');
var self = this;
var prefixCls = self.get('prefixCls');
var popupMenuEl = el.one('.' + prefixCls + 'popupmenu');
var docBody = popupMenuEl[0].ownerDocument.body;
docBody.insertBefore(popupMenuEl[0], docBody.firstChild);
var PopupMenuClass =
this.getComponentConstructorByNode(prefixCls, popupMenuEl);
var PopupMenuClass = self.getComponentConstructorByNode(prefixCls, popupMenuEl);
self.setInternal('menu', new PopupMenuClass({
srcNode: popupMenuEl,
prefixCls: prefixCls
Expand Down Expand Up @@ -87,8 +85,7 @@ module.exports = MenuItem.extend([ContentBox], {
var menu = self.get('menu');
if (menu.get('visible')) {
// 延迟 highlighted
self._dismissTimer = util.later(hideMenu,
self.get('menuDelay') * 1000, false, self);
self._dismissTimer = util.later(hideMenu, self.get('menuDelay') * 1000, false, self);
}
},

Expand Down

0 comments on commit d8ba759

Please sign in to comment.