Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. Thanh Hai Lai Ho
    T
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    Thanh Hai Lai Ho

    @Thanh Hai Lai Ho

    0
    Reputation
    9
    Posts
    1133
    Profile views
    0
    Followers
    2
    Following
    Joined Last Online

    Thanh Hai Lai Ho Follow

    Posts made by Thanh Hai Lai Ho

    • Problem in ons-lazy-repeat

      Hi everybody and Fran Diox !!!

      I want to ask about the case when I add <ons-list-header>title</ons-list-header> in ons-lazy-repeat .

      <ons-page ng-controller="MyCtrl">
        <ons-toolbar>
          <div class="center">Lazy Repeat</div>
        </ons-toolbar>
      
        <ons-list>
          <ons-list-header>title</ons-list-header>
          <ons-list-item ons-lazy-repeat="MyDelegate">
            {{item.name}}
          </ons-list-item>
        </ons-list>
      </ons-page>
      

      http://codepen.io/happyboydk89/pen/oLbodO

      And if, the height of the item is not equal, we will handle that problem how ?

      posted in Onsen UI
      T
      Thanh Hai Lai Ho
    • RE: Error: node is undefined

      @Fran-Diox
      Because in my project I doing, it is big modal

      <ons-modal id="modal" var="modal">
          <ons-toolbar>
            <div class="center">Modal</div>
          </ons-toolbar>  
          <p>Modal content</p>
          <ons-button id="close-modal" modifier="light">Close Modal</ons-button>
          <ons-bottom-toolbar class="bottom-bar footer-bar">
             <div class="center">title</div> 
          </ons-bottom-toolbar>
          <!-- end bottom-bar -->
        </ons-modal>
      
      posted in Onsen UI
      T
      Thanh Hai Lai Ho
    • RE: Error: node is undefined

      @Fran-Diox but how else, I still left it outside…

      example

      <ons-template id="modal.html">
        <ons-modal id="modal" var="modal">
          <p>Modal content</p>
          <ons-button id="close-modal" modifier="light">Close Modal</ons-button>
      
        </ons-modal>
      </ons-template>
      

      So, I will call modal , how ? :smiley:

      posted in Onsen UI
      T
      Thanh Hai Lai Ho
    • RE: Error: node is undefined

      @Fran-Diox :laughing: It’s good !
      Thank U so much !!!

      posted in Onsen UI
      T
      Thanh Hai Lai Ho
    • Error: node is undefined

      Dir Fran Diox !!!

      Now, I have problems about ‘ons-modal’ on firefox and safari de-bug.
      When i add 1 ons-xxx html tag in ons-modal, this error notification.

      0_1463368543027_eror.png

      And this is my code :
      “angular”: “1.4.8”,
      “jquery”: “2.2.2”,
      “onsenui”: “2.0.0-rc.4”

      <!doctype html>
      <html>
      <meta charset="utf-8">
      <title>modal.com</title>
      <link rel="stylesheet" href="../bower_components/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="../bower_components/onsenui/css/onsen-css-components.css">
      <link rel="stylesheet" href="../css/common.css">
      <script src="../bower_components/angular/angular.js"></script>
      <script src="../bower_components/onsenui/js/onsenui.js"></script>
      <script src="../bower_components/onsenui/js/angular-onsenui.js"></script>
      <script src="../bower_components/jquery/dist/jquery.js"></script>
      <script>
        ons.bootstrap();
      
        $(function() {
          $('#show-modal').click(function() {
            //$('#modal').show();
            modal.show();
          });
          $('#close-modal').click(function() {
            $('#modal').hide();
          });
        });
      
      </script>
      <body>
      
      <ons-page id="my-page">
        <ons-toolbar>
          <div class="center">Modal</div>
        </ons-toolbar>
        <p style="text-align: center;" class="pt45">
          <ons-button id="show-modal" modifier="light">Open Modal</ons-button>
        </p>
      </ons-page>
      
      <ons-modal id="modal" var="modal">
        <p>Modal content</p>
        <ons-button id="close-modal" modifier="light">Close Modal</ons-button>
      
      </ons-modal>
      
      </body>
      </html>
      posted in Onsen UI
      T
      Thanh Hai Lai Ho
    • RE: Problem is Tab and content.

      @Fran-Diox
      var app = angular.module(‘schedule’,[‘onsen’]);
      app.controller(‘ScheduleController’,function(){
      this.information = gems;
      });
      And after i remove

      <script>
        ons.bootstrap();
      </script>
      

      All have been resolved :laughing:
      Thank you so much !!! Fran

      posted in Onsen UI
      T
      Thanh Hai Lai Ho
    • Problem is Tab and content.

      Hi every body and @Fran Diox !!!
      Can U help me, pls ?
      Now, I have “segment-control” and 2 div.content.
      So, with one simple tabs Jquery like this, it’s ok? :blush:
      how is the difference between “$(”.modal").show();" and “modal.show();” ?, when i using modal.show() , console eror
      0_1459746932675_abc.png
      and $(".modal").show(); is ok ?

      <!doctype html>
      <html ng-app="schedule">
      <meta charset="utf-8">
      <title>test.com</title>
      <link rel="stylesheet" href="../bower_components/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="../bower_components/onsenui/css/onsen-css-components.css">
      <link rel="stylesheet" href="../css/common.css">
      <link rel="stylesheet" href="my.css">
      <script src="../bower_components/angular/angular.js"></script>
      <script src="../bower_components/onsenui/js/onsenui.js"></script>
      <script src="../bower_components/onsenui/js/angular-onsenui.js"></script>
      <script>
        ons.bootstrap();
      </script>
      <script src="../bower_components/jquery/dist/jquery.js"></script>
      <script src="my.js"></script>
      <body ng-controller="ScheduleController as schedule">
      <ons-pages id="schedule-page">
        <ons-toolbar>
          <div class="left">
          	<i class="fa fa-angle-left ml10"></i>  Back
          </div>
          <div class="center">TITLE</div>
          <div class="right">
          	<ul class="clearfix">
              
              <li id="show-modal01">show Modal</li>
            </ul>
          </div>
        </ons-toolbar>
        <!-- end ons-toolbar -->
      
      <div class="navigation-bar segment-control clearfix">
            <div class="navigation-bar__center">
              <!-- segment control -->
              <div class="button-bar">
                <div class="button-bar__item">
                  <input type="radio" name="navi-segment-a" checked>
                  <div class="button-bar__button">A</div>
                </div>
                <div class="button-bar__item">
                  <input type="radio" name="navi-segment-a">
                  <div class="button-bar__button">b</div>
                </div>
              </div>
            </div>
          </div>
          <!-- end navigation-bar -->
        
        <div class="content">
          <div class="schedule" ng-repeat="info in schedule.information">
          	<ons-row class="sche_row mb15 clearfix">
              <ons-col><i class="fa fa-building-o"></i>{{info.sc_building}}</ons-col>
            </ons-row>
            <ons-row class="sche_row mb15 clearfix">
              <ons-col><i class="fa fa-arrow-circle-o-up"></i>{{info.sc_access}}</ons-col>
              <ons-col><i class="fa number fa-file-o"></i>{{info.sc_id}}</ons-col>
              <ons-col><i class="fa fa-truck"></i>{{info.sc_flood}}</ons-col>
            </ons-row>
            <ons-row class="sche_row mb15 clearfix">
              <ons-col><i class="fa fa-truck"></i>{{info.sc_bus}}</ons-col>
              <ons-col><i class="fa fa-trash-o"></i>{{info.sc_bin}}</ons-col>
            </ons-row>
            <ons-row class="sche_row mb15 clearfix">
              <ons-col><i class="fa fa-industry"></i>{{info.sc_analytics}} </ons-col>
            </ons-row>
            <ons-row class="sche_row mb15 clearfix">
              <ons-col><i class="fa fa-calendar"></i>{{info.sc_calendar}}</ons-col>
              <ons-col><i class="fa number fa-file-o"></i>{{info.sc_number}}</ons-col>
            </ons-row>
            <ons-row class="sche_row">
              <ons-col>
              	<dl class="tb-info clearfix">
                  <dt><span class="icon icon_bikou"></span>Remark</dt>
                  <dd>{{info.sc_mark}}</dd>
                </dl>
              </ons-col>
            </ons-row>
          </div>
          <!-- end schedule -->
        </div>
        <!-- end content -->
      
       <div class="content hidden">
         This is Content B
      </div>
        <!-- end content -->
        
        <ons-bottom-toolbar class="bottom-bar footer-bar">
          <div class="bottom-bar__line-height">
          	<ons-row class="pl25 pr25">
              <ons-col>
                <button class="button">back</button>
              </ons-col>
              <ons-col>
                <ul class="f-control">
                  <li data-tags="menu" data-pack="ios" class="ion-ios-more"></li>
                  <li data-tags="add, include, new, invite, +" data-pack="ios" class="ion-ios-plus-empty"></li>
                </ul>    
              </ons-col>
            </ons-row>
          </div>
        </ons-bottom-toolbar>
        <!-- end bottom-bar -->
        
        <div id="footer" class="layer-foot">
          <p id="copyright">Copyright &copy; test.com, Inc. All Rights Reserved.</p>
        </div>
        <!-- end footer -->
      </ons-pages>  
      
      <ons-modal var="modal" class="modal">
        <div class="modal_inner">
          abc
        </div>
      </ons-modal>
      <!--End Modal-->
      </body>
      </html>
      

      And now my.js

      $(function() {
      	$("#show-modal01").click(function() {
      		$(".modal").show();
      	});
      	$("#close_modal01").click(function() {
      		$(".modal").hide();
      	});
      	
      	$(".button-bar .button-bar__item").click(function() {
      		var num = $(".button-bar .button-bar__item").index(this);
      		$(".content").hide();
      		$(".content").eq(num).show();
      		$(".button-bar .button-bar__item").removeClass('select');
      		$(this).addClass('select');
      	});
      	
      });
      
      (function (){
      	var app = angular.module('schedule',[]);
      	app.controller('ScheduleController',function(){
      		this.information = gems;										  
      	}); 
      	var gems = [
      		{ 
      			sc_building: 'xxxx', 
      			sc_access: 'xxxx', 
      			sc_id: 'xxxx',
      			sc_flood: '9',
      			sc_bus: 'xxxx',
      			sc_bin: 'xxxx',	
      			sc_analytics: 'xxxx',
      			sc_calendar: 'xxxx',
      			sc_number: '123456789012345678901234567890',
      			sc_mark: '空白'
      		},
      		{ 
      			sc_building: 'xxxx', 
      			sc_access: 'xxxx', 
      			sc_id: 'xxxx',
      			sc_flood: '9',
      			sc_bus: 'xxxx',
      			sc_bin: 'xxxx',	
      			sc_analytics: 'xxxx',
      			sc_calendar: 'xxxx',
      			sc_number: '123456789012345678901234567890',
      			sc_mark: '空白'
      		}
      	];
      
      })();
      

      **
      Please comment on my code !!!** :grinning:

      posted in Onsen UI
      T
      Thanh Hai Lai Ho
    • RE: ons.bootstrap is not a function when I using onsenui.js v2.0.0-beta

      Yeah, thank a lot !!!
      anythings ok…
      And NOW
      "Error: node is undefined

      return logFn.apply(console, args);"

      Lol…

      posted in Onsen UI
      T
      Thanh Hai Lai Ho
    • ons.bootstrap is not a function when I using onsenui.js v2.0.0-beta

      Dir Fran Diox !!!
      Now, I have a problem with onsenui.js version. and when i call 1 modal : "ReferenceError: modal is not defined"
      But,when I using onsenui.js version 1.3.15, any things is good.
      I have learned and follow api:
      https://onsen.io/2/reference/ons-modal.html

      <script src=“lib/onsenui/js/onsenui.js”></script>
      <script>
      ons.bootstrap();
      </script>

      posted in Onsen UI
      T
      Thanh Hai Lai Ho