을 Liferay

Question

내가하는 Liferay 6.2를 사용하여 내 HTML 페이지에서 부트 스트랩의 합금 UI의 버전을 포함하고, 즉 네이티브 부트 스트랩 2.3.2 자바 스크립트 구성 요소를 활성화하는 방법 :

<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> 

나는 부트 스트랩의 반응을 사용하고 싶습니다 navbar 예를 들어 Bootstrap website에 내 HTML에서 있지만 jquery 붕괴 플러그인이 포함되어 있어야하지만 내 상사는 jquery를 포함 할 수 없으며 전적으로 유이를 사용해야합니다 우리에게 말했다. 알로이 UI에는 Modal, TabView, Accordion 등과 같은 몇 가지 Bootstrap 상당 jquery 구성 요소가 포함되어 있습니다. 그러나 모바일 반응 형 Navbar가 작동하지 않습니다. YUI에서 모듈로 jQuery와 Bootstrap을 추가하지 않고이 기능을 사용하기위한 해결 방법이 있습니까?

Answer 1

liferay 테마에 대한 resposiveness를 얻으려면 부트 스트랩의 js 부분이 필요하지 않습니다.

Lifery 6.2에는 js 부분이없는 Bootstrap 2.3이 포함되어 있으며 응답 성있는 탐색 바를 사용하는 것은 좋지 않습니다. 이는 CSS에만 해당됩니다.

클래식 테마는 반응 형이므로 복사하십시오.

Answer 2

jQuery/축소 기능을 사용하지 않고 AlloyUI를 사용하여 반응 형 탐색 메뉴를 표시/숨기기 위해이 자바 스크립트 코드를 사용하고 있습니다. 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"); 
      } 
     }); 
    } 
); 

또한이 코드로 반응 형 탐색 바를 설정합니다. navbar 버튼에서 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> 

나는 이것이 당신에게 충분한 지 모른다.