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>

Bootstrap Web サイトの例のように、HTML で Bootstrap のレスポンシブ ナビゲーション バーを利用したいのです が、これには jquery 折りたたみプラグインを含める必要がありますが、私の上司は、jquery を含めることはできず、YUI のみを使用する必要があると言いました。Alloy UIには、Modal、TabView、Accordionなど、Bootstrapに相当するjqueryコンポーネントがいくつか含まれていることを知っていますが、モバイルレスポンシブナビゲーションバーを機能させることができません。jQuery と Bootstrap を YUI 内のモジュールとして追加せずに、この機能を組み込むための回避策はありますか?

4

2 に答える 2

2

liferay テーマの応答性を実現するために、ブートストラップの js 部分は必要ありません。

Lifery 6.2 には、js 部分のない Bootstrap 2.3 が含まれています。レスポンシブなナビゲーション バーを使用することは役に立ちません。これは CSS のみの問題です。

クラシック テーマはレスポンシブです。そこからコピーします。

于 2014-05-20T09:37:37.817 に答える
1

jQuery /折りたたみを使用せずに、AlloyUIでレスポンシブナビゲーションバーメニューを表示/非表示にするために、このjavascriptコードを使用しています。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 に答える