DotNet Developer Blog: JQuery

Showing posts with label JQuery. Show all posts

Thursday, 9 October 2014

Create a Custom element tag ngZLayer to form a gray out above any element or Div in HTML5 using angular js

In this blog post we are going to see how to gray out above any element tags, using angular js, so to do we are going to create a custom element which will make the child element of that tag to Grayout using the property value as true, when the property value as false , it will remove the gray out above the div or element.

Steps to do :

add the following line
<script type="application/javascript" src="ang/ng-zLayer.js"></script>

place an element above the element which you want to grayout dynamically or statically .
<ng-z-layer value="second"></ng-z-layer>

set the value to true to gray out or false to display as normal

Code:
Html

<div>

</div>

<br/>

<ng-z-layer value="first">

<form>

<fieldset style="color: #ffffff">Employee Registration</fieldset>

<tr><td> <label style="color: #ffffff">Address</label></td>

</table>

</form>

</div>

</ng-z-layer>

<ng-z-layer value="second">

<fieldset>Student Registration</fieldset>

<label>Student Name</label><input type="text" />

<label>Class</label><input type="text" />

</form>

</div>

</ng-z-layer>

</div>

</body>

Code
Javascript

var valueApp = angular.module('valueApp', []);

valueApp.controller('sample', function ($scope) {

$scope.first = false;

$scope.second = false;

$scope.ChangeF = function () {

$scope.first = !$scope.first;

};

$scope.ChangeS = function () {

$scope.second = !$scope.second;

};

});

/**

* Created by Rajesh on 09-10-2014.

angular.module('ngZLayer.directive', [])

.directive('ngZLayer', function () {

return {

restrict: 'E',

scope: {

value: '='

link: function (scope, element, attrs, cntrl) {

scope.ChangeVisible = function () {

if (scope.value != undefined) {

if (scope.value == true) {

element.css('opacity', '0.5');

element.css('pointer-events', 'none');

element.css('z-index', '20');

element.css('display', 'block');

element.css('filter', 'alpha(opacity = 55)');

element.css('width', element.child().css('width'));

element.css('height', element.child().css('height'));

}

else {

element.css('opacity', '1');

element.css('pointer-events', 'all');

}

};

scope.$watch('value', function () {

if (scope.value != undefined) {

scope.ChangeVisible();

}

});

}

});

angular.module('ngZLayer', ['ngZLayer.directive']);

Output:
Before Gray out

After Gray out dynamically in button click

From this post you can learn how to gray out above any element using the custom element tag ngZLayer.

Monday, 22 September 2014

Create custom element tag Color Code Picker , which will shows the code of a color by selecting the color in the picker in HTML5

In this article we are going to create a custom element which will pickup the code of a color in the HTML5

Output:

Output After selecting value

Now create a directive for this

Code:

   var ngControls = angular.module('ngControls',[]);

    ngControls.directive('colorCodePicker', function () {

        return{

            restrict:'E',
            tranclude:true,
            template:'<input ng-model="colorvalue" type="color" />'+<div>
                '<notify-indicator bgcolor="{{colorvalue}}" data="colorvalue" 
                  element-type="square">' +
                '</notify-indicator>'+
                '</div>',
            scope:{
                color:'='
            },

            link: function (scope) {

                function Apply(scope, fn) {
                 (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
                }

                scope.colorvalue = '';
                function AssignColor() {
                    Apply(scope, function () { scope.colorvalue = '#8080ff'; });
                }

                AssignColor();

                scope.$watch('color', function () {
                    if(scope.color!=undefined){ scope.colorvalue = scope.color; }
                    else{ scope.colorvalue = "#8080ff"; }
                });

            }

        }

    });

For full detail about the notify-indicator tag,please read the following link. notification-indicator

Controller:

valueApp.controller('sample',function($scope){
$scope.colorvalue = '#800040';
}

HTML:

From the above you can see how to use the colorcodepicker tag in HTML5

Wednesday, 30 July 2014

Creating a Star Control as element Tag or Attribute in HTML using Angular Js

In this article we are going to see how to create a Star Rating control in the HTML as Element or as Attribute using the Angular js. To do this we are going to take create the Directive in Angular js, First Let we see what kind of element or Attribute we are going to create and what kind of output it will give ?

Below Code Snippet is we trying to do

Output:

From the Code we can render a Star Control, using the some of the properties it will have some behavior change.

custom-rating is the act as element or attribute for render a star control, it have few options
readonly : set true for this attribute if you want the star control as readonly
max : set the number of star you want to render
star-size : size of the star control
rating-value : specify the rating value of a control
on event is there to trigger for the change in the star value when user clicked, then use the
on-rating-changed with a function passing parameter in the name of rating , which consists the value, now you can trigger the value to the server.

Now we start to build the directive.

Add the following jquery in the HTML.

Then start writing coding in Angular.

Create a Module and controller

First step is create a module in separate js file and include in the HTML.

var myApp = angular.module('myApp', []);

myApp.controller('BlogController', function ($scope, $window) {

$scope.sample = 'Blog Testing';

$scope.rating = 5;

$scope.rating2 = 1;

$scope.saveRating = function (rating) {

console.log('Rating selected ' + rating);

};

$scope.Sample = function (rating) {

console.log('sample ' + rating);

};

});

Create a Directive

myApp.directive('customRating', function () {

return {

restrict: 'AE',

template: '<ul class="rating">' +

'<li ng-repeat="star in stars" ng-class="star" ng- click="toggle($index)">\u2605</li>' +

'</ul>',

scope:

{

ratingValue: '=',

max: '=',

readonly: '@',

starSize: '=',

onRatingChanged: '&'

link: function (scope, element, attrs) {

var updateStars = function () {

scope.stars = [];

for (var i = 0; i < scope.max; i++) {

scope.stars.push({ filled: i < scope.ratingValue });

}

};

element.css('font-size', scope.starSize);

scope.toggle = function (index) {

if (scope.readonly && scope.readonly === 'true') {

return;

}

scope.ratingValue = index + 1;

scope.onRatingChanged({ rating: index + 1 });

};

scope.$watch('ratingValue', function (oldval, newval) {

if (newval) {

updateStars();

}

})

}

});

So now when include the custom js in the Html, we can able to render the Star control .Now when ever user change the value in one star it affects others because of binding, at the same time we are trigger the changes to the server.

From this article you can learn how to render a star control tag in Html using Angular Js.