用菜单偏移量自定义Angular SlideAndPush指令
Customize Angular SlideAndPush Directive with Menu offset
我需要自定义Angular的Slide.and.push指令:http://ngmodules.org/modules/slide.and.push这当然是受到jquery版本的启发:http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
我想做的是模仿菜单/子菜单系统的类型，SquareSpace (http://www.squarespace.com/)是使用他们的管理仪表板(你必须创建一个免费帐户使用它或去观看他们的宣传视频，显示它)，总有一个可见的侧菜单沿着左侧的页面与菜单图标。当点击其中一个图标时，第二个滑出(推菜单)从第一个滑出(使它看起来像第二个菜单从第一个侧边菜单出来)。
到目前为止，当我添加这个slide.and.push指令时，二级菜单从页面左侧滑出，位于主侧边菜单上方。我试过调整css一点无济于事。下面是侧边菜单的原始css。所以它不是从屏幕最左边滑出来…我需要它从主要的始终可见的侧边菜单中滑出，该菜单宽度为110px。 /* Vertical menu that slides from the left or right */
.spmenu-left {
left: -320px;
border-right: 1px solid #65cff0;
}
.spmenu-left a.spmenu-button {
left: 320px;
top: 10px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
下面是指令的代码:
angular.module("slidePushMenu", []).factory('slidePush',function () {
var spmenuHorizontalHeight,
spmenuVerticalWidth;
spmenuVerticalWidth = 320;
spmenuHorizontalHeight = 150;
return {
slide: function (menu, btn) {
btn.toggleClass("active");
if (menu.hasClass("spmenu-left")) {
if (menu.hasClass("spmenu-open")) {
menu.css("left", parseInt(menu.css("left"), 10) - spmenuVerticalWidth);
} else {
menu.css("left", parseInt(menu.css("left"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-right")) {
if (menu.hasClass("spmenu-open")) {
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
} else {
menu.css("right", parseInt(menu.css("right"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-top")) {
if (menu.hasClass("spmenu-open")) {
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
} else {
menu.css("top", parseInt(menu.css("top"), 10) + spmenuHorizontalHeight);
}
}
if (menu.hasClass("spmenu-bottom")) {
if (menu.hasClass("spmenu-open")) {
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
} else {
menu.css("bottom", parseInt(menu.css("bottom"), 10) + spmenuHorizontalHeight);
}
}
return menu.toggleClass("spmenu-open");
},
slideForceClose: function (menu, btn) {
if (menu.hasClass("spmenu-open")) {
btn.removeClass("active");
if (menu.hasClass("spmenu-left")) {
menu.css("left", parseInt(menu.css("left"), 10) - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-right")) {
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-top")) {
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
}
if (menu.hasClass("spmenu-bottom")) {
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
}
return menu.removeClass("spmenu-open");
}
},
push: function (menu, btn) {
var body, bodyLeft, bodyTop;
body = angular.element("body");
btn.toggleClass("active");
if (menu.hasClass("spmenu-left")) {
bodyLeft = parseInt(body.css("left"), 10);
bodyLeft = (bodyLeft ? bodyLeft : 0);
if (menu.hasClass("spmenu-open")) {
body.css("left", bodyLeft - spmenuVerticalWidth);
} else {
body.css("left", bodyLeft + spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-open")) {
menu.css("left", parseInt(menu.css("left"), 10) - spmenuVerticalWidth);
} else {
menu.css("left", parseInt(menu.css("left"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-right")) {
bodyLeft = parseInt(body.css("left"), 10);
bodyLeft = (bodyLeft ? bodyLeft : 0);
if (menu.hasClass("spmenu-open")) {
body.css("left", bodyLeft + spmenuVerticalWidth);
} else {
body.css("left", bodyLeft - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-open")) {
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
} else {
menu.css("right", parseInt(menu.css("right"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-top")) {
bodyTop = parseInt(body.css("top"), 10);
bodyTop = (bodyTop ? bodyTop : 0);
if (menu.hasClass("spmenu-open")) {
body.css("top", "auto");
} else {
body.css("top", bodyTop + spmenuHorizontalHeight);
}
if (menu.hasClass("spmenu-open")) {
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
} else {
menu.css("top", parseInt(menu.css("top"), 10) + spmenuHorizontalHeight);
}
}
if (menu.hasClass("spmenu-bottom")) {
bodyTop = parseInt(body.css("top"), 10);
bodyTop = (bodyTop ? bodyTop : 0);
if (menu.hasClass("spmenu-open")) {
body.css("top", "auto");
} else {
body.css("top", bodyTop - spmenuHorizontalHeight);
}
if (menu.hasClass("spmenu-open")) {
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
} else {
menu.css("bottom", parseInt(menu.css("bottom"), 10) + spmenuHorizontalHeight);
}
}
return menu.toggleClass("spmenu-open");
},
pushForceClose: function (menu, btn) {
var body, bodyLeft;
if (menu.hasClass("spmenu-open")) {
btn.removeClass("active");
body = angular.element("body");
if (menu.hasClass("spmenu-left")) {
bodyLeft = parseInt(body.css("left"), 10);
bodyLeft = (bodyLeft ? bodyLeft : 0);
body.css("left", bodyLeft - spmenuVerticalWidth);
menu.css("left", parseInt(menu.css("left"), 10) - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-right")) {
bodyLeft = parseInt(body.css("left"), 10);
bodyLeft = (bodyLeft ? bodyLeft : 0);
body.css("left", bodyLeft + spmenuVerticalWidth);
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
}
if (menu.hasClass("spmenu-top")) {
body.css("top", "auto");
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
}
if (menu.hasClass("spmenu-bottom")) {
body.css("top", "auto");
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
}
return menu.removeClass("spmenu-open");
}
}
};
}).directive("ngSlideMenu", [
'slidePush', function (slidePush) {
return {
restrict: "A",
link: function (scope, elem, attrs) {
return elem.click(function () {
var menu;
menu = angular.element("#" + attrs.ngSlideMenu);
return slidePush.slide(menu, elem);
});
}
};
}
]).directive("ngPushMenu", [
'slidePush', function (slidePush) {
return {
restrict: "A",
link: function (scope, elem, attrs) {
var body, menu;
menu = angular.element("#" + attrs.ngPushMenu);
body = angular.element("body");
body.addClass("spmenu-push");
return elem.click(function () {
return slidePush.push(menu, elem);
});
}
};
}
]).directive("ngSlidePushMenu", [
"$document", 'slidePush', function ($document, slidePush) {
var compile, link;
compile = function (elem, attrs, transclude) {
link.transclude = transclude;
return link;
};
link = function (scope, elem, attrs) {
return link.transclude(scope, function (clone) {
var body, btn, buttonClass, buttonText, classes, positionFix;
classes = (attrs.spmClass ? attrs.spmClass : "");
classes += " spmenu spmenu-" + (attrs.position === "right" || attrs.position === "left" ? "vertical" : "horizontal") + " spmenu-" + attrs.position;
elem.addClass(classes);
body = angular.element("body");
if (attrs.button) {
btn = elem.find(".spmenu-button").addClass("show");
buttonText = attrs.buttonText ? attrs.buttonText : "";
buttonClass = attrs.buttonClass ? attrs.buttonClass : "";
btn.addClass(buttonClass);
btn.append("<span class='"" + buttonClass + "'">" + buttonText + "</span>");
positionFix = (attrs.fixTop ? "top: " + (parseInt(attrs.fixTop, 10) + elem.position().top) + "px; " : "");
positionFix += (attrs.fixLeft ? "left: " + (parseInt(attrs.fixLeft, 10) + elem.position().left) + "px; " : "");
btn.attr("style", positionFix);
if (attrs.button === "slide") {
$document.mouseup(function (e) {
if (!elem.is(e.target) && elem.has(e.target).length === 0 && !body.hasClass('modal-open')) {
return slidePush.slideForceClose(elem, btn);
}
});
btn.click(function () {
return slidePush.slide(elem, btn);
});
}
if (attrs.button === "push") {
angular.element("body").addClass("spmenu-push");
$document.mouseup(function (e) {
if (!elem.is(e.target) && elem.has(e.target).length === 0 && !body.hasClass('modal-open')) {
return slidePush.pushForceClose(elem, btn);
}
});
btn.click(function () {
return slidePush.push(elem, btn);
});
}
}
elem.append(clone);
if (attrs.open) {
return btn.click();
}
});
};
return {
compile: compile,
restrict: "E",
replace: true,
template: "<nav><a class='"spmenu-button'"><i class='"caret'"></i></a></nav>",
transclude: "element"
};
}
]);
任何帮助都非常感谢!: -)
经过一些修补，我能够解决这个问题。我必须对指令本身进行一些调整，然后调整幻灯片菜单的z-index，使其小于静态主侧菜单。请参阅幻灯片功能中我的评论。
slide: function (menu, btn) {
btn.toggleClass("active");
if (menu.hasClass("spmenu-left")) {
if (menu.hasClass("spmenu-open")) {
menu.css("left", -210); // Changed to this hardcoded value
} else {
menu.css("left", 110); // Changed to this hardcoded value
}
}
if (menu.hasClass("spmenu-right")) {
if (menu.hasClass("spmenu-open")) {
menu.css("right", parseInt(menu.css("right"), 10) - spmenuVerticalWidth);
} else {
menu.css("right", parseInt(menu.css("right"), 10) + spmenuVerticalWidth);
}
}
if (menu.hasClass("spmenu-top")) {
if (menu.hasClass("spmenu-open")) {
menu.css("top", parseInt(menu.css("top"), 10) - spmenuHorizontalHeight);
} else {
menu.css("top", parseInt(menu.css("top"), 10) + spmenuHorizontalHeight);
}
}
if (menu.hasClass("spmenu-bottom")) {
if (menu.hasClass("spmenu-open")) {
menu.css("bottom", parseInt(menu.css("bottom"), 10) - spmenuHorizontalHeight);
} else {
menu.css("bottom", parseInt(menu.css("bottom"), 10) + spmenuHorizontalHeight);
}
}
return menu.toggleClass("spmenu-open");
},
相关文章：
- 在指令控制器中使用$attrs时出现问题
- 参数变量出现ngTable指令问题
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- 使用每次都不同的transclude重复指令
- 打开一个模态并将其链接到AngularJS中的指令
- 从html创建一个指令，该指令按类名应用函数
- 将JSON对象传递给angular指令
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- JavaScript指令不能像我想象的那样工作
- AngularJs指令，该指令创建内部有数据对象的新指令
- AngularJS指令只识别双向绑定类型
- 从控制器继承了隔离的作用域以生成可重用的指令
- AngularJS指令出错-无法读取属性'编译'的未定义
- Angular指令在alertify setContent内容中不起作用
- 对父作用域的指令更新延迟了一步
- 指令的模板必须只有一个根元素:With restrict E&替换true
- AngularJS指令单元测试中未定义的函数
- 指令加载真的很长，检查加载时间的方法
- AngularJS指令，在元素后插入HTML
- 用菜单偏移量自定义Angular SlideAndPush指令
