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:
