onsen UI 2에서 자바 스크립트로 동적으로 새 회전식 메뉴 항목 추가

Onsen UI 2에 자바 스크립트로 동적으로 새 회전식 메뉴 항목을 추가하려고했지만 현재 작동 중입니다. 내가 사용하고 코드는 내가 새로운 회전 목마 항목을 추가 사용하고 코드는 다음과 같습니다onsen UI 2에서 자바 스크립트로 동적으로 새 회전식 메뉴 항목 추가

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/> 
     <link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css"/> 
     <script src="node_modules/onsenui/js/onsenui.js"></script> 
     <script src="jquery.js"></script> 
    </head> 

    <body> 
     <ons-splitter> 
      <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable> 
       <ons-page> 
        <ons-list> 
         <ons-list-item onclick="fn.load('home.html')" tappable> 
          Home 
         </ons-list-item> 
        </ons-list> 
       </ons-page> 
      </ons-splitter-side> 
      <ons-splitter-content id="content" page="home.html"></ons-splitter-content> 
      <ons-navigator id="myNavigator" page="home.html"></ons-navigator> 
     </ons-splitter> 

     <ons-template id="home.html"> 
      <ons-page id="home"> 
       <ons-toolbar> 
        <div class="left"> 
         <ons-toolbar-button onclick="fn.open()"> 
          <ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon> 
         </ons-toolbar-button> 
        </div> 
        <div class="center top-bar-title"></div> 
        <div class="right">     
         <ons-toolbar-button id="addInCarousel"> 
          <ons-icon icon="ion-ios-plus, material:md-plus" size="32px, material:24px"></ons-icon> 
         </ons-toolbar-button> 
        </div> 
       </ons-toolbar> 

       <ons-carousel auto-refresh fullscreen swipeable auto-scroll overscrollable id="itemsCarousel" direction="horizontal"> 
        <ons-carousel-item> 
         <img src="images/01.jpg" style="width: 100%; height: auto;"/>     
        </ons-carousel-item>     
        <ons-carousel-item id="caro2"> 
         <img src="images/02.jpg" style="width: 100%; height: auto;"/> 
        </ons-carousel-item>     
       </ons-carousel> 
      </ons-page> 
     </ons-template> 

     <script> 
      window.fn = {}; 
      window.fn.open = function() { 
       var menu = document.getElementById('menu'); 
       menu.open(); 
      }; 

      window.fn.load = function(page) { 
       var content = document.getElementById('content'); 
       var menu = document.getElementById('menu'); 
       // content.load(page).then(menu.close.bind(menu)); 
       document.querySelector('#myNavigator').pushPage(page); 
       menu.close(); 
      }; 

      ons.ready(function() { 
       var carousel = document.addEventListener('postchange', function(event) { 
        console.log('Changed to ' + event.activeIndex); 
       });  
      }); 

      document.addEventListener("init",function(event) { 
       var page = event.target; 

       if(page.matches('#home')) { 
        // set page header title 
        page.querySelector('ons-toolbar .center').innerHTML = 'Testing App'; 

        // clicking on header add button for adding new carousel item 
        page.querySelector('#addInCarousel').onclick = function() { 
         console.log("In function"); 
         var onsItem= document.createElement('ons-carousel-item');      
         onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';    
         document.getElementById('itemsCarousel').appendChild(onsItem); 
        };   
       } 
      }, false); 
     </script> 
    </body> 
</html>

다음과 같다 : 내가 잘못하고있는 중이 야 어디

// clicking on header add button for adding new carousel item 
        page.querySelector('#addInCarousel').onclick = function() { 
         console.log("In function"); 
         var onsItem= document.createElement('ons-carousel-item');      
         onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';    
         document.getElementById('itemsCarousel').appendChild(onsItem); 
        };

안내하시기 바랍니다. 모든 코드 견본 또는 웹 링크는 높이 평가 될 것입니다.

출처

2017-03-10 Vivek

내가 때문에 <기능 - 스플리터 - 콘텐츠 ID = "내용"페이지 = "home.html을">와 둘 다 home.html을 가리 키기 때문에 작동하지 않습니다. 이것의 작동하지 않습니다. – Vivek

그래서 내 애플 리케이션에서 스플리터와 탐색기를 사용할 수 있습니까? – Vivek

을 <ons-splitter-content> 안에 넣고 page 속성을 <ons-splitter-content>으로 지울 수 있습니다.

<ons-splitter-content id="content"> 
    <ons-navigator id="myNavigator" page="home.html"></ons-navigator>  
</ons-splitter-content>

이

두 home.html 페이지의 초기화를 해결할 것입니다.

는 또한 현재 페이지의 id에 대한 나중에 검색 때문에, page.querySelector("#id") 방법으로 함수에 document.getElementById("id") 방법을 전환해야합니다.

따라서 함수는 다음과 같이 보일 것이다 :

page.querySelector('#addInCarousel').onclick = function() { 
    console.log("In function"); 
    var onsItem= document.createElement('ons-carousel-item');      
    onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';    
    page.querySelector('#itemsCarousel').appendChild(onsItem); 
};

출처

2017-03-13 03:44:30

이것은 같은 페이지에서 스플리터와 네비게이터를 사용하는 방법에 대한 답변입니다. – Vivek

onsen UI 2에서 자바 스크립트로 동적으로 새 회전식 메뉴 항목 추가

답변

관련 문제