1

我正在使用 Liferay 6.2 并在我的 html 页面中包含 Alloy UI 的 Bootstrap 版本，即：

<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>

我想在我的 html 中使用 Bootstrap 的响应式导航栏，就像 Bootstrap 网站上的示例一样，但这需要包含 jquery 折叠插件，但我的老板告诉我们我们不能包含 jquery，必须单独使用 YUI。我知道 Alloy UI 包含几个 Bootstrap 等效的 jquery 组件，例如 Modal、TabView、Accordion 等。但我无法让移动响应式导航栏正常工作。有没有一种解决方法可以在不添加 jQuery 和 Bootstrap 作为 YUI 中的模块的情况下使用这个功能？

4

2 回答 2

2

要实现 liferay 主题的响应性，您不需要引导程序的 js 部分。

Lifery 6.2 包括没有 js 部分的 Bootstrap 2.3，拥有响应式导航栏没有用，这只是 css 的问题。

经典主题是响应式的，从中复制。

于 2014-05-20T09:37:37.817 回答
1

我正在使用这个 javascript 代码来显示/隐藏带有 AlloyUI 的响应式导航栏菜单，而不使用 jQuery/collapse。似乎适用于 Android/iOS 默认浏览器。

YUI().use(
    'aui-node',
    function (Y) {
        var navbarButton = Y.one(".btn-navbar");
        var navbarCollapse = Y.one(".nav-collapse");

        navbarButton.on('click', function (e) {
            if (navbarCollapse.hasClass("in")) {
                navbarCollapse.removeClass("in");
                navbarCollapse.setStyle("height", "0px");
            } else {
                navbarCollapse.addClass("in");
                navbarCollapse.setStyle("height", "auto");
            }
        });
    }
);

另外，我正在使用此代码设置响应式导航栏。我修改了从导航栏按钮中删除data-toggle和data-target属性的原始示例。

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">

            <a class="btn btn-navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>

            <a class="brand" href="#">Project name</a>

            <div class="nav-collapse collapse">
                <!-- .nav, .navbar-search, .navbar-form, etc -->
            </div>

        </div>
    </div>
</div>

我不知道这是否足以满足你的情况。

于 2014-06-29T01:36:52.563 回答