Ionic 2 Use with JQuery

Ionic 2 is built on top of Angular 2, but if you want to use JQuery to complete some functions, here's the way on HOW TO INSTALL JQuery in your IONIC 2 project.  

1. Create an Ionic 2 project

$ ionic start ionic-Jquery --v2 --ts

2.  Change directory to your Ionic 2 Project - ionic-OpenGraph

$ cd ionic-Jquery

3. Install Jquery

$ npm install jquery--save

**Error**

if you see the Errors below-

npm WARN package.json ionic-Jquery@ No repository field.

npm WARN package.json ionic-Jquery@ No README data

npm WARN package.json ionic-Jquery@ No license field.

Open your package.json file within your project and paste below codes above "dependencies": 

"name": "veg-news",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "engines": {
    "node": "0.10.15",
    "npm": "1.3.5"
  },
  "repository": {
    "type": "svn",
    "url": ""
  },

Now your package.json should looks like as below


after you modified your package.json, try install the JQuery again and this time should be working.


4. install JQuery global derectory to typings (so you can import it)

$ typings install dt~jquery --global --save

5. $ ionic serve --lab


6. Let's import jquery to our home.ts
 import * as $ from 'jquery'


7. create a button in home.html  to check if jquery works 
  <button danger full id="button" (click)="changeText()">click me</button>

8. create fuction changeText() in home.ts

changeText(){
  $('#button').text('Clicked');
 $('#button').height('80px');
}

9. WORKS!!!

How To Make Fidget Spinner

Are you looking for  Fidget Spinner, this post will explain you how to create a  Fidget Spinner using Jquery, HTML and CSS,  I want to explain how to design  Fidget Spinner with CSS, HTML and Jquery.  Fidget Spinner help you to  spin Like Real   Fidget Spinner, Just take a quick look at these four steps, use it and make your own  Fidget Spinner.  

HTML Code

Layout divided into five  parts are BG, everything and holder ,spinner. Here handle

<div class="bg"></div>
        <div class="everything">
            <div class="holder">
                <div class="spinner">
                    <img src="fidgetspinner_r.png">
                </div>
                <div class="handle"></div>
            </div>
        </div>

CSS Code

body,html {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    overflow: hidden
}

.bodge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #000;
    z-index: 99
}

.bodge a {
    font-style: italic;
    color: #000
}

.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background: -moz-linear-gradient(-45deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(-45deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0) 100%);
    background: linear-gradient(135deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0) 100%)
}

.everything {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%
}

.spinner img {
    width: 100%
}

.holder,.spinner {
    width: 300px;
    height: 300px;
    position: relative
}

.handle {
    width: 70px;
    height: 70px;
    position: absolute;
    top: 115px;
    left: 115px;
    z-index: 1
}

CSS3  KeyAnimation

@media screen and (min-width: 370px) and (max-width:499px) {
    .holder,.spinner {
        width:360px;
        height: 360px;
        position: relative
    }

    .handle {
        width: 80px;
        height: 80px;
        position: absolute;
        top: 140px;
        left: 140px;
        z-index: 1
    }
}

@media screen and (min-width: 500px) {
    .holder,.spinner {
        width:500px;
        height: 500px;
        position: relative
    }

    .handle {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 200px;
        left: 200px;
        z-index: 1
    }
}

JavaScript

function resizeMe() {
    initialOffset = $(".handle").position().top
}
function spin() {
    $(".handle").pep({
        drag: updatePos,
        easing: updatePos
    }),
    initialOffset = $(".handle").position().top,
    spinner = $(".spinner").propeller({
        inertia: .999,
        speed: .5,
        onDragStop: function() {
            backgroundInit = !0
        },
        onDragStart: function() {
            backgroundInit = !1
        },
        onRotate: function() {
           // updateBackground(this.speed)
        }
    })
}
function updateBackground(t) {
    var e = "rgb(" + Math.floor(256 * Math.random()) + "," + Math.floor(256 * Math.random()) + "," + Math.floor(256 * Math.random()) + ")";
    if (!backgroundAnimating && backgroundInit) {
        var n = Math.abs(1e3 - 10 * Math.abs(t));
        backgroundAnimating = !0,
        $("body").animate({
            backgroundColor: e
        }, n, function() {
            backgroundAnimating = !1
        })
    }
}
function doDrag(t, e) {
    onDragStart,
    updatePos(t, e)
}
function updatePos(t, e) {
    var n = $(e.el);
    $(".spinner").css({
        top: n.position().top - initialOffset,
        left: n.position().left - initialOffset
    })
}
var initialOffset = 0, backgroundInit = !1, backgroundAnimating = !1, spinner;