3. Problem is Tab and content.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Problem is Tab and content.

  • T

    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:

    0 1 Reply
  • Onsen UI

    @Thanh-Hai-Lai-Ho You are bootstrapping the app twice. First with ons.bootstrap() and later with angular.module('schedule',[]). Read more about ons.bootstrap here. Try changing that and see if it fixes your issue.

    0
    T
     1 Reply
  • T

    @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

    0