Thursday, 13 August 2015

Swipeable List Items In Ionic Framework

The expectation of modern mobile applications to have a fancy UI with smooth animations and gesture controls. Users want to be able to drag things.

So we can do same things in ionic framework.

Let's start fresh project for same.

Following are the commands to start the new blank project in ionic frame work-

1) ionic start IonicBankProject blank

2) cd IonicBankProject

3) ionic platform add android

The goal is to have something like, if you swipe a list item left, a series of buttons become exposed.

As per the ionic documentation, the buttons are known as ion-option-buttons. You can add as many ion-option-buttons as you’d like.

Example-

Here we are adding four button in index.html page-

So, index.html page look like-

<ion-item href="#">

Item1

<ion-option-button class = "button-light icon ion-heart"></ion-option-button>
<ion-option-button class = "button-light icon ion-email"></ion-option-button>
<ion-option-button class = "button-assertive icon ion-trash-a"></ion-option-button>
<ion-option-button class = "button-light icon ion-heart"></ion-option-button>
</ion-item>

It is important to add the can-swipe="true" flag, otherwise the list items will be static and won’t slide.

So, now index.html page look like-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
                <ion-list show-delete="false" can-swipe="true">
                    <ion-item href="#">
                        Item 1
<ion-option-button class="button-light icon ion-heart"></ion-option-button>
          <ion-option-button class="button-light icon ion-email"></ion-option-button>
         <ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
                    </ion-item>
                    <ion-item href="#">
                        Item 2
           <ion-option-button class="button-light icon ion-heart"></ion-option-button>
           <ion-option-button class="button-light icon ion-email"></ion-option-button>
  <ion-option-button class="button-assertive icon ion-trash-a"></ion-option-button>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-pane>
    </body>
</html>

Friday, 7 August 2015

Date difference in Angularjs

Hello,

Here i am introducing a way by which, you can find out the date difference in Angularjs :-

If we include the following code in controller.js file , and in that controller where we want the date difference.

So, now our controller.js look like:-

Here we are including the code in Main controller, So

.controller('MainCtrl', function ($scope{
$scope.diffDays = [];
var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
var firstDate = new Date(2015,12,31);
var secondDate = new Date(2014,10,21);
$scope.diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
console.log("Remaining days in current year",$scope.diffDays)

})

Now your main.html file look like:-

<ion-view view-title=Main Page>
<ion-content class="padding">

<p>
Welcome to Angularjs
</p>

<div>
Day Difference
<b> {{diffDays}}</b>
</div>
</ion-content>
</ion-view>

Now in your html page you can see the date difference and in your console also.

Thanks

Friday, 31 July 2015

Include script tag on HTML pages in Ionic

In angularjs we can not include the external <script> tag other than the index.html.

So here a way by which you can include <script> in your html page in angularjs.

For example -

Following is the code of the main.html page we want to include the <script>:-

<ion-view view-title="News" hide-back-button="true">

<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content>
<a class="twitter-timeline" href="https://twitter.com/" >Tweets </a>
<script>
!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</ion-content>
</ion-view>

which is not working.

So, what script we want to include on html page, we will include that script in the corresponding controller in the following ways:-

your main.html look like-

<ion-view view-title="News" hide-back-button="true">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content>
<a class="twitter-timeline" href="https://twitter.com/">Tweets</a>
</ion-content>
</ion-view>

and your controller.js look like:-

Myapp.controller('MainCtrl', function() {

!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
})

Now it will be work.

Friday, 24 July 2015

Include menu-bar and back-button on each page in ionic

Hello,

I want to include menu-bar on each and every page in my ionic project, so i include following lines of code in my html page :-

Currently my about.html is look like:-

<ion-view view-title="About Us">
<ion-nav-bar align-title="center" class="bar-positive header-size">

<ion-nav-back-button class="button-icon icon ion-chevron-left">
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class='container-about' scroll="false">
<div class="text-block">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="text-block">
It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using.
</div>

</ion-content>
</ion-view>

After including the code for menu-bar and back-button on a page in ionic in about.html:-

<ion-view view-title="About Us" hide-back-button="false">
<ion-nav-bar align-title="center" class="bar-positive header-size">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-back-button class="button-icon icon ion-chevron-left">
</ion-nav-back-button>
</ion-nav-bar>
<ion-content class='container-about' scroll="false">
<div class="text-block">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="text-block">
It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using.
</div>

</ion-content>
</ion-view>

Include an icons in ion-item on left

Hello,

It will be helpful to support icons on the left side for list items, the same way images can be used on the left.

Currently icons are left aligned via the following code

and your main.html look like:-

<ion-view view-title="main">
<ion-content>
<ion-list>
<ion-item class="item-icon-left"> <i class="icon ion-document-text"></i>item-icon-left </ion-item> <ion-item class="item-icon-left"> <i class="icon icon ion-email"></i>email </ion-item> <ion-item class="item-icon-left"> <i class="icon ion-document-text"></i>item-icon-left </ion-item> <ion-item class="item-avatar"> <i class="icon ion-document-text"></i>
document </ion-item> <ion-item class="item-avatar"> <i class="icon ion-document-text"></i>item-avatar </ion-item> <ion-item class="item-avatar"> <i class="icon ion-document-text"></i>item-avatar </ion-item> </ion-list>
</ion-content>
<ion-view>

Friday, 17 July 2015

Include a html file into another html file in angularjs

AngularJS Includes:-

With AngularJS, you can include HTML files in HTML, by using ngInclude directive in your HTML page.

ngInclude:-

ngInclude is used for Fetches, compiles and includes an external HTML fragment.

By default, the template URL is restricted to the same domain and protocol as the application document. But by including ngInclude in a template , we can also use another html in that html.

For example-

After including the two html page in a html page.

your html page look like this

<body>
<div class="container"> <div ng-include="'project.html'"></div> <div ng-include="'view.html'"></div></div>
</body>

where project.html and view.html are two different html, which we are using in desired html page, where we want to use these templates.

project.html

<h3>Users</h3><table class="table table-striped"> <thead><tr> <th>Edit</th> <th>First Name</th> <th>Last Name</th> </tr></thead> <tbody><tr ng-repeat="user in users"> <td> <button class="btn" ng-click="editUser(user.id)"> <span class="glyphicon glyphicon-pencil"></span>  Edit </button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr></tbody></table>

view.html

<button class="btn btn-success" ng-click="editUser('new')">  <span class="glyphicon glyphicon-user"></span> Create New User</button><hr>
<h3 ng-show="edit">Create New User:</h3><h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal"><div class="form-group">  <label class="col-sm-2 control-label">First Name:</label>  <div class="col-sm-10">    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">  </div></div> <div class="form-group">  <label class="col-sm-2 control-label">Last Name:</label>  <div class="col-sm-10">    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">  </div></div><div class="form-group">  <label class="col-sm-2 control-label">Password:</label>  <div class="col-sm-10">    <input type="password" ng-model="passw1" placeholder="Password">  </div></div><div class="form-group">  <label class="col-sm-2 control-label">Repeat:</label>  <div class="col-sm-10">    <input type="password" ng-model="passw2" placeholder="Repeat Password">  </div></div></form>
<hr><button class="btn btn-success" ng-disabled="error || incomplete">  <span class="glyphicon glyphicon-save"></span> Save Changes</button>

Friday, 10 July 2015

Show and hide dropdown menu on mouse hover using CSS

Show and hide dropdown menu on mouse hover using CSS:-

To show and hide dropdown menu on mouse hover, we include the following css in your style.css:-

<style type="text/css">
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 125px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
</style>