How do we achieve rowspan in Onsen ons-row & ons-col, just like we did in table/tr/td?
the following is a sample.
Thanks a lot.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
Check this out:
<v-ons-page>
<ons-list>
<ons-list-item>
<ons-row>
<ons-col width="50%">
<ons-row>
<ons-col width="50%" > <b>Month</b> </ons-col>
<ons-col width="50%" > <b>Savings</b> </ons-col>
</ons-row>
<ons-row>
<ons-col width="50%" > January </ons-col>
<ons-col width="50%"> $100 </ons-col>
</ons-row>
<ons-row>
<ons-col width="50%"> February </ons-col>
<ons-col width="50%"> $80 </ons-col>
</ons-row>
</ons-col>
<ons-col width="50%">
<ons-row>
<ons-col width="100%" style="text-align: center"> <b>Savings for holiday!</b> </ons-col>
</ons-row>
<ons-row>
<ons-col width="100%" style="height: 38px; line-height: 38px;" > $50 </ons-col>
</ons-row>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</v-ons-page>
Related
i unable to put space between two button . and i also tried without ons-row and ons-col
code :
<ons-template id="page2.html">
<ons-page>
<ons-row>
<ons-col >
<ons-button id="show-loading" type="button" class="button button--large" ng-click="showLoading()">Show
Loading
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col >
<ons-button id="uniqueDeviceShow" type="button" class="button button--large"
ng-click="uniqueDeviceShow()">Unique Device ID
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col >
<ons-button id="barcodeScan" type="button" class="button button--large" ng-click="barcodeScan()">Barcode
Scan
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col >
<ons-button id="fileMake" type="button" class="button button--large" ng-click="fileMake()">File Make
</ons-button>
</ons-col>
</ons-row>
<ons-row>
<ons-col >
<ons-button id="fileUpload" type="button" class="button button--large" ng-click="fileUpload()">File
Upload
</ons-button>
</ons-col>
</ons-row>
<ons-modal var="modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Please wait.<br>Loading...
</ons-modal>
</ons-page>
</ons-template>
Here is my OnsenUI
I try to do something like this ionic UI
Note : if i use <br>then ui button space between two button ok fine it is working well in iOS but not android . what should i do ?
I have a form input field and a button inside a modal and for some reason they both are inactive. If I try to click them I can not enter any text into the field or the button doesnt do anything. All fields and buttons work fine on the page and all my other pages, but dont work correctly in my modals.
Modal
<ons-modal var="modalSample" ng-controller="SampleController">
<ons-navigator var="nav3" page="sample">
</ons-navigator>
</ons-modal>
<ons-template id="sample">
<ons-page>
<ons-tabbar position="top">
<ons-row>
<ons-col width="15%">
<div style="margin-top:15px"><i class="ion ion-arrow-left-c" ng-click="modalSample.hide()"></i></div>
</ons-col>
<ons-col width="45%" align="left">
<div style="padding-top:18px;color:#fff;">Sample Groups</div>
</ons-col>
<ons-col width="20%" align="left">
</ons-col>
</ons-row>
</ons-tabbar>
<ons-row style="padding-top:145px">
<ons-col>
<input type="text" id="stufxx" placeholder="test"/>
<ons-button modifier="large" class="login-button" ng-click="alert('heelo')" style="background:#ccc">Test button</ons-button>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
Rest of page
<ons-sliding-menu var="menu" main-page="main.html" menu-page="menux.html" max-slide-distance="90%" type="reveal" side="left">
</ons-sliding-menu>
<ons-template id="menux.html">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.closeMenu()" style="padding-top:2em;padding-bottom:3.5em;">
<ons-row >
<ons-col width="20%" align="left">
<img src="img/profile.png" width="30" class="profilex"/>
</ons-col>
<ons-col width="80%" align="left">
Andrew
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('tags.html', {param1: 'bla'});menu.closeMenu()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-barcode-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right" >Tags</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="modalSample.show()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-pie-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Sample Groups</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('apps.html', {param1: 'bla'});menu.closeMenu()" style="border-bottom:1px solid #ddd">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-paper-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Apps</span>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item class="menu-item" ng-click="myNavigator.pushPage('settings.html', {param1: 'bla'});menu.closeMenu()">
<ons-row>
<ons-col width="20%" align="left">
<ons-icon icon="ion-ios-cog-outline darkgrey"></ons-icon>
</ons-col>
<ons-col width="80%" align="left">
<span style="padding-left:0.3em" align="right">Settings</span>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-navigator var="myNavigator">
<ons-page ng-controller="LoginController">
<ons-tabbar position="top">
<ons-tabbar-item style="margin-top:20px;border-right:1px solid #ec6d2f" icon="ion-navicon" onclick="menu.toggleMenu()"></ons-tabbar-item>
<ons-tabbar-item page="dashboard.html" icon="ion-ios-pulse-strong" active="true" class="tab-bar__button tab-bar--top-border__button"></ons-tabbar-item>
<ons-tabbar-item page="timeline.html" icon="ion-android-calendar"></ons-tabbar-item>
<ons-tabbar-item page="negative.html" icon="ion-android-walk"></ons-tabbar-item>
<ons-tabbar-item page="capture.html" icon="ion-pinpoint"></ons-tabbar-item>
</ons-tabbar>
</ons-page>
</ons-navigator>
</ons-template>
I am a bit confused as to why you would have a navigator in a modal, but I did a codepen that has inputs and buttons in it which works. Please see this codepen:
http://codepen.io/anon/pen/qbGQrN
The modal is just simply this:
<ons-modal var="modal">
<ons-button onclick="alert('It Works! Input - '+document.getElementById('myInput').value);modal.hide();">Button</ons-button>
<input type="text" id="myInput"/>
</ons-modal>
I am trying to use multiple files for pages. However, I also want to use the sliding menu. I read here that to use multiple files with Onsen you just remove <ons-template>. I understand this, but I can't get the sliding menu to work with it. Here is what I have.
<body>
<ons-sliding-menu side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
<div class="menu">
<ons-page>
<ons-list class="menu-list">
<ons-list-item class="menu-item" ng-click="menu.setMainPage('index.php', {closeMenu: true})">
<ons-icon icon="fa-plus" fixed-width="true"></ons-icon>
Today's Meals
</ons-list-item>
<ons-list-item class="menu-item" ng-click="menu.setMainPage('other.php', {closeMenu: true})">
<ons-icon icon="fa-bookmark" fixed-width="true"></ons-icon>
Some other Page
</ons-list-item>
</ons-list>
</ons-page>
</div>
</ons-sliding-menu>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Today's Meals</div>
<div class="right weight">277.4 LBS</div>
</ons-toolbar>
<ons-list class="plan-list">
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date">7:00 AM</div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 1</div>
<div class="plan-info">
<ul>
<li>2 Chicken Breasts</li>
<li>Blueberries</li>
<li>Side Salad with Ranch</li>
</ul>
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 2</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 3</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="chevron" class="plan">
<ons-row>
<ons-col width="80px" class="plan-left">
<div class="plan-date"><ons-icon icon="fa-clock-o"></ons-icon></div>
</ons-col>
<ons-col width="6px" class="plan-center-alt"></ons-col>
<ons-col class="plan-right">
<div class="plan-name">MEAL 4</div>
<div class="plan-info">
No food recorded yet.
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-page>
</body>
I am not using this with cordova or phonegap. I am just using this as a framework for a mobile web page.
Thank you!
You just need to wrap the menu page and the main page with <ons-template> like this:
<ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page>
...
</ons-page>
</ons-template>
<ons-template id="main.html">
<ons-page>
...
</ons-page>
</ons-template>
Hope it helps!
I want to add a page before my sliding menu page. I succeeded to accomplish that. But, now I can't access menu.toggle();
I logged the menu object, that says undefined. And I've also tried navi.menu but that also doesn't seem to work. This is the closest solution I've got but no menu.toggle
Onsen UI - Using Slide-Menu just for specifics pages here is my code
<ons-navigator title="Navigation" var="navi" page="homePage.html">
</ons-navigator>
<ons-template id="homePage.html">
<ons-page ng-controller="mainPageController">
<ons-toolbar>
<div class="center">PHPTRAVELS</div>
<div class="right">
<ons-toolbar-button>Exit</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-row class="home-page">
<ons-col>
<ons-list>
<ons-list-item modifier="tappable"
style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[2].status"
ng-click="navi.pushPage('home.html')">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-building" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Hotels</div>
<div class="description">Find the perfect hotel room</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[6].status || modules[7].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-plane" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Flights</div>
<div class="description">Get the best flight</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[3].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-briefcase" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Tours</div>
<div class="description">Your vacation awaits</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[1].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-car" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Cars</div>
<div class="description">Seek a deal on wheels</div>
</ons-col>
</ons-row>
</ons-list-item>
<ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;"
ng-show="modules[0].status">
<ons-row>
<ons-col width="70px" class="ic">
<ons-icon icon="fa fa-leanpub" size="50px"></ons-icon>
</ons-col>
<ons-col>
<div class="title">Blog</div>
<div class="description">Travel news portal</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</ons-col>
</ons-row>
</ons-page>
</ons-template>
<ons-sliding-menu
menu-page="menu.html" main-page="home.html" side="left"
var="menu" type="reveal" max-slide-distance="260px">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<br><br>
<ons-list class="menu-list">
<ons-list-item menuitem class="menu-item selected" ng-click="menu.setMainPage('home.html', {closeMenu: true});">
<i class="glyphicon glyphicon-home"></i>
Home
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true});">
<i class="glyphicon glyphicon-calendar"></i>
Browse Hotels
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true});">
<i class="glyphicon glyphicon-gift"></i>
Special Offers
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('blog.html', {closeMenu: true});">
<i class="glyphicon glyphicon-th-list"></i>
Blog
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('mybookings.html', {closeMenu: true});">
<i class="glyphicon glyphicon-user"></i>
My Bookings
</ons-list-item>
<ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('contactus.html', {closeMenu: true});">
<i class="glyphicon glyphicon-map-marker"></i>
Contact Us
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="home.html">
<!-- <ons-navigator var="nav"> -->
<ons-page ng-controller="homeController">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle();">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center text-center">PHPTRAVELS</div>
<div class="right">
<ons-toolbar-button>
<!-- <ons-icon icon="refresh" size="30px" spin="{{isFetching}}" fixed-width="true"></ons-icon> -->
<ons-icon icon="ion-load-c" ng-show="isFetching" spin="{{isFetching}}"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<div>some text</div>
</ons-page>
</ons-template>
The methods toggle(), open() and close() for the sliding menu are deprecated.
You can use the toggleMenu([options]) method instead: http://onsen.io/reference/ons-sliding-menu.html#method-toggleMenu
It seems like you want a page before the sliding menu so I made a small example:
http://codepen.io/argelius/pen/XJOQwy
How can i manage when i am click on the submit the button the show me the sliding menu only show after submit menu not show the front page how can manage it .???? using onsen ui and angularjs
Main Page
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center" >
<ons-icon icon="user"> Login</ons-icon>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item >
<input type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item>
<input type="password" placeholder="E-Mail Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
<div class="content-padded" align="center" style="margin-top:10px;">
<ons-button modifier="medium"
onclick="myNavigator.pushPage('dashboard.html', { animation : 'slide' } )"> Submit </ons-button>
<ons-button modifier="medium"
onclick="myNavigator.pushPage('forgot_password.html', { animation : 'slide' } )"> Forgot Password </ons-button>
</div>
</ons-page>
</ons-navigator>
This is Sliding menu
<ons-sliding-menu
menu-page="dashboard.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
Home
</ons-list-item>
<!-- <ons-toolbar modifier="transparent">sss</ons-toolbar>-->
<ons-list-header>From Demo Real Estate</ons-list-header>
<ons-list class="bottom-menu-list">
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
Search Residential
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page4.html', {closeMenu: true})">
<ons-icon icon="fa-search"></ons-icon> Search Commercial
</ons-list-item>
<ons-list-header>From Demo Real Estate</ons-list-header>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-user"></ons-icon>
Login or Register
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-book"></ons-icon>
About Us
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-phone"></ons-icon>
Feedback
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-edit"></ons-icon>
Sell/Rent Property
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
Help me!!!!!!!!!!
and thanx in advance ..:)
This is my Hole Code
<html>
<head>
<meta charset="UTF-8">
<title>CodePen - Navigator</title>
<link rel='stylesheet prefetch' href='http://onsenui.io/OnsenUI/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='http://onsenui.io/OnsenUI/build/css/onsen-css-components.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center" >
<ons-icon icon="user"> Login</ons-icon>
</div>
</ons-toolbar>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item >
<input type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item>
<input type="password" placeholder="E-Mail Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
<div class="content-padded" align="center" style="margin-top:10px;">
<ons-button modifier="medium"
onclick="myNavigator.pushPage('dashboard.html', { animation : 'slide' } )"> Submit </ons-button>
<ons-button modifier="medium"
onclick="myNavigator.pushPage('forgot_password.html', { animation : 'slide' } )"> Forgot Password </ons-button>
</div>
<p align="center">Don't Have the account? Please <a onclick="myNavigator.pushPage('register.html', { animation : 'slide' } )" href="" style="text-decoration:none; color:#4282CC"> Register Here</a></p>
</ons-page>
</ons-navigator>
<ons-template id="register.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Register</div>
</ons-toolbar>
<div style="text-align: center"> <br />
<ons-page>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Email Address" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;">
</ons-list-item>
<ons-list-item>
<input type="text" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
<ons-list-item>
<ons-row>
<ons-col width="90px"> <span style="color: #666">Gender</span> </ons-col>
<ons-col>
<div style="float: right; padding-right: 16px;">
<label class="radio-button">
<input type="radio" name="level">
<div class="radio-button__checkmark"></div>
Male
</label>
<label class="radio-button">
<input type="radio" name="level">
<div class="radio-button__checkmark"></div>
Female
</label>
</div>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<div class="content-padded">
<ons-button modifier="large" onclick=""> Sign Up </ons-button>
</div>
</ons-page>
</div>
</ons-page>
</ons-template>
<ons-template id="forgot_password.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Forgot Password</div>
</ons-toolbar>
<ons-page>
<ons-list>
<ons-list-item>
<input type="text" placeholder="Email Address" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>
</ons-list>
<div class="content-padded">
<ons-button modifier="large" onclick=""> Forgot Password</ons-button>
</div>
</ons-page>
</ons-page>
</ons-template>
<!-- =========================== Dashboard Front Pannel ========================================-->
<ons-template id="dashboard.html">
<ons-page>
<ons-toolbar>
<div class="center">
<ons-icon icon="user"> Dashboard</ons-icon>
</div>
</ons-toolbar>
<ons-page >
<div class="content-padded" >
<ons-button modifier="large">
<div align="left">Latest Shipment List</div>
</ons-button>
</div>
<table id="responsive-example-table" class="large-only bordare" cellspacing="2" cellpadding="5" width="98%" style="margin:10px;" >
<tbody>
<tr align="center">
<th>#</th>
<th>AWB NO</th>
<th>Origin</th>
<th>Destination</th>
<th>Pickup Date</th>
<th>Dilvery Date</th>
<th>Status</th>
<th>Print Lable</th>
</tr>
<tr align="center">
<td>01</td>
<td>10000252</td>
<td>Bikaner</td>
<td>Japur</td>
<td>10-5-2015</td>
<td>10-5-2015</td>
<td><span class="col_bg_yellow"> Pickup Scheduled </span></td>
<td align="center"><i class="fa fa-print"></i></td>
</tr>
<tr class="dark_tabl" align="center">
<td>02</td>
<td>10000252</td>
<td>Bikaner</td>
<td>Japur</td>
<td>10-5-2015</td>
<td>10-5-2015</td>
<td><span class="col_bg_yellow"> Pickup Scheduled </span></td>
<td align="center"><i class="fa fa-print"></i></td>
</tr>
</tbody>
</table>
<div class="content-padded" >
<ons-button modifier="large">
<div align="left">Latest Booking List</div>
</ons-button>
</div>
<table id="responsive-example-table" class="large-only bordare" cellspacing="2" cellpadding="5" width="98%" style="margin:10px;">
<tbody align="center">
<tr align="center">
<th>#</th>
<th>AWB NO</th>
<th>Booking Id</th>
<th>Booking Date</th>
<th>Origin</th>
<th>Destination</th>
<th>Service</th>
<th>Product/Type</th>
<th>Pay Status</th>
<th>Action</th>
</tr>
<tr align="center">
<td>01</td>
<td>10000252</td>
<td>XKXCZN</td>
<td>10-5-2015</td>
<td>Rangareddy</td>
<td>Prakasam</td>
<td>Normal service</td>
<td>Parcel</td>
<td><span class="col_bg_green"> PAID </span></td>
<td><i class="fa fa-search"></i> <i class="fa fa-list-alt"></i> <i class="fa fa-print"></i></td>
</tr>
<tr class="dark_tabl" align="center">
<td>02</td>
<td>10000252</td>
<td>XKXCZN</td>
<td>10-5-2015</td>
<td>Rangareddy</td>
<td>Prakasam</td>
<td>Normal service</td>
<td>Parcel</td>
<td><span class="col_bg_red"> DUE </span></td>
<td><i class="fa fa-search"></i> <i class="fa fa-list-alt"></i> <i class="fa fa-print"></i></td>
</tr>
</tbody>
</table>
</ons-page>
</ons-page>
</ons-template>
<!--============================================================================================-->
<!-- =======================================VIEW DETAILS FOR BOOKING =============================-->
<ons-template id="booking_view.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">TRACKING RESULT FOR AWB# {{users.slip_no}}</div>
</ons-toolbar>
<table cellspacing="2" cellpadding="2" width="100%" style="margin:10px;" >
<tr>
<td><b>Payment Status</b></td>
<td><ons-button modifier="cta">Pending</ons-button></td>
</tr>
<tr >
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > SHIPMENT DETAILS:<span>{{users.delivered}}</span> </ons-button>
</div></td>
</tr>
<tr>
<td><b>Schedule Delivery</b> {{user.origin}}</td>
<td>{{users.expected_date | date: 'fullDate'}}, By End Of Day</td>
<td><b>Last Location</b></td>
<td>{{users.origin}}</td>
</tr>
<tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > DIMENSION DETAILS: </ons-button>
</div></td>
</tr>
<tr>
<td><b>Origin</b></td>
<td>{{users.origin}}</td>
<td><b>Destination</b></td>
<td>{{users.destination}}</td>
</tr>
<tr>
<td><b>Service</b></td>
<td>{{users.service_id}}</td>
<td><b>Shipped/Billed On</b></td>
<td>{{users.pickup_date | date: 'fullDate'}}</td>
</tr>
<tr>
<td><b>Type</b></td>
<td>{{users.nrd}}</td>
<td><b>Weight</b></td>
<td>{{users.weight}}KG</td>
</tr>
<tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > SHIPPER DETAILS : </ons-button>
</div></td>
</tr>
<tr>
<td><b>Name</b></td>
<td>{{users.sender_name}}</td>
<td><b>Address</b></td>
<td>{{users.sender_address}}</td>
</tr>
<tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > CONSINGER DETAILS : </ons-button>
</div></td>
</tr>
<tr>
<td><b>Name</b></td>
<td>{{users.reciever_name}}</td>
<td><b>Address</b></td>
<td>{{users.reciever_address}}</td>
</tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > OTHER PARCEL DETAILS : </ons-button>
</div></td>
</tr>
<tr>
<td><b>Name</b></td>
<td>{{users.reciever_name}}</td>
<td><b>Address</b></td>
<td>{{users.reciever_address}}</td>
</tr>
<td colspan="5"><div > <br>
<ons-button modifier="dark" style="width:99%; margin-left:5px;" > PAYEMENT DETAILS : </ons-button>
</div></td>
</tr>
<tr>
<td><b>Total Amount</b></td>
<td>{{users.reciever_name}}</td>
</tr>
<td><b>Tax(3.9%)</b></td>
<td>{{users.reciever_name}}</td>
</tr> <td><b>Net Amount</b></td>
<td>{{users.reciever_name}}</td>
</tr>
</table>
</ons-page>
</ons-template>
<!--============================================================================================-->
<!--============================== Sliding Menu =================================================-->
<ons-sliding-menu
menu-page="menu.html" main-page="page1.html" side="left"
var="menu" type="reveal" max-slide-distance="260px" swipable="true">
</ons-sliding-menu>
<ons-template id="menu.html">
<ons-page modifier="menu-page">
<ons-list-item class="bottom-menu-item" ng-click="myNavigator.resetToPage('page-with-menu.html'), {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
Home
</ons-list-item>
<ons-list-header>From Demo Real Estate</ons-list-header>
<ons-list class="bottom-menu-list">
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
<ons-icon icon="fa-home"></ons-icon>
Search Residential
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page4.html', {closeMenu: true})">
<ons-icon icon="fa-search"></ons-icon> Search Commercial
</ons-list-item>
<ons-list-header>From Demo Real Estate</ons-list-header>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-user"></ons-icon>
Login or Register
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-book"></ons-icon>
About Us
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-phone"></ons-icon>
Feedback
</ons-list-item>
<ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('login.html', {closeMenu: true})">
<ons-icon icon="fa-edit"></ons-icon>
Sell/Rent Property
</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<!--============================================================================================-->
<script src='http://onsenui.io/OnsenUI/build/js/angular/angular.js'></script><script src='http://onsenui.io/OnsenUI/build/js/onsenui.js'></script>
<script src="js/index.js"></script>
</body>
</html>