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.
-
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
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 © 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:
-
@Thanh-Hai-Lai-Ho You are bootstrapping the app twice. First with
ons.bootstrap()
and later withangular.module('schedule',[])
. Read more aboutons.bootstrap
here. Try changing that and see if it fixes your issue.
-
@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